jQuery Mobile and CSS button

Question

I'm moving some old code to jQuery Mobile and have a CSS three colour button, but it seems to conflict with JQM as the design gets messed up.

I made a jsFiddle and as you can see that the button looks OK without JQM, but if you tick jQuery Mobile 1.3.1 the text is too low (offset?) and I get a strange black blob on the button.

My button background is like background: linear-gradient(to bottom, rgb(255, 255, 255) 33%, rgb(255, 98, 118) 33%, rgb(255, 98, 118) 66%, rgb(121, 178, 203) 66%);

How do I get around this?

Ouadie · Accepted Answer · 2013-08-16 09:45:08Z

1

The shift of the text and the black blob is the div that you put before the div.html-face

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-a">
                <input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;" class="ui-input-text ui-body-a">
            </div>

answered Aug 16, 2013 at 9:45

Ouadie

13.2k4 gold badges54 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

liftarn Over a year ago

Thanks! As I code in GWT and that actually is derived from ToggleButton it will take some work to figure out, but at least now I know where to look.

Community · Accepted Answer · 2017-05-23 12:05:19Z

0

One way to solve it is to not use a GWT button, but instead use a JQM button and then add the CSS styling in a custom theme.

While JQM does not seem to allow manual line breaks in a button there is a workaround described at How do I do a manual line break in an jQuery Mobile button?

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Aug 19, 2013 at 7:28

liftarn

4446 silver badges23 bronze badges

Collectives™ on Stack Overflow

jQuery Mobile and CSS button

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related