Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Styling Form Panels

  1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    138
    Answers
    1
    Vote Rating
    1
      0  

    Question 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 User edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Answers
    29
    Vote Rating
    11
      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,159
    Answers
    93
    Vote Rating
    7
      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
    138
    Answers
    1
    Vote Rating
    1
      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,093
    Answers
    25
    Vote Rating
    56
      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)
    Lead Trainer / Sencha Specialist
    Community And Learning Systems

    Lead Architect
    DigitalTickets.net

  7. #6
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Answers
    93
    Vote Rating
    7
      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
    138
    Answers
    1
    Vote Rating
    1
      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
    4
      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
    138
    Answers
    1
    Vote Rating
    1
      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
    4
      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...

Page 1 of 2 12 LastLast

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
  •