调整闪亮控件的标签位置

Question

我很惊讶之前没有出现在StackOverflow上，但不管怎样，问题出在这里：

目前，标签文本＆＃34;年龄范围＆＃34;在此处指定

sliderInput(inputId="age", "Age Range", min=32, max=99, value=c(32, 99), step=1)

...默认显示在顶部。

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

我是否需要删除＆＃34;年龄范围＆＃34;从函数参数然后使用HTML？有没有办法深入挖掘它背后的引导程序？

Answer 1

请注意，我不是CSS的导出，所以很可能有更好的解决方案。闪亮的输入函数（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。然后，您可以修改该ID中的label和input的布局：

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;是必需的，因此标签和输入将在同一行上。我认为这是一个调整标签相对于其输入元素位置的解决方案。