R Shiny - Выравнивающая вправо кнопка действия в складном меню. Элемент, вызывающий побочный эффект? - PullRequest
Новая
       8

R Shiny - Выравнивающая вправо кнопка действия в складном меню. Элемент, вызывающий побочный эффект?

0 голосов
/ 04 февраля 2019

У меня есть Shinydashboard с тремя складными пунктами меню в боковом меню.Первый пункт меню содержит кнопку действия, которую я пытаюсь выровнять по правому краю.Когда элемент меню развернут, кнопка видна, но перетекает на метку второго пункта меню:

enter image description here

Что вызывает этот эффект и как можноЯ собираюсь исправить это?

Вот код для воспроизведения приложения: 

library("shiny")
library("shinydashboard")

header = dashboardHeader()

sidebar = dashboardSidebar(
  sidebarMenu(

    menuItem("Item 1", tabName = "item1", 

             selectInput("letters", "Letters:", choices = LETTERS),

             tags$div(class = "pull-right", 
                      actionButton("clickme", label = "Click me", style = "primary")
             )

    ), 

    menuItem("Item 2"), 
    menuItem("Item 3")

  )
)
body = dashboardBody()

ui = dashboardPage(header, sidebar, body)

server = function(input,output,session){}

shinyApp(ui, server)

Замена class = "pull-right" на style = "float:right;" имеет тот же эффект.

Добавлениеэтот стиль: 

.skin-blue .sidebar-menu>li>.treeview-menu {
    overflow: auto;
}

, кажется, избавляет от проблемы ореолов, но добавляет прокрутку к части переполнения выпадающего списка selectInput, которую я не хочу:

enter image description here

1 Ответ

0 голосов
/ 04 февраля 2019

Чтобы выровнять action button вправо, мы можем сделать CSS аналогично здесь 

sidebar = dashboardSidebar(
  sidebarMenu(
    menuItem("Item 1", tabName = "item1",
             selectInput("letters", "Letters:", choices = LETTERS),
             actionButton("clickme", label = "Click me", style = "primary"),
             tags$style(type='text/css', "button#clickme {margin-left: 60%;}")), 
    menuItem("Item 2"), 
    menuItem("Item 3")
  )
)

В качестве альтернативы 

menuItem("Item 1", tabName = "item1",
             selectInput("letters", "Letters:", choices = LETTERS),
             div(style="display:inline-block;margin-left: 52%;padding-bottom: 10px;",
                 actionButton("clickme", label = "Click me", style = "primary"))
...