This is a migrated thread and some comments may be shown as answers.
How to center k-icon?
7 Answers 65 Views
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Tayger asked on 19 Jun 2018, 07:29 PM

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

 

 

 

 

 

 

 

7 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 21 Jun 2018, 08:11 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tayger
Top achievements
Rank 1
answered on 22 Jun 2018, 12:01 AM

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

0
Tayger
Top achievements
Rank 1
answered on 23 Jun 2018, 10:17 AM

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

0
Ivan Danchev
Telerik team
answered on 25 Jun 2018, 02:24 PM
Hi Tayger,

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

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tayger
Top achievements
Rank 1
answered on 25 Jun 2018, 05:20 PM

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

0
Accepted
Ivan Danchev
Telerik team
answered on 27 Jun 2018, 01:11 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tayger
Top achievements
Rank 1
answered on 27 Jun 2018, 01:49 PM
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.
Asked by
Tayger
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Tayger
Top achievements
Rank 1
Share this question
or