Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-934 in 2.0.
  1. 25 Oct 2011 5:44 PM #1
    subimage
    subimage is offline
    Sencha User
    Join Date
    Sep 2011
    Posts
    118
    Vote Rating
    4
    subimage is on a distinguished road
      0  

    Default CSS bugs with fieldsets and labelAlign: 'top'

    CSS bugs with fieldsets and labelAlign: 'top'


    Encountered these while rigging up a form today.

    Notice in the textfield example screenshot, the field is rounded on the top corners - allowing the bg color to poke through.

    On the select example, you get the rounding in the white portion of the select menu, plus there's some weird gradient going on with the label at the top.

    label-align-top-fieldset-rounding.jpglabel-align-top-select.jpg
    Reply With Quote Reply With Quote
  2. 31 Oct 2011 11:45 AM #2
    Jamie Avins
    Jamie Avins is offline
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,652
    Vote Rating
    14
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough
      0  

    Default


    Thank you for the report.
    Reply With Quote Reply With Quote
  3. 17 Nov 2011 2:45 AM #3
    dlouwers
    dlouwers is offline
    Touch Premium Member
    Join Date
    Dec 2008
    Location
    Utrecht, The Netherlands
    Posts
    37
    Vote Rating
    0
    dlouwers is on a distinguished road
      0  

    Default Partial fix/workaround

    Partial fix/workaround


    This is a partial fix/workaround. It should remove the rounded corners of the first input field.
    Add the following config option to the items in the fieldset:

    Code:
    input: { inputCls: 'below-label' }
    and add the following snippet to your CSS:

    Code:
    .x-form-fieldset .x-field:first-child .below-label {
    -webkit-border-top-left-radius: 0em;
    border-top-left-radius: 0em;
    -webkit-border-top-right-radius: 0em;
    border-top-right-radius: 0em;
}
    I'm not yet satisfied with the rounded corners of the last input element. When I fix that I will post it here...
    Reply With Quote Reply With Quote
  4. 17 Nov 2011 3:04 AM #4
    dlouwers
    dlouwers is offline
    Touch Premium Member
    Join Date
    Dec 2008
    Location
    Utrecht, The Netherlands
    Posts
    37
    Vote Rating
    0
    dlouwers is on a distinguished road
      0  

    Default


    Ah, the thing I'm seeing at the bottom rounded corners is the box-shadow of the fieldset. Seems this is by design and has nothing to do with the labels being on top.
    Reply With Quote Reply With Quote
  5. 17 Nov 2011 5:06 AM #5
    dlouwers
    dlouwers is offline
    Touch Premium Member
    Join Date
    Dec 2008
    Location
    Utrecht, The Netherlands
    Posts
    37
    Vote Rating
    0
    dlouwers is on a distinguished road
      0  

    Default


    I noticed that the fields with the labels on top already get a CSS class 'x-label-align-top'. This is a better (CSS-only) fix for the problem. Just add:

    Code:
    .x-form-fieldset .x-field:first-child.x-label-align-top .x-field-text,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-text,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-number,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-spinner-body,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-radio,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-checkbox,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-email,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-url,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-password,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-slider {
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
}
    Reply With Quote Reply With Quote
  6. 5 Mar 2012 2:14 AM #6
    normatjaabjach
    normatjaabjach is offline
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    normatjaabjach is on a distinguished road
      0  

    Default


    Here is sample page to show you the problem :

    <html><body>
    <form action="/cgi-bin/test.cgi" method="post">
    Data Path : <input type="text" size="50" value="C:\Test Data\May
    2007.xls" style='border: thin solid #FFFFFF'></form>
    </body></html>

    I would like the text label and text in input field be exactly
    vertically aligned in all main browsers : IE, Netscape, Firefox,
    Mozilla, Opera, Konqueror, etc.

    How to do ?
    normativa construccion
    *What do you do when the only person who can make you stop crying is the person who made you cry*
    Reply With Quote Reply With Quote
  7. 9 Mar 2012 2:25 AM #7
    joselujaabjedf
    joselujaabjedf is offline
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    joselujaabjedf is on a distinguished road
      0  

    Default


    In my fieldset I have labels next (side) to my textboxes, but for some reason, they are towards the top and not middle. Here is my CSS for the fieldset:

    fieldset {
    clear: both;
    font-size: 100%;
    border-color: #000000;
    border-width: 1px 0 0 0;
    border-style: solid none none none;
    padding: 10px;
    margin: 0 0 0 0;
    }

    label
    {
    font: bold 12px Verdana, Arial, Helvetica, sans-serif, MS UI Gothic;
    float: left;
    width: 12em;
    text-align:right;
    vertical-align:text-bottom;
    }
    What am I missing?

    mosaico artistico
    *Each day is a gift…that is why we call it present.*
    Reply With Quote Reply With Quote
  8. 18 Mar 2012 8:37 PM #8
    ventapjaabaaji
    ventapjaabaaji is offline
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    ventapjaabaaji is on a distinguished road
      0  

    Default


    In my fieldset I have labels next (side) to my textboxes, but for some reason, they are towards the top and not middle. Here is my CSS for the fieldset:
    fieldset {
    clear: both;
    font-size: 100%;
    border-color: #000000;
    border-width: 1px 0 0 0;
    border-style: solid none none none;
    padding: 10px;
    margin: 0 0 0 0;
    }

    label
    {
    font: bold 12px Verdana, Arial, Helvetica, sans-serif, MS UI Gothic;
    float: left;
    width: 12em;
    text-align:right;
    vertical-align:text-bottom;
    }
    What am I missing?
    venta por internet
    *When it HURTS to look back, and you're SCARED to look ahead,you can look beside you and your BEST FRIEND will be there*
    venta por internet
    *When it HURTS to look back, and you're SCARED to look ahead,you can look beside you and your BEST FRIEND will be there*
    Reply With Quote Reply With Quote
  9. 19 Mar 2012 2:09 AM #9
    intersjaabjddi
    intersjaabjddi is offline
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    intersjaabjddi is on a distinguished road
      0  

    Default


    In my fieldset I have labels next (side) to my textboxes, but for some reason, they are towards the top and not middle. Here is my CSS for the fieldset:

    fieldset {
    clear: both;
    font-size: 100%;
    border-color: #000000;
    border-width: 1px 0 0 0;
    border-style: solid none none none;
    padding: 10px;
    margin: 0 0 0 0;
    }

    label
    {
    font: bold 12px Verdana, Arial, Helvetica, sans-serif, MS UI Gothic;
    float: left;
    width: 12em;
    text-align:right;
    vertical-align:text-bottom;
    }
    What am I missing?
    diseño web navarra
    *Good friends are like STARS You don't always see them, but you know they are ALWAYS
    THERE*
    Reply With Quote Reply With Quote