This is a migrated thread and some comments may be shown as answers.

Panelbar Child Row Size

5 Answers 87 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Casey
Top achievements
Rank 1
Casey asked on 10 Aug 2012, 05:59 PM
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

5 Answers, 1 is accepted

Sort by
0
John DeVight
Top achievements
Rank 1
answered on 10 Aug 2012, 09:37 PM
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
0
Casey
Top achievements
Rank 1
answered on 10 Aug 2012, 09:58 PM
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
0
John DeVight
Top achievements
Rank 1
answered on 13 Aug 2012, 01:29 PM
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
0
Casey
Top achievements
Rank 1
answered on 13 Aug 2012, 01:43 PM
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
0
John DeVight
Top achievements
Rank 1
answered on 13 Aug 2012, 01:57 PM
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
Tags
PanelBar
Asked by
Casey
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
Casey
Top achievements
Rank 1
Share this question
or