Shiny + CSS：對齊shinydashboard側邊欄中的actionButtons

我試圖在shinydashboard側邊欄中放置一些actionButton s，並且需要將它們設置爲在側邊欄中居中並在分配給它們的空間內水平分佈。Shiny + CSS：對齊shinydashboard側邊欄中的actionButtons

這裏是一個MWE：

library(shiny) 
library(shinydashboard) 

foo_body = dashboardBody() 
foo_header = dashboardHeader() 
foo_sidebar = dashboardSidebar(
    sidebarMenu(
    menuItem(
     "A Dashboard", 
     tabName = "tab_overview", 
     icon = icon("gamepad") 
    ) 
), 
    # add some buttons 
    actionButton(inputId = "button1", label = "B 1", icon = icon("paper-plane")), 
    actionButton(inputId = "button2", label = "B 2", icon = icon("paper-plane")), 
    actionButton(inputId = "button3", label = "B 3", icon = icon("paper-plane")) 
) 

foo_page = dashboardPage(
    header = foo_header, 
    sidebar = foo_sidebar, 
    body = foo_body, 
    title = "A Dashboard" 
) 

shinyApp(
    ui = foo_page, 
    server = function(input, output) {} 
)

這裏是應用程序的相關部分，我需要重新風格：

任何想法，一般或特別，會歡迎。

來源

2016-11-02 tchakravarty

您可以向您的按鈕添加樣式，如此。我離開了1個％，餘量爲兩側的按鈕

library(shiny) 
library(shinydashboard) 

foo_body = dashboardBody() 
foo_header = dashboardHeader() 
foo_sidebar = dashboardSidebar(
    sidebarMenu(
    menuItem(
     "A Dashboard", 
     tabName = "tab_overview", 
     icon = icon("gamepad") 
    ) 
), 
    # add some buttons 
    div(style="display:inline-block;width:32%;text-align: center;",actionButton("button1", label = "B 1", icon = icon("paper-plane"))), 
    div(style="display:inline-block;width:32%;text-align: center;",actionButton("button2", label = "B 2", icon = icon("paper-plane"))), 
    div(style="display:inline-block;width:32%;text-align: center;",actionButton("button3", label = "B 3", icon = icon("paper-plane"))) 

) 

foo_page = dashboardPage(
    header = foo_header, 
    sidebar = foo_sidebar, 
    body = foo_body, 
    title = "A Dashboard" 
) 

shinyApp(
    ui = foo_page, 
    server = function(input, output) {} 
)

來源

2016-11-02 08:40:11

感謝這個之間。這仍然有最左邊的按鈕開始太左（除了所有單元的常見1％偏移量外，基本上爲零）。任何方式使它最左邊的按鈕的開始與上面的標籤（大約）對齊？ – tchakravarty

你可以玩百分比，設置爲34％，31％和32％，你應該得到你想要的 –

你可以添加一個解釋，究竟是什麼寬度參數，或指向一個來源，我可以讀取在上面？ – tchakravarty

Shiny + CSS：對齊shinydashboard側邊欄中的actionButtons

回答

相關問題