title: shinyWidgets::prettyRadioButtons() The alignment of Choices on Radio Button #484
body: <pre class="lang-r prettyprint-override"><code>require('BBmisc')
  lib('shiny')
  lib('shinythemes')
  lib('shinydashboard')
  lib('shinydashboardPlus')
  lib('dashboardthemes')
  lib('shinyWidgets')
  lib('shinyjs')
  lib('memoise')
  if(!require('XML')) devtools::install_github('omegahat/XML')
  lib('XML')
  
  ### creating custom logo object
  logo &lt;- shinyDashboardLogoDIY(
    boldText = 'ξηg', 
    mainText = 'Lιαη Ημ', 
    textSize = 16, 
    badgeText = ' ®γσ', 
    badgeTextColor = 'white', 
    badgeTextSize = 2, 
    badgeBackColor = &quot;#40E0D0&quot;, 
    badgeBorderRadius = 3)
  
  alignCenter &lt;- memoise(function(el) {
    htmltools::tagAppendAttributes(el, style=&quot;width:500vw;height:100vh;background-color:#fff;display:flex;align-items:center;justify-content:center;&quot;)
  })
  
  ui &lt;- shinyUI(
    shinydashboardPlus::dashboardPage(#skin = 'midnight', 
      header = shinydashboardPlus::dashboardHeader(title = logo),
      
      sidebar = shinydashboardPlus::dashboardSidebar(
        minified = TRUE, collapsed = FALSE, 
        sidebarMenu(
          id = 'tabs', 
          menuItem('®️Studio ☁️', tabName = 'menu', 
                   ## https://getbootstrap.com/docs/3.4/components/#glyphicons
                  ## https://fontawesome.com/icons 
                  icon = icon('fa-brand fa-linux'), startExpanded = TRUE, 
                  menuSubItem(' Home', tabName = 'home'),
                  menuSubItem(' ENGLISH', tabName = 'en'), 
                  menuSubItem(' 简体中文', tabName = 'cn'), 
                  menuSubItem(' 繁体中文', tabName = 'tw'),
                  menuSubItem(' 日本語', tabName = 'jp'),
                  menuSubItem(' 한국어', tabName = 'kr'),
                  menuSubItem(' Deutsch', tabName = 'de'),
                  menuSubItem(' français', tabName = 'fr'),
                  menuSubItem(' Italiano', tabName = 'it'))#, 
          #menuItem('Appendices', icon = icon('th'), tabName = 'append', 
          #         menuSubItem('Author', tabName = 'author'))
          )), 
      
      body = dashboardBody(
        shinyDashboardThemes(theme = 'blue_gradient'), 
        tabItems(
          tabItem(tabName = 'home', h2('®️Studio ☁️', align = 'center'), alignCenter(
            #shinydashboardPlus::box(
                    prettyRadioButtons(
              inputId = 'rb', label = NULL, 
              choices = c(' ENGLISH' = 'en',
                          ' 简体中文' = 'cn', 
                          ' 繁体中文' = 'tw', 
                          ' 日本語' = 'jp', 
                          ' 한국어' = 'kr', 
                          ' Deutsch' = 'de', 
                          ' Français' = 'fr', 
                          ' Italiano' = 'it'), 
              shape = 'curve', animation = 'pulse', 
              selected = character(0), status = 'primary', 
              thick = TRUE, width = '100%', bigger = TRUE, 
              icon = icon('registered')))
            ), 
          tabItem(tabName = 'en', h2(' ENGLISH', align = 'center'), 
                  tags$iframe(src = 'http://rpubs.com/englianhu/ryo-en', 
                              height = 800, width = '100%', frameborder = 0)#, 
                  #HTML(readLines('www/ryo-en.html')), 
                  #fluidPage(includeHTML('www/ryo-en.html'))
                  ), 
          tabItem(tabName = 'cn', h2(' 简体中文', align = 'center'), 
                  #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-cn', 
                  #            height = 800, width = '100%', frameborder = 0), 
                  #HTML(readLines('www/ryo-cn.html')), 
                  fluidPage(includeHTML('www/ryo-cn.html'))), 
          tabItem(tabName = 'tw', h2(' 繁体中文', align = 'center'), 
                  #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-tw', 
                  #            height = 800, width = '100%', frameborder = 0), 
                  #HTML(readLines('www/ryo-tw.html')), 
                  fluidPage(includeHTML('www/ryo-tw.html'))), 
          tabItem(tabName = 'jp', h2(' 日本語', align = 'center'), 
                  #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-jp', 
                  #            height = 800, width = '100%', frameborder = 0), 
                  #HTML(readLines('www/ryo-jp.html')), 
                  fluidPage(includeHTML('www/ryo-jp.html'))),
          tabItem(tabName = 'kr', h2(' 한국어', align = 'center'), 
                  #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-kr', 
                  #            height = 800, width = '100%', frameborder = 0), 
                  #HTML(readLines('www/ryo-kr.html')), 
                  #fluidPage(includeHTML('www/ryo-kr.html'))
                  ), 
          tabItem(tabName = 'de', h2(' Deutsch', align = 'center'), 
                  #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-de', 
                  #            height = 800, width = '100%', frameborder = 0), 
                  #HTML(readLines('www/ryo-de.html')), 
                  #fluidPage(includeHTML('www/ryo-de.html'))
                  ), 
          tabItem(tabName = 'fr', h2(' Français', align = 'center'), 
                  #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-fr', 
                  #            height = 800, width = '100%', frameborder = 0), 
                  #HTML(readLines('www/ryo-fr.html')), 
                  #fluidPage(includeHTML('www/ryo-fr.html'))
                  ), 
          tabItem(tabName = 'it', h2(' Italiano', align = 'center'), 
                  #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-fr', 
                  #            height = 800, width = '100%', frameborder = 0), 
                  #HTML(readLines('www/ryo-fr.html')), 
                  #fluidPage(includeHTML('www/ryo-fr.html'))
                  ))), 
    
    footer = shinydashboardPlus::dashboardFooter(
      p('Powered by - Copyright® Intellectual Property Rights of ', 
        tags$a(href='https://www.scibrokes.com', target = '_blank', 
               tags$img(height = '20px', alt = 'scibrokes', #align='right', 
                        src='www/Scibrokes.png')), 
        HTML(&quot;&lt;a href='https://www.scibrokes.com'&gt;Sςιβrοκεrs Trαdιηg®&lt;/a&gt;&quot;))), 
    title = 'DashboardPage'))
  
  #shinyApp(server = server, ui = ui)
  </code></pre>
  <p><em>ui.R as above</em>
  <br></p>
  <pre class="lang-r prettyprint-override"><code>require('BBmisc')
  lib('shiny')
  lib('shinythemes')
  lib('shinydashboard')
  lib('shinydashboardPlus')
  lib('dashboardthemes')
  lib('shinyWidgets')
  lib('shinyjs')
  lib('memoise')
  if(!require('XML')) devtools::install_github('omegahat/XML')
  lib('XML')
  
  server &lt;- shinyServer(function(input, output, session) {
    
    #observeEvent(input$rb, {
    #       newtab &lt;- switch(input$tabs, 
    #                        &quot;en&quot; = &quot;en&quot;, 
    #                        &quot;cn&quot; = &quot;cn&quot;, 
    #                        &quot;tw&quot; = &quot;tw&quot;, 
    #                        &quot;jp&quot; = &quot;jp&quot;)
    #       updateTabItems(session, &quot;tabs&quot;, newtab)
    #    })
    
    #output$cv_page &lt;- renderUI({
    #  
    #  page = switch(input$rb, 
    #                en = 'www/ryo-en.html',
    #                cn = 'www/ryo-cn.html',
    #                tw = 'www/ryo-tw.html',
    #                jp = 'www/ryo-jp.html')
    #  
      #HTML(markdown::markdownToHTML('ryo-en.md'))
      #HTML(rmarkdown::render(knit('ryo-en.Rmd')))
    #  includeHTML(page)
    #})
    
    #observeEvent(input$rb, {
    #  newtab &lt;- switch(input$tabs,
    #                   &quot;home&quot; = &quot;home&quot;,
    #                   &quot;en&quot; = &quot;en&quot;, 
    #                   &quot;cn&quot; = &quot;cn&quot;,
    #                   &quot;tw&quot; = &quot;tw&quot;, 
    #                   &quot;jp&quot; = &quot;jp&quot;,
    #                   &quot;author&quot; = &quot;author&quot;)
    #  updateTabItems(session, &quot;tabs&quot;, newtab)
    #})
    
    observeEvent(input$rb == 'en', {
      updateTabItems(session, &quot;tabs&quot;, selected = &quot;en&quot;)
    })
    
    observeEvent(input$rb == 'cn', {
      updateTabItems(session, &quot;tabs&quot;, selected = &quot;cn&quot;)
    })
    
    observeEvent(input$rb == 'tw', {
      updateTabItems(session, &quot;tabs&quot;, selected = &quot;tw&quot;)
    })
    
    observeEvent(input$rb == 'jp', {
      updateTabItems(session, &quot;tabs&quot;, selected = &quot;jp&quot;)
    })
    
    #output$ryo_en &lt;- renderUI({
    #  #HTML(markdown::markdownToHTML('ryo-en.md'))
    #  #HTML(rmarkdown::render(knit('ryo-en.Rmd')))
    #  includeHTML(&quot;ryo-en.html&quot;)
    #})
    
    #output$ryo_cn &lt;- renderUI({
    #  #HTML(markdown::markdownToHTML('ryo-en.md'))
    #  #HTML(rmarkdown::render(knit('ryo-en.Rmd')))
    #  includeHTML(&quot;ryo-cn.html&quot;)
    #})
    
    #output$ryo_tw &lt;- renderUI({
    #  #HTML(markdown::markdownToHTML('ryo-en.md'))
    #  #HTML(rmarkdown::render(knit('ryo-en.Rmd')))
    #  includeHTML(&quot;ryo-tw.html&quot;)
    #})
    
    #output$ryo_jp &lt;- renderUI({
    #  #HTML(markdown::markdownToHTML('ryo-en.md'))
    #  #HTML(rmarkdown::render(knit('ryo-en.Rmd')))
    #  includeHTML(&quot;ryo-jp.html&quot;)
    #})
    
    #observeEvent(input$rb, {
    #  updateTabItems(session, input$rb,
    #                    selected = input$rb)
    #})
    
    #observeEvent(input$rb, {
      #tbs &lt;- c('en', 'cn', 'tw', 'jp', 'kr', 'de', 'fr', 'it')
    #  newtab &lt;- switch(input$tabs, 
    #                   'en' = 'en', 
    #                   'cn' = 'cn', 
    #                   'tw' = 'tw', 
    #                   'jp' = 'jp', 
    #                   'kr' = 'kr', 
    #                     'de' = 'de', 
    #                   'fr' = 'fr', 
    #                   'it' = 'it')
    #  updateTabItems(session, 'tabs', newtab)#, selected = input$rb)
    #})
    
    #observeEvent(input$rb, {
    #  updatePrettyRadioButtons(
    #    session = session,
    #    inputId = 'rb',
    #    choices = c('en', 'cn', 'tw', 'jp', 'kr', 'de', 'fr', 'it'),
    #    prettyOptions = list(animation = 'pulse', status = 'info', 
    #                         shape = 'curve', status = 'primary', 
    #                         thick = TRUE, width = '100%', 
    #                         bigger = TRUE, icon = icon('registered')))
    #}, ignoreInit = TRUE)
    
  })
  
  #shinyApp(server = server, ui = ui)
  </code></pre>
  <p><em>server.R as above</em></p>
  <p>Try to use <code>shinyWidgets::prettyRadioButtons()</code> but wonder why the alignment doesn't working fine? Below shows the problem.</p>
  <p><a href="https://i.stack.imgur.com/nrAWl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nrAWl.png" alt="Current output" /></a></p>
  <p><em>Current output as above, the choices do not align same line with radio buttons</em></p>
  <p>Just wonder how to make it work as normal as shows below? I do appreciate if somebody take a look.</p>
  <p><a href="https://i.stack.imgur.com/iuudY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iuudY.png" alt="Expected output" /></a></p>
  <p><em>Expected output as above, the choices do align same line with radio buttons</em></p>
  <p><a href="https://i.stack.imgur.com/NfeQ3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NfeQ3.png" alt="stepwise effect" /></a>
  <em>Expected output as above will be BEST, the choices do align same line with radio buttons with stepwise effect (animated bounce-in or fly-in will be wonderful)</em></p>
  <hr />
  <p>Source of Question:</p>
  <ul>
  <li><a href="https://github.com/dreamRs/shinyWidgets/issues/484" rel="nofollow noreferrer"><code>GitHub: The alignment of Choices on Radio Button #484</code></a></li>
  <li><a href="https://community.rstudio.com/t/shinywidgets-prettyradiobuttons-and-shinydashboard-updatetabitems/132835?u=englianhu" rel="nofollow noreferrer"><code>shinyWidgets::prettyRadioButtons()</code> and <code>shinydashboard::updateTabItems()</code></a></li>
  </ul>