1

I want to increase size of the <p:panel> height but not width. below code increases both height and width.

<p:panel id="pnlPrev" style="width: 85%; border:1;">

I tried with the below code but its doesnt working

> <p:panel id="pnlPrev" style="height: 85%; border:1;">    
> <p:panel id="pnlPrev" style="height: 85%; width: 85%; border:1;">

both are not working.Please Anyone help me to increase size of panel height

teja
  • 93
  • 2
  • 11

2 Answers2

0

There's a somewhat related post here: p:panel how to change border properties. I can't render the php code so I have made an html example with css. Make sure to add classes and then you have full control of the appearance of the p:panel. Set a width, then set a height that's not based on the width like the min-height I've chosen.

Your grid system will control how wide the box is to make it responsive, so take out my 50% wide declaration when you put your component within that grid system.

.myPanelContent.ui-panel
{
   
   border: 1px solid red;
   padding: 2em;
  width: 50%;
  min-height: 200px;
}
<p class="myPanelContent ui-panel">THING</p>
Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31
  • this will work as external css but due to some restrictions i dont want to use external css. i need to put properties in inline only. – teja Feb 17 '17 at 05:13
  • That's fine, then just inline all the styles on the element: style" border: 1px solid red; padding: 2em; width: 50%; min-height: 200px;" – Nathaniel Flick Feb 18 '17 at 18:21
  • Thanks Flick.finally its working by using padding: 2em; . before i tried with padding: 2px. i dont knw the difference between em and px. however its working now. :) – teja Feb 20 '17 at 10:36
  • Hi Teja great news! Pixels are absolute units and 1em is one unit of your page's base font size. More here: https://www.sitepoint.com/power-em-units-css/ – Nathaniel Flick Feb 21 '17 at 16:32
0

Change it to an inline-block to define the height yourself

<p:panel id="pnlPrev" style="height: 85%; border:1; display: inline-block;">
Digedu
  • 233
  • 1
  • 7
  • This one is also not working :( – teja Feb 17 '17 at 05:21
  • Even when defining a px value for height? – Digedu Feb 17 '17 at 13:37
  • if i gave px value, then entire border conflicted. i mean if i change height attribute with any number with px ,it doesn't change – teja Feb 20 '17 at 10:24
  • finally its working by using padding: 2em;(above comment Nathaniel Flick solution ). before i tried with padding: 2px. i dont know the difference between em and px. however its working now. thanks – teja Feb 20 '17 at 10:36