Change text to icon - responsive

2 posts, 0 answers
  1. Ezequiel
    Ezequiel avatar
    40 posts
    Member since:
    Oct 2011

    Posted 15 Jun Link to this post

    I have some buttons with icons and text and some only with text.

    How the best way to make the button have only icon in a responsive layout?

    Is there some settings I can do it or I need to do it in my scripts?

    Thanks

     

     

  2. Neli
    Admin
    Neli avatar
    208 posts

    Posted 19 Jun Link to this post

    Hi Ezequiel,

    In order to hide the text of a button on different screen size, you could use media queries. For example you could wrap the text of the button in a span with specific class. Then in your styles, you could hide the element depending on the screen size.
    <button id="button" type="button"><span class="hideText">Cancel</span></button>

    <style>
    @media screen and (max-width: 800px) {
      .hideText {
        display: none
      }
    }
    </style>

    Here is a Dojo example, where the text of the button is visible or hidden depending on the screen size.

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