2017-11-28 14 views
1

두 개의 수평 패널을 사용하여 반짝이는 레이아웃을 코딩하려고합니다. 오른쪽 패널 하나는 오른쪽에 있지만 오른쪽 패널에는 2 개가 있어야합니다 수직 잘 패널 자체.반짝이는 두 개의 나란한 웰 판넬의 아래쪽 정렬

하단에 정렬 할 수 없습니다. 그게 가능하니? 내 단순화 된 앱. 둘 다 넣으려고 물방울을 추가하려했지만 아무 것도 바뀌지 않았습니다.

ui <- tagList(navbarPage(id="navbar", title="title", 
          tabPanel(title="Home", 
            titlePanel(title="Welcome"), 
            column(6, 
              wellPanel(
               h2("Hello World"), 
               br(), 
               h4("some text"))), 
            column(6, 
              fluidRow(
               wellPanel(
                h2("News"), 
                br(), 
                h4("Some other text"), 
                br(), 
                fluidRow(column(6, 
                    h5("Some info:")), 
                  column(6, 
                    div(actionButton("button", "button"), style="float:right") 
                  )))), 
              fluidRow(
               wellPanel(div(img(src="https://cran.r-project.org/Rlogo.svg", width=100), style="text-align: center;") 
               )))), 
          tabPanel(title="anothertabl", value="anothertabl")) 
) 
server=function(input, output, session){} 
shinyApp(ui, server) 

그것은 모두 wellPanels가 자동으로 가장 긴 하나 enter image description here

답변

1

이 정말 간단하지가 않습니다에 적응하여, 다음과 같이한다.

나는 postion:relative 동굴 주위에 row을 추가했습니다. 그 다음 첫 번째 짧은 열 position:absolute을 만들고 전체 높이를 top:0;bottom:0;left:0;으로 확장하도록 설정했습니다. 첫 번째 열의 위치가 absolute이므로 두 번째 열에 offset = 6을 추가해야합니다. 그렇지 않으면 두 열이 서로 위에 배치됩니다.

library(shiny) 
ui <- tagList(navbarPage(id="navbar", title="title", 
          tabPanel(title="Home", 
            titlePanel(title="Welcome"), 
            fluidRow(
            style = "position:relative", 
            column(6, 
              style = "position:absolute;top:0;bottom:0;left:0;padding-bottom:19px", 
              wellPanel(
               style = "height:100%;", 
               h2("Hello World"), 
               br(), 
               h4("some text"))), 
            column(6, 
              fluidRow(
               wellPanel(
               h2("News"), 
               br(), 
               h4("Some other text"), 
               br(), 
               fluidRow(column(6, 
                   h5("Some info:")), 
                 column(6, 
                   div(actionButton("button", "button"), style="float:right") 
                 )))), 
              fluidRow(
               wellPanel(div(img(src="https://cran.r-project.org/Rlogo.svg", width=100), style="text-align: center;") 
              )), 
              offset = 6) 

            ) 
            ), 
          tabPanel(title="anothertabl", value="anothertabl")) 
) 
server=function(input, output, session){} 
shinyApp(ui, server) 

희망이 도움이 되셨습니다.

+0

안녕하세요 Bertil, 제 질문 중 하나에 다시 답해 주셔서 감사합니다. :-) 귀하의 솔루션은 실제로 내 단순화 된 코드와 함께 작동하지만 내 애플 리케이션과 함께 어떤 이유로 실패합니다. 내가 그것을 단순화 한 것 같아. 문제는 내 이미지와 슬라이더 때문에 창의 크기를 변경할 때 가장 길어진 패널을 반전시킬 수 있다는 것입니다 (때로는 오른쪽, 왼쪽과 같이). 복잡한.. – agenis