New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focused mini text input within grid lacks right border #6795

Closed
saulojg opened this Issue Dec 8, 2013 · 4 comments

Comments

Projects
None yet
4 participants
@saulojg

saulojg commented Dec 8, 2013

Issue description

When using an input text field with attribute data-mini="true" within a 3-column grid, the right (blueish) border isn't quite visible

jQuery Mobile and jQuery core version used

jquery-1.10.2
jquery.mobile-1.4.0-rc.1

Test page

http://jsbin.com/ofuhaw/1045/edit

Steps to reproduce

Either see the test page with FF/Chrome latest or use the following code

Cantidad

Expected outcome

Right border should be visible when input gets focus

Actual outcome

Right border is not visible when input gets focus

Image

Platforms/browsers (including version) and devices tested

Firefox 25.0.1 and Chrome 31.0.1650.63 (latest)

Other relevant information, e.g. using PhoneGap

Nothing else

@ghost ghost assigned jaspermdegroot Jan 14, 2014

@jaspermdegroot jaspermdegroot modified the milestones: 1.4.2, 1.4.1 Feb 8, 2014

@jaspermdegroot jaspermdegroot removed this from the 1.4.2 milestone Feb 27, 2014

ldeluca added a commit to ldeluca/jquery-mobile that referenced this issue Oct 17, 2014

ldeluca added a commit to ldeluca/jquery-mobile that referenced this issue Oct 17, 2014

ldeluca added a commit to ldeluca/jquery-mobile that referenced this issue Oct 28, 2014

@arschmitz arschmitz added this to the 1.4.5 milestone Oct 28, 2014

gabrielschulhof added a commit that referenced this issue Oct 30, 2014

agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 30, 2015

Member

Mini size isn't relevant. This also happens with fullsize inputs.
The cause is that we set overflow: hidden for the grid container. We do that to give the container height which it otherwise won't have because all the children are floating.
We could look into using a clearfix instead of overflow hidden.

Reopening because the actual problem hasn't been fixed.

Member

jaspermdegroot commented Jan 30, 2015

Mini size isn't relevant. This also happens with fullsize inputs.
The cause is that we set overflow: hidden for the grid container. We do that to give the container height which it otherwise won't have because all the children are floating.
We could look into using a clearfix instead of overflow hidden.

Reopening because the actual problem hasn't been fixed.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Mar 17, 2015

Contributor

@jaspermdegroot I'm trying various clearfix tricks with my limited CSS-fu. The source is http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best, though I haven't tried all the solutions.

http://jsbin.com/cinito/1/ (overflow: auto) (keeps clipping)
http://jsbin.com/cinito/2/ (:after trick) (seems to work)
http://jsbin.com/cinito/3/ (:before and :after) (seems to work)
http://jsbin.com/cinito/4/ (same as 3, but with display: block instead of display: table) (seems to work)

Do you approve of any of these?

Contributor

gabrielschulhof commented Mar 17, 2015

@jaspermdegroot I'm trying various clearfix tricks with my limited CSS-fu. The source is http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best, though I haven't tried all the solutions.

http://jsbin.com/cinito/1/ (overflow: auto) (keeps clipping)
http://jsbin.com/cinito/2/ (:after trick) (seems to work)
http://jsbin.com/cinito/3/ (:before and :after) (seems to work)
http://jsbin.com/cinito/4/ (same as 3, but with display: block instead of display: table) (seems to work)

Do you approve of any of these?

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Mar 19, 2015

Member

@gabrielschulhof

We already use a clearfix in controlgroup.css so I suggest we use exactly the same trick. This is the same as your http://jsbin.com/cinito/3/. If I am not mistaken display: table; instead of display: block; is needed for IE8.

Member

jaspermdegroot commented Mar 19, 2015

@gabrielschulhof

We already use a clearfix in controlgroup.css so I suggest we use exactly the same trick. This is the same as your http://jsbin.com/cinito/3/. If I am not mistaken display: table; instead of display: block; is needed for IE8.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Mar 19, 2015

Contributor

OK. Can do.

Contributor

gabrielschulhof commented Mar 19, 2015

OK. Can do.

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 19, 2015

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 30, 2015

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 30, 2015

gabrielschulhof added a commit that referenced this issue Mar 30, 2015

kakul added a commit to kakul/jquery-mobile that referenced this issue Apr 14, 2015

kakul added a commit to kakul/jquery-mobile that referenced this issue Apr 14, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment