1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    87
    Answers
    1
    Vote Rating
    0
    Cybjorg is an unknown quantity at this point

      0  

    Question Answered: Styling Form Panels

    Answered: Styling Form Panels


    Forms are automatically introduced into the layout with padding built-in. Is there a way get rid of the padding within the Sencha Touch code without have to resort to specialized custom CSS that would target the .x-form .x-panel-body? I've already added a padding declaration into the form xtype and it doesn't seem to do a thing.

    Secondly, the forms in the Kitchen Sink demos all have rounded corners around the form panels/fieldsets. There even seems to be standard CSS to support this, and yet adding a form results in square corners. Is there a specific ui or something else needed in order to get the corner to render as rounded?

  2. Is this the padding you are talking about?



    If so, you will need to write the following custom CSS:

    Code:
      .x-form > .x-panel-inner,  .x-form .x-scroll-container > .x-panel-inner {
        padding: 1em;
      }
    There is no SASS variable for this at the moment.

  3. #2
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Answers
    29
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    I think the answer to the second part of your question is that we're using fieldsets in many places, which give a rounder visual style. Not so sure on the variables to change for padding styling, looks like we're missing a few SASS variables from the documentation so I'll ask Rob to look into this for you
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  4. #3
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Is this the padding you are talking about?



    If so, you will need to write the following custom CSS:

    Code:
      .x-form > .x-panel-inner,  .x-form .x-scroll-container > .x-panel-inner {
        padding: 1em;
      }
    There is no SASS variable for this at the moment.

  5. #4
    Sencha User
    Join Date
    Apr 2007
    Posts
    87
    Answers
    1
    Vote Rating
    0
    Cybjorg is an unknown quantity at this point

      0  

    Default


    Rdougan, that is the padding I'm referring to. Thanks for the info.

  6. #5
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,071
    Answers
    24
    Vote Rating
    40
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    easy way to work out what's acting on the page is to use firebug for chrome

    I installed it from the chrome appstore, along with a heap of cool plugins. It's nearly as good as the firefox one, but right now touch doesn't support firefox mobile (which i use all the time), so we have to go back and forth to develop for pc and mobile (grrr)
    Senior Technical Training & Mentoring

    Teahouse Training Company
    Asia Pacific Region (Official Certified Sencha Trainer)

    Check out SenchaWorld.com - The best bits from the Sencha community (videos, blogs, etc)

    Code Validation : JSLint | JSONLint | JSONPLint

  7. #6
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    I switched to Chrome and their Developer tools over a year ago. Much more complete than Firebug, and it is actively developed on.

    http://www.youtube.com/watch?v=nOEw9...layer_embedded

  8. #7
    Sencha User
    Join Date
    Apr 2007
    Posts
    87
    Answers
    1
    Vote Rating
    0
    Cybjorg is an unknown quantity at this point

      0  

    Default


    The field set is the solution for rounded corners. It would be great if this were a ui preference for forms, as well.

  9. #8
    Sencha User bastard's Avatar
    Join Date
    Aug 2011
    Location
    I'm in Cali baby!
    Posts
    65
    Answers
    2
    Vote Rating
    3
    bastard is on a distinguished road

      0  

    Default


    I've been trying to get rid of the same padding for the form. Although when I added rdougan 's suggestion to my .scss file and then ran "compass compile" - that didn't do anything. All my forms still have the padding.

    How do I reference the new css elements in my code?

  10. #9
    Sencha User
    Join Date
    Apr 2007
    Posts
    87
    Answers
    1
    Vote Rating
    0
    Cybjorg is an unknown quantity at this point

      0  

    Default


    You can target the .x-form .x-panel-body for the form element in question like so:

    Code:
    #login .x-form .x-panel-body {
        background-color: transparent;
        padding: 0;
    }

  11. #10
    Sencha User bastard's Avatar
    Join Date
    Aug 2011
    Location
    I'm in Cali baby!
    Posts
    65
    Answers
    2
    Vote Rating
    3
    bastard is on a distinguished road

      0  

    Default


    Quote Originally Posted by Cybjorg View Post
    You can target the .x-form .x-panel-body for the form element in question like so:

    Code:
    #login .x-form .x-panel-body {
        background-color: transparent;
        padding: 0;
    }
    Ok, but how do I reference the new style in my code? I tried to set the cls property to "login" for the FormPanel, but that didn't work...

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar