Results 1 to 5 of 5

Thread: How would you code the following design ?

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    9
    Vote Rating
    1
      0  

    Default Answered: How would you code the following design ?

    Hi,

    Please have a look at https://itunes.apple.com/us/app/koutoubia/id560563570?l=fr&ls=1&mt=8

    I
    am interested by the bottom bar : it doesn't have the same height for all buttons, the selected button has a nice rounded hat. In the fourth screenshot, the rounded hat is ABOVE the main panel (zindex).

    How would you that that with sencha ? A classic vbox won't do it. I believe that it is simply a matter of partially overlapping the toolbar and the main panel (so that the rounded hat is drawn on top of the main panel content).

    I had a look at the relative/absolute positioning options for a sencha panel but I don't see how to use it for that specific example.

    Regards,

    Nabil.

  2. No, I'm saying let the toolbar have say 65px but have the background have 50px and then the button let it have a background that goes 65px.

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    First thing I would try is to give the background a height and then give the button a special background. This way the toolbar background ha a height say 85% and the button will then have a height that goes 100% so you have 15% above the toolbar.
    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

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    9
    Vote Rating
    1
      0  

    Default

    Oh I see. So you would use overflow : you specify that the toolbar has 50 pixels for the height and then put a background of 65 pixels for a specific button of the toolbar, so that the button goes beyond the toolbar. Am I right ?

    I will try that, but I am not sure that the toolbar will allow that something goes beyond its limits.

    Thanks !

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    No, I'm saying let the toolbar have say 65px but have the background have 50px and then the button let it have a background that goes 65px.
    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

  6. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    9
    Vote Rating
    1
      0  

    Default

    Ok, thanks
    That should work.

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
  •