Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Input transparency and header radius styling updates for JQM 1.3.0 - Fixes for issue #251 #252

Merged
merged 1 commit into from

2 participants

@begmandev

This is a proposed fix for issue #251 to correct styling issues with jQuery Mobile 1.3.0.

Contains the following changes:
1) Added background-color: transparent; to .ui-input-datebox to prevent the input field container background from being visible.
2) Specified border radius values on the dialog header so that it matches the dialog border radius.

Please note that I didn't actually adjust the width of the input to match the outer container. I considered adjusting the width but the transparent background seemed to work well without that adjustment on both small and large screens.

@jtsage
Owner

Aye - good call on leaving the "internal" input alone - I can get it pixel-perfect for one browser, but not all - so, the shorter version was the compromise. Thanks for this.

@jtsage jtsage merged commit 0ea2061 into jtsage:master
@jtsage jtsage referenced this pull request from a commit
@jtsage Update theme to match #252 e9662e4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 5, 2013
  1. @begmandev

    Update jqm-datebox.css

    begmandev authored
This page is out of date. Refresh to see the latest.
Showing with 2 additions and 1 deletion.
  1. +2 −1  css/jqm-datebox.css
View
3  css/jqm-datebox.css
@@ -7,8 +7,9 @@
/* Base input element Styles */
-.ui-input-datebox { width: 97%; background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; padding-top: 0px; padding-bottom: 0px; }
+.ui-input-datebox { width: 97%; background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; padding-top: 0px; padding-bottom: 0px; background-color: transparent; }
.ui-input-datebox { min-height: 38px; } /* Fix for IE8 */
+.ui-datebox-container > .ui-header:first-child { -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; }
/*.ui-input-datebox .ui-btn-icon-notext { margin-top: 5px !important; margin-bottom: 5px !important; }*/
.ui-input-datebox input { width: 100% !important; padding: 0 !important; margin-top: 5px !important; margin-right: -40px !important; border: 1px solid transparent !important; vertical-align: middle; display: inline-block !important; background-color: transparent; zoom: 1; *display: inline; }
.ui-input-datebox input:focus { outline: none;}
Something went wrong with that request. Please try again.