Kendo menu text center align and bold

4 posts, 0 answers
  1. Anamika
    Anamika avatar
    150 posts
    Member since:
    Mar 2014

    Posted 28 Sep Link to this post

    Hello,

     

    My Kendo menu has 3 items. First is an Icon , second is a text "Adress suchen" and third is another Icon with Sub menuitems. Using following Stylesheet i could achieve partially but i cannot Center align the text of manu. Also the left side Icon is outside the menu width.

    @(Html.Kendo().Menu()
    .Name("menuImages")
    .Items(items =>
    {

    items.Add().Text("<span class=\"k-icon k-i-menu\"></span> ").HtmlAttributes(new { id = "mnuMain" }).SpriteCssClasses("k-icon k-i-menu").Encoded(false)
    .Items(children =>
    {
    .....
    children.Add().Text("Alle Objekte Anzeigen");
    });            
    items.Add().Text("Adressen suchen").HtmlAttributes(new { id = "mnuTitle" }).ContentHtmlAttributes(new { @style = "text-align:middle;" });
    items.Add().Text("<span class=\"k-icon k-i-grid\"></span> ").HtmlAttributes(new { id = "mnuHome" }).SpriteCssClasses("k-icon k-i-grid").Encoded(false);


    })

    My css is

    ul.k-widget.k-menu-horizontal > .k-item
    {
    float: right;
    }
    #menuImages > .k-last {
    float: left;
    width:40px;
    }

    So i want both Icon items left and right aligned and middle one text Center aligned

    Thanks

     

    Anamika

  2. Neli
    Admin
    Neli avatar
    28 posts

    Posted 28 Sep Link to this post

    Hi Anamika,

    As far as I understand, what is needed is to have the items with icons at the very left and right end of the Menu and the middle item that has text has to be centered, as it is on the attached picture. 

    If this is the desired appearance it could be achieved by setting the third element to be 'float:right' using its id.
    The text of the second item could be aligned by; 
    text-align: center;

    In the attached sample project you could find the Menu styled in the way described above. 

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Anamika
    Anamika avatar
    150 posts
    Member since:
    Mar 2014

    Posted 28 Sep in reply to Neli Link to this post

    Thank you for the post. Without Setting a width for middle menu text-align do not work and Setting a % width does not work quite well in many phone Screen widths. the menu wraps to second line as shown in my screenshot. Can we have a universal solution where the menu item do not wrap .
  4. Neli
    Admin
    Neli avatar
    28 posts

    Posted 28 Sep Link to this post

    Hello Anamika,

    To achieve the desired appearance where the Menu will not wrap on the phone screen the css could be applied as follows:

    - The width of the left and the right child elements could be calculated in the padding set on the parent element 
    #menuImages { 
            padding: 0 calc(2.4em + 36px) 0 calc(2.4em + 16px);
            position: relative;
    }

    For both child elements an absolute position is set:
    #mnuMain {
            position: absolute;
            left: 0;
    }
     
    #mnuHome {
         position: absolute;
         right: 0px;
    }

    In order to manage to stretch the middle element according to its parent width  the 'width: 100%' is still applied.

    I am sending attached the modified project.


    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top