How to center k-icon?

[Tayger]

Hello

After going through the Web Font Icons documentation I wanted to add an icon with no text to a mobile button:

CSS:

.km-search:after, .km-search:before {
    content: "\e0e9";
    font-size: 32px;
}

(considering proportions of 16 -> 32 -> 64, etc. as mentioned in documentation)

HTML:

<div id="searchmapheader" data-role="header">
    <a id="foo" data-role="button" data-icon="search"></a>
</div>

 

The icon looks like the attachment (see screenshot1.png) : The icon is out of the defined button

On setting a width like 80px for the <a> tag looks like screenshot2.png : The icon is not centered at all

So I tried to center any text inside the <a> tag: text-align: center; -> will be ignored, so it looks still like screenshot2.png

 

Now I wonder how I can center the k-icon inside the mobile button?

Regards

 

 

 

 

 

 

 

[Ivan Danchev]

Hello,

If your button's width is 80px you can apply the following CSS rule in order to display the magnifying glass icon in the center of the button:

#foo .km-search {
  margin-left: -15px;
}

Regards,
Ivan Danchev
Progress Telerik

[Tayger]

Thanks, that works. I assume there is a problem not using text, just the k-icon. I used a space &nbsp; in between, worked well.

I just have another question and I don't know where to post it because I don't know which widget could do that job:

I have a header (layout) with some buttons on it. On pressing one of those should make a view or a DIV with text in it make scroll down behind the header till to the bottom (and back). Something like the Drawer widget but that one supports left/right only. 
I'm not asking for a complete sample just the hint which widget or function could do the job (if there is one).

Regards

[Tayger]

In between I have found the solution to show up a information in a separate "view", well its a DIV but works really nice. JQuery was the answer. Just in case someone else needs it too: Slider

Regards

[Ivan Danchev]

Hi Tayger,

Similar behavior can be achieved with the PanelBar widget, here's an example.

Regards,
Ivan Danchev
Progress Telerik

[Tayger]

Thanks! I'm confused about the "PanelBar" since I couldn't find it in the widget list: https://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/actionsheet

Are there some more widgets not listed? 

Sadly it lacks the same problem as jQuery's slider, thats because I can't use it too: All the content it overlaps on opening will be moved away as you can see using the PanelBar widget by the text "Other page content..." instead of moving over it. Furthermore I need to have it hidden (opened by another action not by itself) and to come out behind the footer and moving up, not down. Thats why I had to create an own solution. 

I like working with KendoUI Mobile even though it does not offer the amount of widgets and flexibility of KendoUI. Okay, it's for mobiles, those in general have to work in a simpler way. So I don't expect a solution for every "problem" I have. 

Regards

[Ivan Danchev]

Hi Tayger,

The PanelBar is not a mobile widget, so instead in mobile/ui you can find it in the ui section of the API documentation. And indeed the PanelBar's behavior differs from the requirements you described. I am glad you have found a solution that fulfills them.

Regards,
Ivan Danchev
Progress Telerik

[Tayger]

Ah ok, got it, tnx! I thought I couldn't access any UI elements or widgets of KendoUI itself, just the KendoUI Mobile since I didn' have included in my script.