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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    Have you checked the SASS and how to compile SASS?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    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
  •