0

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 ...

enter image description here

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).

enter image description here

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;")
    ),
Peter
  • 118
  • 9
  • 2
    I think this [post](https://stackoverflow.com/questions/25340847/control-the-height-in-fluidrow-in-r-shiny) has the answers you are looking for. A more wacky solution might be using [shinyjs](https://deanattali.com/2015/04/23/shinyjs-r-package/) instead of `conditionalPanel` - althought I'm not sure how well this idea will work. – user5029763 Jan 16 '20 at 02:54
  • 1
    Wow !! thanks so much for that - I was able to change my code to include `code style = "display:inline-block;height:60px"` and it worked perfectly :-) – Peter Jan 16 '20 at 03:53

0 Answers0