We just upgraded to Keno UI version 2014.1.415. Afterwards we noticed that on some devices where we have a button with data-icon="more" it was displaying with 3 vertical dots instead of the expected 3 horizontal dots. After digging into the Kendo supplied CSS, we found that .km-more is defined multiple times. The first time it is defined with content of \e0e0, which is the 3 horizontal dots. Later it is defined with content of \e0e1, which is the 3 vertical dots. Obviously the later definition wins and overrides the previous definition.
I'm wondering if this was intended or an oversight?
We have worked around the issue by creating a CSS that is loaded after all Kendo CSS so that .km-more is yet again defined with the desired content value.
I'm wondering if this was intended or an oversight?
We have worked around the issue by creating a CSS that is loaded after all Kendo CSS so that .km-more is yet again defined with the desired content value.
2 Answers, 1 is accepted
0
Hello David,
Indeed, .km-more is defined multiple times, but this is due to the different native icons in the different platforms - iOS has a horizontal one and Android - vertical. As you can see below, the vertical dots shouldn't be shown, unless you're running on an Android device or if you've forced Android platform theme:
.km-more:after,
.km-more:before
{
content: "\e0e0";
}
.km-android .km-more:after,
.km-android .km-more:before
{
content: "\e0e1";
}
.km-meego .km-more:after,
.km-meego .km-more:before
{
content: "\e0f1";
}
.km-ios7 .km-more:after
{
content: "\e215";
}
On a side note - these rules didn't change since Kendo UI Mobile introduced the integrated icons. Which version did you upgrade from?
Regards,
Kamen Bundev
Telerik
Indeed, .km-more is defined multiple times, but this is due to the different native icons in the different platforms - iOS has a horizontal one and Android - vertical. As you can see below, the vertical dots shouldn't be shown, unless you're running on an Android device or if you've forced Android platform theme:
.km-more:after,
.km-more:before
{
content: "\e0e0";
}
.km-android .km-more:after,
.km-android .km-more:before
{
content: "\e0e1";
}
.km-meego .km-more:after,
.km-meego .km-more:before
{
content: "\e0f1";
}
.km-ios7 .km-more:after
{
content: "\e215";
}
On a side note - these rules didn't change since Kendo UI Mobile introduced the integrated icons. Which version did you upgrade from?
Regards,
Kamen Bundev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David
Top achievements
Rank 1
Rank 1
answered on 14 May 2014, 08:56 PM
Interesting. I don't think I've noticed an Android app that used a vertically aligned icon for "more". I'm not saying that isn't the standard, but just that I haven't seen that personally.
We were previously using v2013.2.918.340, which to everyone's best recollection (here) was using a horizontal icon. I could roll back the code in source control to verify, but honestly it isn't *that* important.
For anyone who might not want the vertical icon, we simply created and a CSS file to override with the following in it. This should override it to be horizontal regardless of the device type.
.km-more:after,.km-more:before{ content: "\e0e0" !important;}
We were previously using v2013.2.918.340, which to everyone's best recollection (here) was using a horizontal icon. I could roll back the code in source control to verify, but honestly it isn't *that* important.
For anyone who might not want the vertical icon, we simply created and a CSS file to override with the following in it. This should override it to be horizontal regardless of the device type.
.km-more:after,.km-more:before{ content: "\e0e0" !important;}