Change text to icon - responsive

[Ezequiel]

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

 

 

[Neli]

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