Themeable button query

[alan_sh]

I'm using a Themeable button with an icon to link to another page - because it looks nice.

However, when I reduce the page width, there is a point at which the icon starts to overwrite the text (name of the button). Is there any way round this? If not, can I request a feature where the icon disappears below a certain width?

Cheers

Alan

[Pablo]

I am not aware of any issues with the Themeable button.
But if you think you have found a problem, then please share a demo project so I can see all your settings.

[alan_sh]

I've sent you an email as it's WB17

[alan_sh]

I fixed it by changing the underlying layer grid from 2-8-2 to 3-6-3. The buttons were in the two outer parts and it looks like they didn't have enough room to adjust properly.

[alan_sh]

Pablo, is this a bug or intended behaviour? If the layout grid is 3-6-3 with the buttons in the outside grids, it works OK when I reduce the size. If I change it to 2-8-2, then as I reduce it, the icon starts to overlay the text in each button.

Alan

[Pablo]

This is not a bug. This is standard HTML behavior.
What else did you expect to happen?

[alan_sh]

I expect that the behaviour of the button (text and icon) to be the same as the window gets reduced in width, no matter what the underlying grid size is.

Alan

[Pablo]

The grid size determines the size of the button in percentages, the browser controls the size of the element relative to the size on the browset window.
Note that I did not implement this logic. This functionality is implemented in the browser.
If you use flexbox than the logic is slightly different. Flexbox uses different calculations to determine the size based on the of element and content.

If you think there is a problem in WWB then please try to be more specific. Because unless I misunderstood you, for me this behavior is logical.

[alan_sh]

I don't know where the problem lies. I will do more experimentation.

This is not a big issue. I have fixed it for my new site.

Thanks for listening

Alan

[Base12]

I'm using a Themeable button with an icon to link to another page - because it looks nice.

However, when I reduce the page width, there is a point at which the icon starts to overwrite the text (name of the button). Is there any way round this? If not, can I request a feature where the icon disappears below a certain width?

Cheers

Alan

I just ran into this issue and came here to see if there was a solution.

I ended up adding extra padding in the button to compensate...





Note that the icon is set to 'left' as opposed to 'inline left' in the settings.

Maybe the 'Icon Offset' should have both left and right settings?

[wwonderfull]

The icon can be set both on left and right-side using icon position settings and offset is calculated based on that and you can even use negative values to move it more right or more left if needed.