This is a migrated thread and some comments may be shown as answers.

ListView Detail Button too small to click?

3 Answers 162 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Joon
Top achievements
Rank 1
Joon asked on 18 Aug 2012, 04:58 AM
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>

3 Answers, 1 is accepted

Sort by
0
Accepted
Kamen Bundev
Telerik team
answered on 20 Aug 2012, 07:58 AM
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!
0
Joon
Top achievements
Rank 1
answered on 20 Aug 2012, 08:20 AM
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
0
Kamen Bundev
Telerik team
answered on 20 Aug 2012, 11:21 AM
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!
Tags
ListView (Mobile)
Asked by
Joon
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Joon
Top achievements
Rank 1
Share this question
or