Mobile Collapsible breaks header icons

12 posts, 1 answers
  1. Dan
    Dan avatar
    7 posts
    Member since:
    Jul 2012

    Posted 02 Feb 2016 Link to this post

    Sample: http://dojo.telerik.com/OCURa

     

    I'm trying to use a mobile Collapsible widget with icons in the header, but toggling the collapsed state will break those icons marked with the km-icon class. Icons in the body are unaffected.

     
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 03 Feb 2016 Link to this post

    Hi Dan,

    You should set the icons through the configuration options:


    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Dan
    Dan avatar
    7 posts
    Member since:
    Jul 2012

    Posted 03 Feb 2016 in reply to Alexander Valchev Link to this post

    Alexander,

    Thank you for the reply and the information. That's great to know, but not quite what I was looking to do. Sorry, my example was perhaps too simplistic. We use multiple icons in the header, not just the ones for the collapse/expand icons, to indicate various quick-glance statuses. An updated sample is here: http://dojo.telerik.com/OCURa/2

    Thanks,

    Dan

     
  4. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 05 Feb 2016 Link to this post

    Hello Dan,

    This will not work if you are using Kendo icons or generally elements with km-icon class because the current implementation manipulates the elements with km-icon class that are located in the widget's header.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Dan
    Dan avatar
    7 posts
    Member since:
    Jul 2012

    Posted 05 Feb 2016 in reply to Alexander Valchev Link to this post

    Okay, that's what I figured. Can I suggest that the mobile widget be updated to support this functionality in a future release? Thanks again for the help.
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 08 Feb 2016 Link to this post

    Hi Dan,

    We will log this as an enhancement.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Marco
    Marco avatar
    43 posts
    Member since:
    Jan 2014

    Posted 4 days ago in reply to Alexander Valchev Link to this post

    Hi Alexander,

    Is it possible to add an icon to the header almost 4 years later? I can't find any documentation how to get this done.

    Kind Regards,

    Marco

     

  8. Missing user
    Missing user avatar

    Posted 2 days and 6 hours ago Link to this post

    Hi Marco,

    I am stepping in for my colleague Alexander, who is currently out of the office.

    You can check the icons that you can use in the following demo:

    https://demos.telerik.com/kendo-ui/m/index#mobile-styling/icons

    The icons are added with the following HTML:

    <i class="km-icon km-icon-name"></i>

    I hope this would be helpful.

     

    Regards,
    Teya
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Missing user
    Missing user avatar

    Posted 2 days and 6 hours ago Link to this post

    Hello Marco,

    In my previous reply I forgot to share with you the following article from our documentation which goes into more details regarding the mobile icons:

    https://docs.telerik.com/kendo-ui/controls/hybrid/styles/icons#list-of-additional-hybrid-font-icons

    Regards,
    Teya
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  10. Marco
    Marco avatar
    43 posts
    Member since:
    Jan 2014

    Posted 2 days and 6 hours ago Link to this post

    Hello Teay,

    I'm aware of the documentation. The problem with the collapsible is, that if you want to display an icon in front of the header text, you MUST use the collapse and expand icon properties. If i use your approach, something weird happens. When I expand the collapsible, i get the same icon that I have specified under data-icon-expand property twice. See attachment.

     

    My html:

    <div id="afsprakenCollapsible" data-role="collapsible" data-inset="true" data-expand-icon="kalender mijnVrumunCollapsibleIconHeaderAfsprakenExpand" data-collapse-icon="kalender mijnVrumunCollapsibleIconHeaderAfsprakenCollapse">
             <h3>
                 <i class="km-icon km-icon-camera"></i>
                 Afspraken
             </h3>
             <ul id="afsprakenListView" data-role="listview"></ul>
         </div>

     

     

     

     

     

  11. Missing user
    Missing user avatar

    Posted 2 days and 1 hour ago Link to this post

    Hi Marco,

    Excuse me for the misunderstanding. As far as I understand, you would like to replace the default arrow icon of the collapsible element with a different one. Is this correct? If you want to change the toggle down and up icons, you can set it with the attributes as you have stated in your reply: 

    data-expand-icon="camera" data-collapse-icon="camera"
    

    Without having to add the icon's HTML inside the container as well. I have updated the Dojo you have sent me with an implementation of the example:

    http://dojo.telerik.com/IQAlaJAr

    However, if you would like to add other icons as well, I am afraid this is currently not possible, as all of the icons within the collapsible container are being replaced with the icons specified in the expand and collapse attributes.

    Regards,


    Teya
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  12. Marco
    Marco avatar
    43 posts
    Member since:
    Jan 2014

    Posted 2 days and 1 hour ago in reply to Missing user Link to this post

    Hi Teya,

    Thanks for the effort. I indeed already replaced the toggle up and down arrows with other icons. It's the only decent way to get an icon before the heading tag of the collapsible control.

    Kind Regards,

    Marco

Back to Top