r - 调整 Shiny 控件的标签位置

Question

我很惊讶这之前没有出现在 StackOverflow 上，但无论如何这里是一个问题:

目前，此处指定了标签文本“年龄范围”
sliderInput(inputId="age", "Age Range", min=32, max=99, value=c(32, 99), step=1)
...并默认显示在顶部。



如何控制标签的位置，具体来说，如何将标签放在实际 slider 的左侧？

我是否需要从函数中删除“年龄范围”参数然后使用 HTML？有什么方法可以挖掘这一切背后的 Bootstrap 吗？

Answer 1

请注意，我不是 CSS 的导出商，因此很可能有更好的解决方案。 Shiny (v0.11.1) 中的输入函数只返回 HTML；在您的示例中，返回值为:

sliderInput(inputId="age", "Age Range", min=32, max=99, value=c(32, 99), step=1)
<div class="form-group shiny-input-container">
<label class="control-label" for="age">Age Range</label>
<input class="js-range-slider" id="age" data-type="double" data-min="32" data-max="99" data-from="32" data-to="99" data-step="1" data-grid="true" data-grid-num="9.57142857142857" data-grid-snap="false" data-prettify-separator="," data-keyboard="true" data-keyboard-step="1.49253731343284"/>
</div>

所以你必须调整label相对于 input 的元素元素。为此，我将这些元素包装在一个新的 div 中。能够分配 id .然后你可以修改label的布局和 input在那个id里面:

div(id = "myDiv", sliderInput(inputId="age", "Age Range", min=32, max=99, value=c(32, 99), step=1))
<div id="myDiv">
...
</div> 

对于修改，我将以下内容添加到页面函数(例如 fluidPage )作为参数:

tags$head(tags$style(HTML("div#myDiv label { width: 20%; }
                           div#myDiv input { display: inline-block; width: 80%;}")))

在此设置中，标签获得行宽的 20%，输入元素为 80。display: inline-block;是必需的，因此标签和输入将在同一行。我认为这是调整标签相对于其输入元素的位置的一种解决方案。