Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Focused mini text input within grid lacks right border #6795

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

Focused mini text input within grid lacks right border #6795

saulojg opened this issue Dec 8, 2013 · 4 comments
Assignees
Milestone

Comments

@saulojg
Copy link

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 28, 2014
@arschmitz arschmitz added this to the 1.4.5 milestone Oct 28, 2014
gabrielschulhof pushed a commit that referenced this issue Oct 30, 2014
agcolom pushed a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014
@jaspermdegroot
Copy link
Contributor

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
Copy link

@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
Copy link
Contributor

@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
Copy link

OK. Can do.

gabrielschulhof pushed a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 19, 2015
gabrielschulhof pushed a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 30, 2015
gabrielschulhof pushed a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 30, 2015
gabrielschulhof pushed a commit that referenced this issue Mar 30, 2015
gabrielschulhof pushed a commit that referenced this issue Mar 30, 2015
gabrielschulhof pushed a commit that referenced this issue Apr 2, 2015
kakul pushed a commit to kakul/jquery-mobile that referenced this issue Apr 14, 2015
kakul pushed a commit to kakul/jquery-mobile that referenced this issue Apr 14, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants