upd: re-design layout

app.R

@@ -34,25 +34,27 @@ ui <- fluidPage(
                          choices = list("Tanggal" = "tanggal", "Karbohidrat" = "karbo", "Protein Hewani" = "protein_hewani", "Protein Nabati" = "protein_nabati", "Buah/Sayur" = "buah_sayur", "Lemak Tambahan" = "lemak_tambahan", "Camilan" = "camilan", "Gejala Alergi" = "gejala")), 
              conditionalPanel("input.komponen == 'tanggal'", 
                               div(style="display:flex;margin:auto 0px;", 
-                                  column(1, 
-                                         actionButton("prev", "<")
-                                         ), 
-                                  column(1, 
-                                         airDatepickerInput("cari_date", NULL, width = "100%", value = Sys.Date())
-                                         ),
-                                  column(1, 
-                                         actionButton("nex", ">")
-                                         )
+                                  # column(1, 
+                                         actionButton("prev", "<", style="width:5rem;height:3.4rem;"), 
+                                         # ), 
+                                  # column(1, 
+                                         airDatepickerInput("cari_date", NULL, width = "100%", value = Sys.Date()), 
+                                         # ),
+                                  # column(1, 
+                                         actionButton("nex", ">", style="width:5rem;height:3.4rem;")
+                                         # )
                               ), 
-                              column(12, 
-                                     uiOutput("out_cari_tgl")
-                              )
+                              # column(12, 
+                                     wellPanel(style="background-color:transparent;", 
+                                               uiOutput("out_cari_tgl")
+                                     )
+                              # )
              ), 
              conditionalPanel("input.komponen != 'tanggal'", 
                               textInput("keyword", "Kata kunci", width = "100%"), 
-                              column(12, 
+                              # column(12,
                                      uiOutput("out_cari_komponen")
-                              )
+                              # )
              )
              )
   )
@@ -144,8 +146,8 @@ server <- function(input, output, session){
         h4(cari_menu$camilan, style="margin: 5px 0px 20px;"), 
         # br(), 
         h5("Gejala Alergi"), 
-        h4(cari_menu$gejala, style="margin: 5px 0px 20px;color: red;"),
-        br()
+        h4(cari_menu$gejala, style="margin: 5px 0px 20px;color: red;")#,
+        # br()
       )
     }
   })
@@ -168,10 +170,13 @@ server <- function(input, output, session){
   
   output$out_history <- renderUI({
     if(ncol(cari_history()) == 1 | input$keyword == "" | nrow(history()) == 0){
-      p("Tidak ada data", style="text-align: center;")
+      wellPanel(style="background-color:transparent;", 
+                p("Tidak ada data", style="text-align: center;")
+      )
     } else if(ncol(cari_history()) >= 1){
       tagList(
-        h5("Tanggal"),
+        wellPanel(style="background-color:transparent;", 
+                  h5("Tanggal"),
         h4(format(as.Date(history()$tanggal), "%d %b %Y"), style="margin: 5px 0px 20px;"),
         # br(),
         h5("Karbohidrat"),
@@ -193,8 +198,9 @@ server <- function(input, output, session){
         h4(history()$camilan, style="margin: 5px 0px 20px;"),
         # br(),
         h5("Gejala Alergi"),
-        h4(history()$gejala, style="margin: 5px 0px 20px;color: red;"),
-        br()
+        h4(history()$gejala, style="margin: 5px 0px 20px;color: red;")#,
+        # br()
+        )
         
       )
     }
@@ -206,23 +212,24 @@ server <- function(input, output, session){
     } else if(nrow(cari_history()) > 1){
       tagList(
         div(style="display:flex;margin:auto 0px;", 
-          column(1, 
-                 actionButton("prev_history", "<")
-          ), 
-          column(10, 
+          # column(1, 
+                 actionButton("prev_history", "<", style="width:5rem;height:3.4rem;"), 
+          # ), 
+          # column(10, 
                  airDatepickerInput("history_date", NULL, width = "100%", 
-                                    value = min(cari_history()$tanggal))
-          ),
-          column(1, 
-                 actionButton("nex_history", ">")
-          )
+                                    value = min(cari_history()$tanggal)), 
+          # ),
+          # column(1, 
+                 actionButton("nex_history", ">", style="width:5rem;height:3.4rem;")
+          # )
       ),
       uiOutput("out_history")
       )
       
     } else {
       tagList(
-        h5("Tanggal"), 
+        wellPanel(style="background-color:transparent;", 
+                  h5("Tanggal"), 
         h4(format(as.Date(cari_history()$tanggal), "%d %b %Y"), style="margin: 5px 0px 20px;"), 
         # br(), 
         h5("Karbohidrat"), 
@@ -244,8 +251,9 @@ server <- function(input, output, session){
         h4(cari_history()$camilan, style="margin: 5px 0px 20px;"), 
         # br(), 
         h5("Gejala Alergi"), 
-        h4(cari_history()$gejala, style="margin: 5px 0px 20px;color: red;"),
-        br()
+        h4(cari_history()$gejala, style="margin: 5px 0px 20px;color: red;")#,
+        # br()
+        )
       )
     }