CODEWITHSUNDEEP
rshinydata-visualization
tumultous_rooster
tumultous_rooster

Reputation: 12550

adjust position of labels for Shiny controls

I'm surprised that this hasn't come up on StackOverflow before, but anyway here's the question:

Currently, the label text, "Age Range", is specified here

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

...and shows up on the top, by default.

enter image description here

How can I control the position of the labels, specifically, how can I place the label to the left of the actual slider?

Do I need to remove the "Age Range" argument from the function and then use HTML? Is there some way to dig into the bootstrap behind it all?

Upvotes: 4

Views: 2010

Answers (1)

Sebastian
Sebastian

Reputation: 850

Note that I am not an export for CSS, so most likely there are better solutions. The input functions in shiny (v0.11.1) simply return HTML; in your example the return value is:

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>

So you have to adjust the label element relative to the input element. To do this I wrap these elements in a new div to be able to assign an id. Then you can modify the layout for label and input inside that id:

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

And for modification I add the following to the page-function (e.g. fluidPage) as argument:

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

In this setting the label gets 20% of the row width and the input element 80. display: inline-block; is needed so the label and input will be on the same line. I think this is one solution to adjust the position of the label relative to its input element.

Upvotes: 1

Related Questions