Panelbar Child Row Size

6 posts, 0 answers
  1. Casey
    Casey avatar
    15 posts
    Member since:
    Jan 2012

    Posted 10 Aug 2012 Link to this post

    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
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 10 Aug 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Casey
    Casey avatar
    15 posts
    Member since:
    Jan 2012

    Posted 10 Aug 2012 Link to this post

    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
  5. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 13 Aug 2012 Link to this post

    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
  6. Casey
    Casey avatar
    15 posts
    Member since:
    Jan 2012

    Posted 13 Aug 2012 Link to this post

    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
  7. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 13 Aug 2012 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready