0

As the example from shinyWidgets' documentation shows, I can define my own subtext labels, that show next to the main label. Is it possible for these subtexts to be aligned to the right, so that all main labels are aligned to left, and subtexts are aligned to right?

A simplified version of example from documentation (in link select pickerInput, the example is called 'Subtext'):

pickerInput(
    inputId = "Id093",
    label = "Subtext", 
    choices = rownames(mtcars[1:3,]),
    choicesOpt = list(
        subtext = paste("mpg", 
            mtcars[1:3,]$mpg,
            sep = ": "
        )
    )
)

Generates following html text:

<div class="form-group shiny-input-container">
  <label class="control-label" for="Id093">Subtext</label>
  <select id="Id093" class="selectpicker form-control">
    <option value="Mazda RX4" data-subtext="mpg: 21">Mazda RX4</option>
    <option value="Mazda RX4 Wag" data-subtext="mpg: 21">Mazda RX4 Wag</option>
    <option value="Datsun 710" data-subtext="mpg: 22.8">Datsun 710</option>
  </select>
</div>

Also attaching image, as it is always better to work with one: list with subtext next to label

I have tried fiddling with css properties (like align-text) using Inspector in Chrome, but there is no luck.

biberman
  • 5,606
  • 4
  • 11
  • 35
yoloBaklawa
  • 13
  • 3
  • Add this to the beginning of your `fluidPage` call: `tags$head(tags$style(HTML(".dropdown-menu span {text-align: right; width: 100%;}")))`. Does that do what you want? – Bas Jun 16 '20 at 12:02
  • Unfortunately, is does not solve the problem. All text is now aligned to right, but I wanted to have only the smaller portion of text to be right aligned. – yoloBaklawa Jun 17 '20 at 11:16
  • Then it should be `tags$head(tags$style(HTML(".dropdown-menu span {width: 100%;} .text-muted {float: right;}")))` – Bas Jun 17 '20 at 12:29

0 Answers0