2016-10-28 13 views
0

タイトルパネルにはタイトルとイメージの両方が必要ですが、左側のタイトルと右側のイメージです。 私はこのコードを使用したパネルでそれらの両方を得た:シャイニータイトルパネル:タイトルとイメージを同じ高さにする方法?

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

enter image description here

をしかし、その後、彼らはすぐ隣お互いにしています。 イメージでalignが機能しなかったため(または「style = ...」も同様)、fluidRowが最初に必要な異なるカラムに両方を配置することにしました。何が起こる

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

は、画像が実際に右側に配置されますが、私はそれがタイトルと同じ行にする必要がありながら、それは、右下に配置されたということです。

enter image description here

私は、画素の列の高さを調整しようとしたが、一定の高さの下で、それはもう変更されませんでした。上の写真は限界を示しています。

提案がありますか?

PS:私はそれを完全に白くすることができ、それで目に見えないようにしなければ、両者をウェルパネルでグループ化したくありません。

答えて

2

それで、ウェルパネルで同じ問題を解決しようとしているうちに、私はそれを自分で考え出しました。 悪い人は、column()offset引数です。それを取り除くと、イメージとタイトルが水平に整列します。

右の画像を配置するには、私は非常に広い左の列を行う必要があります。

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

enter image description here

1

方法について:

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

pull-rightクラスは、あなたがやりたいように思われるブートストラップ・クラスがあります。

+0

それは、私がそれをしたい場所に正確に画像を移動 今で行いますもはやタイトルパネルを考慮しない。それはタイトルパネルと次のウェルパネルの両方に重なります... – Tingolfin

関連する問題