Brillant: Comment ajuster la largeur de la tabsetPanel?
Voici mon app intégré dans mon site. Je veux me débarrasser de défilement widget ci-dessous mon appli, c'est à cause de la largeur de la tabsetPanel.
- Je intégrer l'application à l'aide de ce code:
<iframe width="800" height="480" frameborder="0" src="http://spark.rstudio.com/alstated/meanvar/"></iframe>
Application Des Codes:
de l'interface utilisateur.R
library(shiny)
# Define UI for application that plots random distributions
shinyUI(pageWithSidebar(
headerPanel(title = ""),
sidebarPanel(
sliderInput("size",
"Number of Observations",
min = 10,
max = 200,
value = 95),
sliderInput("mu",
"Mean",
min = -100,
max = 100,
value = 0),
sliderInput("sd",
"Standard Deviation",
min = 1,
max = 6,
value = 3),
checkboxInput(inputId = "indiv_obs",
label = "Show individual observations",
value = FALSE),
checkboxInput(inputId = "density",
label = "Show density estimate",
value = FALSE),
conditionalPanel(condition = "input.density == true",
sliderInput(inputId = "bw_adjust",
label = "Bandwidth Adjustment",
min = 0.2,
max = 2,
value = 1,
step = 0.2))
),
mainPanel(
tabsetPanel(
tabPanel("Plot",
plotOutput(
outputId = "histogram",
height = "400px",
width = "400px")),
tabPanel("Summary",
verbatimTextOutput(outputId = "datsummary"))
))
)
)
serveur.R
library(shiny)
# Define server logic required to generate and plot a random distribution
shinyServer(function(input, output) {
data <- reactive(rnorm(
n = input$size,
mean = input$mu,
sd = input$sd
))
output$histogram <- renderPlot({
hist(data(),
probability = TRUE,
xlab = "Data",
ylab = "Density",
main = "Histogram of Random Samples")
if(input$indiv_obs){
rug(data())
}
if(input$density){
dens <- density(data(), adjust = input$bw_adjust)
lines(dens, col = "blue")
}
})
output$datsummary <- renderPrint(summary(data()))
})
Toute aide est grandement appréciée!
Je l'ai juste essayé, et j'ai une barre de défilement à droite de l'application, et non en dessous
OriginalL'auteur Al-Ahmadgaid Asaad | 2013-09-30
Vous devez vous connecter pour publier un commentaire.
Je suppose que maintenant, j'ai inspecter le code html de l'application sur le Brillant Page d'accueil. Et le tabsetPanel est ajustée à l'aide de la
<div>
(Document) de la Division de la balise en html par le réglage de l'optionclass
soitspan1
,span2
,span3
et ainsi de suite. Plus le suffixe de laspan
plus la largeur de la division. Et je viens de l'ajouterdiv()
balise dans mon interface.R code:+1, +1 Très pratique réponse. Merci de poster votre auto solution...
Puis-je suivre sur cette question et se demander comment ajuster hauteur?
Je me rends compte que cette réponse était il y a longtemps. Je l'ai juste essayé et ça ne fonctionne pas pour moi. @ChriiSchee la réponse ci-dessous a bien fonctionné.
OriginalL'auteur Al-Ahmadgaid Asaad
Une autre façon d'ajuster la largeur (et de taille):
ajouter
après tabsetPanel, pas besoin de div() dans ce cas
OriginalL'auteur ChriiSchee
Les exemples ci-dessus ne fonctionne que dans certaines circonstances. J'avais besoin d'un plus de solution générale. La solution ci-dessous peuvent être adaptées à toute situation. Par exemple, votre Brillante application pourrait encore être réactif.
Ma solution
Tout d'abord, créer un div avant le tabsetPanel et de lui donner une classe. Deuxièmement, écrire une pièce de jQuery/javascript afin de trouver l'élément parent de la div. Troisièmement, le changement de la classe de ce parent de l'élément à l'aide de javascript/jQuery. Vous pouvez modifier la classe en ce que vous voulez, par exemple, le col-sm-12, col-sm-11, une autre norme classe de Bootstrap ou vous pouvez ajouter et créer votre propre classe. Quatrièmement, ajouter la coutume jQuery/javascript pour votre Brillante application (assurez-vous que vous enregistrez le .js-dossier dans le dossier www de votre Brillant app).
Voici mon exemple:
Javascript/jQuery (general.js):
Brillant de l'INTERFACE utilisateur
OriginalL'auteur
Une autre façon de régler la largeur de
sidebarPanel
ettabsetPanel
était basée sur la modification de lawidth
propriété de lacol-sm-4
etcol-sm-8
classes CSS, respectivement.À l'aide de
tag$head
ettag$style
, il est possible d'ajouter des CSS directement dans le Brillant de l'INTERFACE utilisateur.Voir https://shiny.rstudio.com/articles/css.html pour plus de détails.
Ce n'est pas une solution élégante, mais elle fonctionne correctement.
Brillant de l'INTERFACE utilisateur
OriginalL'auteur Marco Sandri