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

Kendo menu text center align and bold

3 Answers 248 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Anamika
Top achievements
Rank 1
Anamika asked on 28 Sep 2017, 09:23 AM

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

3 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 28 Sep 2017, 11:05 AM
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.
0
Anamika
Top achievements
Rank 1
answered on 28 Sep 2017, 12:37 PM
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 .
0
Neli
Telerik team
answered on 28 Sep 2017, 04:14 PM
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.
Tags
Menu
Asked by
Anamika
Top achievements
Rank 1
Answers by
Neli
Telerik team
Anamika
Top achievements
Rank 1
Share this question
or