After going through the Web Font Icons documentation I wanted to add an icon with no text to a mobile button:
(considering proportions of 16 -> 32 -> 64, etc. as mentioned in documentation)
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?
7 Answers, 1 is accepted
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:
Thanks, that works. I assume there is a problem not using text, just the k-icon. I used a space 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).
Similar behavior can be achieved with the PanelBar widget, here's an example.
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.
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.