ListView Detail Button too small to click?

4 posts, 1 answers
  1. Joon
    Joon avatar
    30 posts
    Member since:
    Aug 2012

    Posted 17 Aug 2012 Link to this post

    I always feel that the detail buttons (http://demos.kendoui.com/mobile/listview/detailbuttons.html ) are just too small to click on.
    Every time I click on the button on the iPhone, the hit ratio is only 50% for me :p.
    Any solution for this? As I have swipe events attached to the list item, I don't want to make the whole row clickable but just the detail button. I know that I have a workaround such as that I can add buttons (km-button / data-role="button") as well but then what's the use of detail buttons? Perhaps, I might be doing something wrong here or there's easy tweak I can make or something?

    <ul>
    <li>
    <a id="#= ProductID #" href="\\#service_info?id=#= ProductID #" data-role="detailbutton" data-style="detaildisclose"></a>
    </li>
    </ul>
  2. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 20 Aug 2012 Link to this post

    Hello Joon,

    Add this CSS to make them bigger:
    .km-ios .km-detail
    {
        line-height: 1.3rem;
        margin-top: -.8rem;
        width: 1.4rem;
        height: 1.4rem;
    }


    Adjust to your liking.

    Regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Joon
    Joon avatar
    30 posts
    Member since:
    Aug 2012

    Posted 20 Aug 2012 Link to this post

    Thanks Kamen,
    that worked for me perfect! and I learned that I can similarly modify other image buttons the same way.

    While you are not swayed away from this subject, I wanted to ask you another question.
    Is there a way to make the detail button react to the use click?
    The buttons, tab buttons, nav button and list buttons,, all of them darkens or lightens itself to show users instantly know that they click was successful or not but detail button by default doesn't behave like that even though it's a button. as my action is usually a json call or page transition there's a half a second gap before the response comes and the user tends to think they didn't click it property for that split second.
    Was this built in or can I override the appropriate css class to achieve this? If so, could you please give me a guide line?

    Warm regards,

    John Choi
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 20 Aug 2012 Link to this post

    Hello Joon,

    You can use something like what we use lately for the button active state (after Q2). This should cover all colors:
    .km-ios .km-detail:active
    {
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1000px rgba(0,0,0,.2);
        box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1000px rgba(0,0,0,.2);
    }


    Regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready