How to put shiny inline radiobuttons text at the top

Question

I would like to create a rating site, just like this: https://codepen.io/migli/pen/xGRwje

But I want at the midle.

div(radioButtons("nav1", "", choiceValues=1:10, 
choiceNames=as.character(1:10), selected=0, inline = T), align='center'),

This is that I want in the midle, but i am bad in css.

Answer 1

See this I have added a div wrapper around form and following css will make it center vertically and horizontally

 .makeItCenter { display: flex; height: 100vh; justify-content: center; align-items: center; } 

 <div class="makeItCenter"> your code </div> 

check the below link https://codepen.io/anon/pen/vPXPmg

screenshot:

Answer 2

library(shiny)

css <- "
.radio-inline {
  padding: 0 10px;
  text-align: center;
  margin-left: 0 !important;
}
.radio-inline input {
  top: 20px;
  left: 50%;
  margin-left: -6px !important;
}"

ui <- basicPage(
  tags$head(
    tags$style(HTML(css))
  ),
  radioButtons("nav1", "", choiceValues = 1:10, 
               choiceNames = as.character(1:10), selected = 0, inline = TRUE)
)

server <- function(input, output) {}

shinyApp(ui, server)

Answer 3

Surround your whole form with a div, let's call it "rate":

<div id="rate">
    Your code here
</div>

and then in your css file, add this:

#rate
{
    width: 100%;
    margin: 0 auto;
}