How to center k-icon?

8 posts, 2 answers
  1. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 19 Jun 2018 Link to this post

    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

     

     

     

     

     

     

     

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1778 posts

    Posted 21 Jun 2018 Link to this post

    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.
  3. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 21 Jun 2018 in reply to Ivan Danchev Link to this post

    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

  4. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 23 Jun 2018 in reply to Tayger Link to this post

    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

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1778 posts

    Posted 25 Jun 2018 Link to this post

    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.
  6. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 25 Jun 2018 in reply to Ivan Danchev Link to this post

    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

  7. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1778 posts

    Posted 27 Jun 2018 Link to this post

    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.
  8. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 27 Jun 2018 in reply to Ivan Danchev Link to this post

    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.
Back to Top