+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Sitefinity Navigation Box-Sizing

Sitefinity Navigation Box-Sizing

7 posts, 0 answered
  1. Chad
    Chad avatar
    7 posts
    Registered:
    29 Sep 2011
    15 Feb 2012
    Link to this post
    In Sitefinity if you use this css rule,
    /* apply a natural box layout model to all elements */
    * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    With a Horizontal navigation control, set to use drop downs on mouseover, each time you mouseover one of the items, the width of the drop down background shrinks by a few pixels. It will continue to do this until the width is only ~10px wide. Any idea what is causing this?
  2. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    17 Feb 2012
    Link to this post
    Hi Chad,

    By default the box-sizing property is set to content-box. By changing it to border-box you actually set fixed width to the list elements. Which means that if you add paddings to the elements, they  won't widen the list element (which is what happens when box-sizing is set to content-box), but will be subtracted from the width that is set to the element, and this way the actual content width will be decreased. Here is some additional information about the box-sizing property.

    Regards,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Chad
    Chad avatar
    7 posts
    Registered:
    29 Sep 2011
    17 Feb 2012
    Link to this post
    Hi Jen,

    Thanks for you quick response. I realize that setting the box-sizing property to border-box causes padding to be subtracted from the width, that isn't a problem. The problem is when the Sitefinity Navigation control is set to use this style, the drop down menus continuously shrink each time you mouse over the heading to make them show up. I will attach two screen shots, one the first time I mouse over the control, and the second after I have caused it to open a few times. Notice how the background has shrunk way down in the second one.
  4. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    21 Feb 2012
    Link to this post
    Hi Chad,

    I suppose this happens, because you're using the universal selector (*). It sets the styles to all elements, including  the ones in our page editor, which control the look of the navigation. You probably have a  page wrapper (a div that wraps the whole page). A far better approach would be to declare your box-sizing property to the elements inside the wrapper. This way you'll make sure that styles will get applied to the front-end only and won't affect Sitefinity page editor's styles. Something similar to a css reset should do the job:
    #wrapper body, #wrapper div, #wrapper span,
    #wrapper h1, #wrapper h2, #wrapper h3, #wrapper h4, #wrapper h5, #wrapper h6, #wrapper p, #wrapper pre, #wrapper a, #wrapper dl, #wrapper dt, #wrapper dd, #wrapper ol, #wrapper ul, #wrapper li, #wrapper tr, #wrapper th, #wrapper td...
    {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }


    Regards,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    26 Mar 2012
    Link to this post
    Hi Jen,
    I am using the standard Menu Strip that comes with Sitefinity. I am on Sitefinity 5.0. All I want to change on it is the font and the height of it. I am editing it in the Advanced mode, but it does not seem to pick it up. For example, I have added 'Red' to the BackColor as a test, and it does not pick it up. Are those fields working at all? What would be the best way for me to chnage the font, and height of it without the need for templates and all the rest?
    Many thanks,
    Andrei
  6. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    26 Mar 2012
    Link to this post
    Hi Jen,
    I am using the standard Menu Strip that comes with Sitefinity. I am on Sitefinity 5.0. All I want to change on it is the font and the height of it. I am editing it in the Advanced mode, but it does not seem to pick it up. For example, I have added 'Red' to the BackColor as a test, and it does not pick it up. Are those fields working at all? What would be the best way for me to chnage the font, and height of it without the need for templates and all the rest?
    Many thanks,
    Andrei
  7. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    29 Mar 2012
    Link to this post
    Hi Andrei,

    The properties you're referring to are actually set to the div that wraps the navigation, not to the navigation items. To change the height and font of the items you can either override the their default font and height, set by the Sitefinity skin, or simply create your own skin and declare these css properties in it. Take a look at this forum post for further reference.

    All the best,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
7 posts, 0 answered