1. #1
    Sencha User
    Join Date
    Sep 2013
    Posts
    28
    Vote Rating
    0
    scorenfl is on a distinguished road

      0  

    Default Answered: CSS Issues with Sencha

    Answered: CSS Issues with Sencha


    I'm building a Sencha app from a mockup given to me by the designer for the project. To simplify things, I'm trying to use only his CSS code, so I edited app.scss to not import the Sencha default theme but to include my existing CSS file. My thinking was that then I would just need to set appropriate cls attributes when creating the elements, and it should render like the mockup.

    It's close, but there are a couple issues--mostly with positioning. The CSS I'm using increases the height of buttons. For some reason, however, that's caused the button to overlap with the text field directly above it. It's also not rendering the proper width. As a test, I tried removing all other classes from the button but mine in devtools, but it's still rendering the same.

    How should I address this? Do I need to look into creating custom themes? I had hoped just inserting the CSS and removing the Sencha CSS would take care of that.

    Thanks!

  2. You should look into creating a theme based on the styles you were given. There's a lot of plumbing in the sencha theme that you're going to need for things to render correctly, particularly in the layout system.

    I'd recommend for each of the components you're using to review the CSS Vars and CSS Mixins sections of the documentation. This will help guide you with some of the things you can change to ensure a consistent result. For instance you mentioned button height so you can check out the $button-height CSS variable in the docs here:

    http://docs.sencha.com/touch/2.3.1/#...-button-height

    You'll certainly be attaching your own classes to components but it's best to also see what existing sass variables and mixins from the sencha framework you can leverage beforehand too.

    I hope this helped you.

    Brice

  3. #2
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      1  

    Default


    You should look into creating a theme based on the styles you were given. There's a lot of plumbing in the sencha theme that you're going to need for things to render correctly, particularly in the layout system.

    I'd recommend for each of the components you're using to review the CSS Vars and CSS Mixins sections of the documentation. This will help guide you with some of the things you can change to ensure a consistent result. For instance you mentioned button height so you can check out the $button-height CSS variable in the docs here:

    http://docs.sencha.com/touch/2.3.1/#...-button-height

    You'll certainly be attaching your own classes to components but it's best to also see what existing sass variables and mixins from the sencha framework you can leverage beforehand too.

    I hope this helped you.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  4. #3
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,936
    Answers
    328
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      1  

    Default


    You should use the base theme it only contains the required styling to lay out components of Sencha Touch. There are no colors or custom styling. You can use the proper component css var and mixins as Brice advises to style your app.
    Code:
    @import 'sencha-touch/base';
    @import 'sencha-touch/base/all';
    See the section on base theme from the following guide:
    http://docs.sencha.com/touch/2.3.1/#...section-themes
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  5. #4
    Sencha User
    Join Date
    Sep 2013
    Posts
    28
    Vote Rating
    0
    scorenfl is on a distinguished road

      0  

    Default


    I was able to fix the problem simply with better CSS.
    ( float:left; clear:both; )

    Thank you both for the help! I learned quite a bit more about the Sencha theming system and creating custom themes which I will likely use in future Sencha projects.