Panelbar Child Row Size

[Casey]

Does anyone now of a way to increase the row height of child elements in the panelbar?  I have found that increasing the font size does increase the row height but long strings end up wrapping and this is not what I want.  

Thanks,
Casey

[John DeVight]

Hi Casey,

You could wrap the child element text in a span and set the height and display like this:

<li><span style="height:50px;display:inline-block;">Location 1</span></li>

Attached is an example.  Let me know whether that is what you were looking for...

Regards,

John DeVight

[Casey]

Thanks for your suggestion John,
I'm populating my PanelBar with JSON data so to apply styles I'm using: 

$('#PanelBar ul').children('li').css('font-size', '14px').css('height', '40px').css('display', 'inline-block').css('width', '100%');

This does increase the overall row height but the highlight is still at the line height size I believe as it's definitely smaller. This isn't a deal breaker but I think it would look nicer if it was the full height of the row.  Any idea how to fix that?

Thanks,
Casey

[John DeVight]

Hi Casey,

Give this a try:

$("#PanelBar ul").children("li").children("span.k-link").css({ "font-size":"14px", "height":"50px", "width":"100%", "display":"inline-block" })

Regards,

John DeVight

[Casey]

Well John, that caused the highlight and the border I placed on the bottom of each row to extend out to the right of the panelbar. So I separated it from the other css declarations and tried the following:

$('#PanelBar ul').children('li').css('font-size', '14px').css('height', '40px').css('display', 'inline-block').css('width', '100%').css('border-bottom', 'gray solid thin');

$('#PanelBar ul').children('li').children("span.k-link").css('height', '40px');

The highlight now goes down to the border line but it doesn't go all the way up to the top of each "cell" leaving a white band. So, close but no cigar.

Thanks,
Casey

[John DeVight]

Hi Casey,

From the example code that I put together I am not seeing a white band at the top of each cell.  Can you take my example and recreate the problem?

Thanks,

John DeVight