HTML formatting of checkboxs, icons, and text for Shiny

Question

So, my question is about design. Sorry, never posted HTML questions. Adding print screen. If it is possible, without code, it is too cumbersome.

I have UI

My data is grouped into four groups

 ui <- fluidPage(theme = shinytheme("united"),
            titlePanel(HTML("<h1><center><font size=14> Projects </font></center></h1>")), 
            sidebarLayout(
              sidebarPanel(tags$b(tags$em("How about banks")), 

                           checkboxGroupInput("typeInput", h4(tags$b("Sort # Client by type")),
                                              c("Banks 1",
                                                "Banks 2",
                                                "Banks 3",
                                                "Banks 4")),

                tags$br(),          
                tags$br(),           
                column(width = 7, 
                tags$img(src = "Banks 1.png", height = 50, width = 50), h4(tags$b("BANKS 1")),
                h4(tags$em("1. Bank ")),
                h4(tags$em("2. Bank")),
                h4(tags$em("3. Bank")),
                h4(tags$em("4. Bank")),
                h4(tags$em("5. Bank")),

                tags$br(),
                tags$br(),
                tags$img(src = "Banks 2.png", height = 50, width = 50), h4(tags$b("Banks 2")),
                h4(tags$em("6. Bank")),
                h4(tags$em("7. Bank")),
                h4(tags$em("8. Bank")),
                h4(tags$em("9. Bank"))),


                tags$img(src = "Banks 3.png", height = 50, width = 50), h4(tags$b("Banks 3")),
                h4(tags$em("10. Bank")),

                tags$br(),
                tags$img(src = "Banks 4.png", height = 50, width = 50), h4(tags$b("Banks 4")),
                h4(tags$em("11. Bank")),
                h4(tags$em("12. Bank")),
                h4(tags$em("13. Bank")),
                h4(tags$em("14. Bank")),
                h4(tags$em("15. Bank")),
                h4(tags$em("16. Bank")),
                h4(tags$em("17. Bank")),
                h4(tags$em("18. Bank")),
                h4(tags$em("19. Bank")),


                tags$br()

              column(10,style='white-space:nowrap;width:800px;',  
                     leafletOutput("research_map",width="1200px",height="750px"))
            )
)

But I want to put each checkbox near icon and then a list of banks under this icon. The same approach with all four categories. Icon + checkbox - and list under them. Any ideas to do it? Thanks

@amrrs, sorry, never posted html questions, I added a printscreen. Many thanks. — Anakin Skywalker, Sep 22 '17 at 11:18
@BigDataScientist, if it is possible, I would not want to share the code here for privacy reasons. It is big and it is difficult to edit it. Is it possible to solve without it? See my print screen, please. — Anakin Skywalker, Sep 22 '17 at 13:06
no need for "private" code and also not desired. Please read this: https://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example. Then you have way better chances getting a good and fast response. Good luck! — Tonio Liebrand, Sep 22 '17 at 15:36

score 1 · Accepted Answer · answered Sep 22 '17 at 22:25

Resolved.

It was a pain because of checkboxGroupInput

ui <- fluidPage(theme = shinytheme("united"),
            titlePanel(HTML("<h1><center><font size=14> Title </font>
</center></h1>")), 
            sidebarLayout(
              sidebarPanel(tags$b(tags$em("Text")), 

                           div(id='typeInput', class="form-group shiny-
input-checkboxgroup shiny-input-container shiny-bound-input",
                               # this was written in order to "separate" 
group checkbox inputs accross page  
                               tags$br(),
                               tags$br(),
                               column(width = 7,
                                      tags$img(src = "Banks 1.png", height = 
50, width = 50), h4(tags$b("Banks 1")),
                                      HTML("<input type=checkbox 
name=typeInput value=Banks 1>"),
                                      h4(tags$em("1. Bank")),
                                      h4(tags$em("2. Bank")),
                                      h4(tags$em("3. Bank")),
                                      h4(tags$em("4. Bank")),
                                      h4(tags$em("5. Bank")),

                                      tags$br(),
                                      tags$br(),
                                      tags$img(src = "Banks 2.png", height = 
 50, width = 50), h4(tags$b("Banks 2")),
                                      HTML("<input type=checkbox 
 name=typeInput value=Banks 2>"),
                                      h4(tags$em("6. Bank")),
                                      h4(tags$em("7. Bank")),
                                      h4(tags$em("8. Bank")),
                                      h4(tags$em("9. Bank"))),

              column(width = 10,style='white-space:nowrap;width:800px;',  
                     leafletOutput("map",width="1200px",height="750px"))#)

Thanks!

HTML formatting of checkboxs, icons, and text for Shiny

1 Answers1