Tab Panel height - Style

Posted by: cpozen on 10 September 2017, 11:44 am EST

  • Posted 10 September 2017, 11:44 am EST

    I have a series of tabs that display the months of the year but would like to minimize the bottom padding to nothing if possible. I have attached a photo that displays the area I would like to remove.

    Based on some examples that I have seen, I have added this style to my page, however it doesn't appear to eliminate the area completley. Can someone help with suggestions ?



  • Replied 10 September 2017, 11:44 am EST

    Hello,

    You may use the following css for same:

    [css]
    .ui-tabs .ui-tabs-nav li a
    {
    padding-bottom: 0px !important;
    }
    [/css]

    Regards
    Ashish
  • Replied 10 September 2017, 11:44 am EST

    That seemed to make it a lot worse. To note, the controls are inside a table .
  • Replied 10 September 2017, 11:44 am EST

    Hello,

    I tried the same and it works fine at my end. Could you kindly check the attached sample and let me know your observations. If it works properly then modify it so that it replicates your issue and I can assist you further.

    Regards
    Ashish
    2012/02/C1WijTabs_Padding.zip
  • Replied 10 September 2017, 11:44 am EST

    Still didn't work for me.

    Here is my code. I am creating the tabs dynamically if that matters.






















    Year:
    Department:

    onselectedchanged="C1tabsYear_SelectedChanged">



    onselectedchanged="c1tabsDepart_SelectedChanged">




    This produces the screenshot below.
    2012/02/Tabs2.gif
  • Replied 10 September 2017, 11:44 am EST

    I also noticed that you are using controls.4 (.net 4) and I am using controls.3 (.net 3.5) Can you test in 3.5 ?
  • Replied 10 September 2017, 11:44 am EST

    Hello,

    You may set LineHeight of .ui-helper-reset class as well to remove all the padding at the bottom:

    [css]

    [/css]

    Here is the output using the above css.

    Regards
    Ashish

  • Replied 10 September 2017, 11:44 am EST

    I hate to be a stickler but that still appears to me that there is a bunch of grey space between the tabs and the "label". That is what I'm trying to get rid of.
  • Replied 10 September 2017, 11:44 am EST

    Hello,

    The grey space is for the content of tabs but I think, you want to use C1Tabs as tabstrip i.e with no content. So, in order to remove the grey space, you may set the Height property of the C1Tabs accordingly. Here is the code for same:


    C1Tabs1.Height = Unit.Pixel(26);


    and the output was as attached.

    Regards
    Ashish

  • Replied 10 September 2017, 11:44 am EST

    PERFECT !!!!
    Thank you !
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels