Home/ Questions/Q 8622185
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T06:59:22+00:00

So it’s detailed here on how to remove the padding on buttons by overriding

  • 0

So it’s detailed here on how to remove the padding on buttons by overriding the class on the page: Can the button padding be adjusted in Jquery Mobile?

But how do I take this:

.ui-btn-inner {
padding: 0;}

And selectively apply it to one button, ie:

<button data-icon="false" onclick="alert('clicked me')">Button Name</button>

Doing anything like this doesn’t work:

<button style="padding:0" data-icon="false" onclick="alert('clicked me')">Button Name</button>

Thoughts? Creative solutions?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think I have finally found a solution (been trying to figure it out for a while now)!

    Use the ‘cascading’ part of CSS to help you. If your button uses theme ‘a’ for instance, you can apply the padding rules of .ui-btn-inner to only buttons with theme ‘a’. Just prefix the class you are trying to change, with the themed property.

    HTML:
    <a href"#/mypath" data-role="button" data-theme="a">Touch Me</a>

    CSS:
    .ui-btn-up-a .ui-btn-inner,
    .ui-btn-hover-a .ui-btn-inner,
    .ui-btn-down-a .ui-btn-inner
    {
    padding: 0px;
    }

    As you can see, this means you have to create the rule for each state of the button, otherwise the padding will return for the split second when you touch the button.

    Just apply a different theme (such as ‘b’) to the buttons that should keep their padding. You can go totally nuts with buttons using this type of CSS inheritance.

    You can have an unlimited number of themes. I go to theme roller and create a default theme for every letter of the alphabet. Then, just override them with CSS to my heart’s content.

    This was a big sticking point when I was trying to use jQuery Mobile for a work project. They already had a UI design and I was tasked with making jQuery Mobile match it exactly.

    • 0