R语言Shiny如何修改侧边栏内输入组件的宽度与字体大小属性
问题原因
- CSS存在语法错误:你的自定义样式末尾多写了一个闭合大括号
},直接导致整段CSS规则失效 - 选择器匹配错误:你使用ID选择器
#mysliderInput匹配元素,但sliderInput()的第二个参数为标签文本属性,不是元素ID,你所有滑块的真实ID为alpha/delta等单独设定的inputId值,规则完全匹配不到目标元素 - 优先级不足:shinydashboard自带侧边栏组件样式优先级更高,直接指定侧边栏下的滑块通用类匹配更稳定
修正方案
你可以通过匹配侧边栏下所有滑块的通用类来统一调整宽度和字体大小,无需给每个滑块单独加类,修正后的代码如下:
dashboardSidebar( width = 500, withMathJax(), tags$head( tags$style(HTML(" /* 调整侧边栏所有滑块的宽度 */ .sidebar .irs { width: 450px !important; } /* 调整滑块标签(helpText包裹的公式文本)字体大小 */ .sidebar .help-block { font-size: 16px !important; } /* 调整滑块刻度字体大小 */ .sidebar .irs-grid-text { font-size: 14px !important; } /* 调整滑块当前数值提示的字体大小 */ .sidebar .irs-from, .sidebar .irs-to, .sidebar .irs-single { font-size: 14px !important; } ")) ), sliderInput(inputId = "alpha", "mysliderInput", label=(helpText(c("Escolha o valor de $\\alpha$:"))), min = 0.01, max = 10, value = 3.48, step = .1, animate = animationOptions(interval = 300, loop = T)), sliderInput(inputId = "delta", "mysliderInput", label=(helpText(c("Escolha o valor de $\\delta$:"))), min = 0.01, max = 10, value = 0.88, step = .1, animate = animationOptions(interval = 300, loop = T)), sliderInput(inputId = "sigma", "mysliderInput", label=(helpText(c("Escolha o valor de $\\sigma$:"))), min = 0.01, max = 10, value = 2.06, step = .1, animate = animationOptions(interval = 300, loop = T)), sliderInput(inputId = "gama", "mysliderInput", label=(helpText(c("Escolha o valor de $\\gamma$:"))), min = 0.01, max = 10, value = 2.97, step = .1, animate = animationOptions(interval = 300, loop = T)), sliderInput(inputId = "eta", "mysliderInput", label=(helpText(c("Escolha o valor de $\\eta$:"))), min = 0.01, max = 10, value = 4.98, step = .1, animate = animationOptions(interval = 300, loop = T)), sliderInput(inputId = "lambda", "mysliderInput", label=(helpText(c("Escolha o valor de $\\lambda$:"))), min = 0.01, max = 10, value = 9.8, step = .1, animate = animationOptions(interval = 300, loop = T)) )
自定义调整说明
你可以根据需求修改对应CSS属性的数值:
- 调整
width属性值修改滑块宽度,注意不要超过侧边栏总宽度 - 调整各个
font-size属性值修改对应位置的字体大小 - 加
!important是为了覆盖shiny自带的默认样式,确保自定义规则生效
内容的提问来源于stack exchange,提问作者Vitor Bernardo Silveira Pereir
相关产品推荐
相关产品推荐

