Блестящая титульная панель: как разместить заголовок и изображение на одной высоте?

Мне нужны заголовок и изображение в моей титульной панели, но заголовок слева и изображение справа. Я получил их обоих на панели, используя этот код:

ui <- fluidPage(
   titlePanel(div("Fenologische modellen", 
                   img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
   ),

Но тогда они просто рядом друг с другом. Поскольку выравнивание не сработало для изображения (или "style = ...", тоже попробовал), я решил поместить их в разные столбцы, для чего требуется сначала FlureRow.

ui <- fluidPage(
  titlePanel( 
    fluidRow( 
      column(4, "Fenologische modellen"),
      column(4, offset = 8, img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
    )
  ),

Что происходит, так это то, что изображение действительно размещено справа, но оно расположено внизу справа, а мне нужно, чтобы оно было на одной строке с заголовком.

Я пытался отрегулировать высоту столбцов в пикселях, но при определенной высоте он больше не менялся. На картинке выше показан предел.

Какие-либо предложения?

PS: я не хочу группировать их обоих в wellpanel, если я не могу сделать его полностью белым и, следовательно, невидимым.

2 ответа

Решение

Так что я понял это сам, пытаясь решить ту же проблему в wellPanel. Плохой парень offset аргумент в column(), Если я удалю его, изображение и заголовок будут выровнены по горизонтали.

Чтобы поместить изображение справа, я просто должен сделать левый столбец очень широким:

titlePanel(
  fluidRow(
    column(9, "Fenologische modellen"), 
    column(3, img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
  )
),

Как насчет:

titlePanel(div("Fenologische modellen", 
                img(height = 105, width = 300, 
                    src = "logo_pcfruit.jpg", 
                    class = "pull-right")))

pull-right class - это класс Bootstrap, который, кажется, делает то, что вы хотите.

Согласно документации column в offset аргумент

"Количество столбцов для смещения этого столбца от конца предыдущего столбца".

Ваш первый столбец занимает 4 единицы из 12. Затем столбец добавляется на 8 единиц помимо конца последнего столбца, что означает, что вы начинаете новый столбец после 4+8 = 12 единиц из 12. Поскольку 4 единицы + 4 смещения + 4 единицы = 12 единиц, правильное использование offset аргумент был бы

ui <- fluidPage(
  titlePanel( 
    fluidRow( 
      column(4, "Fenologische modellen"),
      column(4, offset = 4, img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
    )
  )
Другие вопросы по тегам