Focused mini text input within grid lacks right border #6795

Closed
saulojg opened this Issue Dec 8, 2013 · 4 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

@jaspermdegroot jaspermdegroot modified the milestone: 1.4.2, 1.4.1 Feb 8, 2014
@jaspermdegroot jaspermdegroot removed this from the 1.4.2 milestone Feb 27, 2014
@ldeluca ldeluca added a commit to ldeluca/jquery-mobile that referenced this issue Oct 17, 2014
@ldeluca ldeluca Forms: .ui-mini text input missing blue highlight on focus. TESTS PASS.
Fixes gh-6795
18ef9af
@ldeluca ldeluca added a commit to ldeluca/jquery-mobile that referenced this issue Oct 17, 2014
@ldeluca ldeluca Forms: .ui-mini text input missing blue highlight on focus. TESTS PASS.
Fixes gh-6795
bc6bd52
@ldeluca ldeluca added a commit to ldeluca/jquery-mobile that referenced this issue Oct 28, 2014
@ldeluca ldeluca Forms: .ui-mini text input missing blue highlight.
 Fixes: gh-6795
7f62614
@arschmitz arschmitz added this to the 1.4.5 milestone Oct 28, 2014
@gabrielschulhof gabrielschulhof added a commit that referenced this issue Oct 30, 2014
@ldeluca @gabrielschulhof ldeluca + gabrielschulhof Forms: .ui-mini text input missing blue highlight on focus
(cherry picked from commit ab067cb)

Closes gh-7783
Fixes gh-6795
94217df
@agcolom agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014
@ldeluca @agcolom ldeluca + agcolom Forms: .ui-mini text input missing blue highlight on focus
Closes gh-7783
Fixes gh-6795
235a882
@jaspermdegroot
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.

@jaspermdegroot jaspermdegroot modified the milestone: 1.5.0, 1.4.5 Jan 30, 2015
@gabrielschulhof gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 11, 2015
@gabrielschulhof gabrielschulhof Revert "Forms: .ui-mini text input missing blue highlight on focus"
This reverts commit ab067cb.

Fixes gh-7991
Re gh-6795
518e2da
@gabrielschulhof
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?

@jaspermdegroot
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.

@gabrielschulhof
Contributor

OK. Can do.

@gabrielschulhof gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 19, 2015
@gabrielschulhof gabrielschulhof Grid: Use clearfix instead of overflow
Fixes gh-6795
9395648
@gabrielschulhof gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 30, 2015
@gabrielschulhof gabrielschulhof Revert "Forms: .ui-mini text input missing blue highlight on focus"
This reverts commit ab067cb.

Fixes gh-7991
Re gh-6795
3eb50de
@gabrielschulhof gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 30, 2015
@gabrielschulhof gabrielschulhof Grid: Use clearfix instead of overflow
Fixes gh-6795
9e9c752
@kakul kakul added a commit to kakul/jquery-mobile that referenced this issue Apr 14, 2015
@gabrielschulhof @kakul gabrielschulhof + kakul Revert "Forms: .ui-mini text input missing blue highlight on focus"
This reverts commit ab067cb.

Fixes gh-7991
Re gh-6795
a8eebef
@kakul kakul added a commit to kakul/jquery-mobile that referenced this issue Apr 14, 2015
@gabrielschulhof @kakul gabrielschulhof + kakul Grid: Use clearfix instead of overflow
Fixes gh-6795
Closes gh-7999
8f2d7c0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment