Results 1 to 3 of 3

Thread: Styling Select Field

  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    9
    Vote Rating
    0
      0  

    Default Styling Select Field

    Hi, i need a huge help. Im trying to theming my sencha app but i dont know how to edit the select field css, i need it should looks like this http://www.wehaa-server2.com/americanrotary/int5.php (label at top and select field at bottom)

    could somebody help me?

  2. #2
    Sencha - Community Support Team mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,020
    Answers
    3976
    Vote Rating
    1363
      0  

    Default

    Have you checked the SASS and how to compile SASS?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    9
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Have you checked the SASS and how to compile SASS?

    Yes i know about sass, what I meant is how to change select field look and feel, cause now Ext.field.select show label (float: left), input select (float: right) and I wanted label (display block, top), select field (display block, bottom ).

    So i resolved it overwriting the css with sass:

    Code:
    .selectfield {
        display: block;
        
        .x-label-align-left {
            &:first-child {
              .x-form-label {
                @if $include-border-radius { @include border-top-right-radius($form-fieldset-radius); }
              }
            }
            
            &:last-child {
              .x-form-label {
                @if $include-border-radius { @include border-bottom-left-radius(0); }
              }
            }        
        }
        .x-form-label {
            span {
              font-size: 14px;
            }
        }    
        .x-component-outer {
            &:after {
                margin-top: .5em;
            }
            &:before {
                background: none;
            }
            .x-field-input{
                font-size: 14px;
            }
        }
    }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •