似乎flex div中的内容会影响其有关flex-grow属性的计算大小.难道我做错了什么?
在下面提供的小提琴中,你会看到一个数字键盘.除底行外,所有行都包含3个数字.那行应该是'0'是2个数字的宽度,因此flex-grow: 2':'(冒号)是1个数字的大小,因此flex-grow: 1.
我在这里错过了什么吗?
'0'的右侧应与其上方的8,5和2对齐.有点过了.
.numbers {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: space-between;
}
.button {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
margin: 5px;
border-radius: 5px;
border: 1px solid gray;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.button#number0 {
flex-grow: 2;
}
.button#colon {
flex-grow: 1;
}Run Code Online (Sandbox Code Playgroud)
<div class="numbers">
<div class="row">
<div class="button number" id="number1">1</div>
<div class="button number" id="number2">2</div>
<div …Run Code Online (Sandbox Code Playgroud)我的Ui文件中有两个按钮
submitButton("Analysis"),width=6,downloadButton('downloadData', 'Download Data'))
Run Code Online (Sandbox Code Playgroud)
这给出了以下输出作为应用程序
但是,我正在尝试对齐这些按钮,以便下载数据右对齐,分析按钮位于左侧,而不是现在的样子.我该怎么做?
我想在窗口小部件的标题旁边添加一个(?),以便用户可以悬停或单击它并获取额外的信息和他们可以单击的链接.
这就是我现在所拥有的:
## app.R ##
library(shiny)
library(shinydashboard)
library(shinyBS)
# Header
header <- dashboardHeader()
# Sidebar
sidebar <- dashboardSidebar(fileInput("chosenfile", label = h4("File input"),
accept = ".csv"),
bsButton("q1", label = "", icon = icon("question"),
style = "info", size = "extra-small"),
bsPopover(id = "q1", title = "Tidy data",
content = paste0("You should read the ",
a("tidy data paper",
href = "http://vita.had.co.nz/papers/tidy-data.pdf",
target="_blank")),
placement = "right",
trigger = "click",
options = list(container = "body")
)
)
# Body
body <- dashboardBody()
# ui
ui …Run Code Online (Sandbox Code Playgroud) 是否可以numericInput()在标签旁边创建一个闪亮的盒子(而不是默认的下面).
这是一个简单的例子:
library(shiny)
ui <- shinyUI(fluidPage(
titlePanel("Shiny with lots of numericInput()"),
sidebarLayout(
sidebarPanel(
fluidRow(
column(6, numericInput("a1", label = "A1", value = 1)),
column(6, numericInput("b1", label = "B1", value = 1))
),
fluidRow(
column(6, numericInput("a2", label = "A2", value = 2)),
column(6, numericInput("b2", label = "B2", value = 2))
)
),
mainPanel(
p('something interesting')
)
)
))
server <- function(input, output) {}
shinyApp(ui, server)
Run Code Online (Sandbox Code Playgroud)
这导致4行:标签"A1"和"B1"的第一行,相应框的第二行等.如果我尝试调整width参数,它没有帮助numericInput().
(不幸的是我真的不知道html和css直接修改输入小部件的类.)
这是一个类似的问题.但我可以使用fluidRow()处理同一行,我希望标签也在同一行.
目标
我想在actionButtonaselectInput的页脚中放置 a旁边shinydashboard::box。根据this SO question splitLayout应该做我想做的。
问题
在selectInput没有填满整个空间,投入页脚时。似乎一旦在页脚中,selectInput总是采用固定的宽度。有趣的是,当将相同的元素放入框体时,控件会按预期呈现。
题
我如何管理它selectInput和actionButton
代码
library(shiny)
library(shinydashboard)
boxUI <- function(width) {
box(
splitLayout(
selectInput("x", NULL, paste(strrep("x", 10), 1:10)),
actionButton("ok", icon("trash")),
cellWidths = c("85%", "15%"),
cellArgs = list(style = "vertical-align: top")),
footer = splitLayout(
selectInput("y", NULL, paste(strrep("x", 10), 1:10)),
actionButton("ok", icon("trash")),
cellWidths = c("85%", "15%"),
cellArgs = list(style = "vertical-align: top")
), width = width, solidHeader = TRUE, …Run Code Online (Sandbox Code Playgroud)