I can't see why the Search and Clear Buttons wrap onto the following line after Postcode.
I've used the last example from the Button Addons code from here.
https://getbootstrap.com/docs/4.0/components/input-group/.
Whilst I have not included aria-label="Recipient's username" aria-describedby="basic-addon2" as R htmltools doesn't seem to like it, I don't think it's that (as I've tried adding it in the console with no effect).
Although the Bootstrap example doesn't explicitly add the -fluid to container and flex-xl-nowrap to row, I can see their code has it in Console so tried adding it.
I've added background colours to the columns to make it clear where they are.
---
title: "Stack Overflow Bootstrap "
output: html_document
---
## Purpose
Show buttons wrapping when I don't want them to
```{r cars, echo=FALSE}
# Load packages
pacman::p_load(tidyverse, htmltools)
tagList(
htmltools::withTags(
div(class="container-fluid",
h2("Heading 2"),
div(class="row flex-xl-nowrap",
div(class="col-sm-6",
style="background-color:powderblue;",
h3("1st Column Heading 3")),
div(class="col-sm-6",
style="background-color:Cornsilk;",
h3("2nd Column Heading 3"),
div(class="input-group",
input(
type = "text",
class="form-control",
placeholder = "Postcode...",
style = "width: 80px;"
),
div(class="input-group-append",
button(
type = "submit",
class="btn btn-success",
"Search"
),
button(
type = "reset",
class="btn btn-primary",
"Clear"
)
)
)
)
)
)
)
)
```
As #RadovanMiletić pointed out, the answer is to add "display: block", i.e. change
div(class="input-group",
to
div(class="input-group", style = "display: block",
Related
I am having an issue where the data for my DT table is "bleeding" past the edge of the box in my fluid row.
Here is the tabPanel section
tabPanel("Table title", h1('dataset', style = 'color: #23A595'),
p('Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below.', style = 'color: black'),
fluidRow(
box(DT::dataTableOutput(outputId = "table"), width = NULL, solidHeader = TRUE, status = "primary"),
),
When the app is run here is the result of the render DT.
Here is what the data set looks like.
The red box highlights the issue.
Here is what i have tried:
First,
output$table<- renderDT(
outputtable,options = list(columns.width = "3px"
),
rownames= FALSE
)
Second,
fluidRow(box(DT::dataTableOutput(outputId = "table"),width = #),
)
I was under the impression that shiny just automatically calculates the size needed despite window size an such.
in simple terms, shiny creates box + add DT table to box = box with DT table INSIDE of it.
I want the highlighted issue to not happen what do I need to do?
If there is anything I can add let me know.
The scrollX comment above answered the question.
I'm trying to make a table that has both shows entries and buttons so my peers can export the data from the table.
At first when I added the tables it covered the "Show Entries" section that is usually on the top left. So I wrote this CSS code which moved the buttons to the center of the table but my "Show Entries" section is still empty.
Here is my Rmarkdown code
output: html_document
```{r}
library(readr)
library(DT)
mtcars <- mtcars
```{css echo=FALSE}
.dataTables_wrapper .dt-buttons {
float:none;
text-align:center;
}
datatable(mtcars,
extensions = 'Buttons', options = list(
dom = 'Bfrtip',
buttons = c('copy','excel', 'pdf')
)
)
This is what loads for me
How can I add the "Show Entries" feature?
Use dom = 'Blfrtip' instead of dom = 'Bfrtip'
Related to questions here and here, I would like to change the CSS of a pickerInput menu from ShinyWidgets. I am using flexdashboard and I would like the styling to match exactly that from the selectInput menu. I realize I can do this by setting the overall theme in the YAML to bootstrap, but I'd prefer not to use a global solution.
---
title: "Testing picker styles"
output:
flexdashboard::flex_dashboard
runtime: shiny
---
```{r setup, include=F}
library(shiny)
library(flexdashboard)
library(shinyWidgets)
```
Column
-----------------------------------------------------------------------
```{r}
selectInput(inputId = "id1", label = "Select input", choices = attr(UScitiesD, "Labels"))
pickerInput(inputId = "id2", label = "Picker input", choices = attr(UScitiesD, "Labels"))
```
pickerInput is styled like a Bootstrap button, and {flexdashboard} use Bootswatch's Cosmo theme (https://bootswatch.com/3/cosmo/) that's why it appears black.
You can change the class of the button with :
options = pickerOptions(style = "btn-link")
(in pickerInput arguments)
Or you can overwrite the base style like this :
options = list("style-base" = "form-control", style = "")
I have a Shiny app which is working exactly as I want :-) ... except for an annoying layout glitch when a conditional panel is displayed - the layout is shown below ...
My issue is that when the "Other" check box is checked, a conditional textInput is displayed ( in-line) and all the form objects below 'jump' down the screen (by about half a line height).
I presume that it's because the textInput box is centered in its line (and taller than the other objects on the line) - but the 'jumping' of screen elements looks a little amateurish. Does anyone have ideas about how to stop this behaviour ?
The code for the UI element is ...
fluidRow(
column(5,
checkboxGroupInput("sampleTypes",
"Applicable Sample Type(s)", c("Blood","Serum","Plasma","Fluid","Tissue","Urine","Faeces","Swab", "Other"), selected = "Blood", width = '800px', inline = T)),
conditionalPanel(condition = "input.sampleTypes.includes('Other')",
textInput("otherSample",'',
placeholder = "Other Sample", width = "150px"), style = "display:inline-block;")
),
I have a button in my ui.R that I want to be shown only when "Summary" tab is selected, so I thought of this code
fluidRow(
column(4,
column(12,id="sub",
actionButton("submit", "SUBMIT", width = "100%"))),
column(8,
bsCollapse(id = "collapse7", open = "Results",
bsCollapsePanel("Results",
tabsetPanel(
tabPanel("Summary",
tags$script(HTML("document.getElementById('sub').style.visibility = 'visible';")))
tabPanel("Plot",
tags$script(HTML("document.getElementById('sub').style.visibility = 'hidden';"))))
))))
The problem is, the button is hidden even though in my first tab it should be visible and also when i go to Plots and back to Summary, the button stays hidden.
After looking at: How to use tabPanel as input in R Shiny?
I decided to play with observeEvent and the input$tabset option. The result is 100% working and it's really simple. Here's the code:
observeEvent(input$choices, {
choice = input$choices
if(choice == "Summary")
{
runjs(
"document.getElementById('submit').style.visibility = 'visible';"
)
}
else
{
runjs(
"document.getElementById('submit').style.visibility = 'hidden';"
)
}
})
Also, I found out why my previous code wasn't working, it was due to the fact that when the UI was initialized, the button element kept the last style modification (the hidden one) and it didn't change depending on the tab I have selected, since its not reactive.