1. #1
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default Rounded List Edges

    Rounded List Edges


    Trying to figure out how best to round off the edges on the first and last item in a List component to give the list a slightly rounded look. I know I need to set the border-top-left-radius (and right) values for the first item and the bottom-radius values for the last item in the list, but not exactly sure where to do this (or how).

    It seems that these radius values have to change on the outer "x-list" div as well as the first and last "x-list-item" to achieve this look. Is this true? Is there a better way to do this?

    Thanks

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    480
    Vote Rating
    4
    elishnevsky is on a distinguished road

      0  

    Default


    Just add ui: 'round' config to your list

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    Hmmm, thanks...but that doesn't seem to work for me. This is a Nested list, should that matter?

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    I found that I had to add my own classes to get it to work, using the border-[top/bottom]-[right/left-radius: 1em to both the x-list class as well as the x-list-item:[first/last]-child CSS classes using those new selectors. Works perfectly, but it would sure be nice if it did work your way. I guess if I used Compass and SASS and generated my own style that would be easier too...but the plain old ui:'round' didn't work for me out of the box.

    Thanks for the reply tho!

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    480
    Vote Rating
    4
    elishnevsky is on a distinguished road

      0  

    Default


    You didn't say it was a nested list Then you're right, it won't work, you have to do your own styling, which is fairly easy with Compass.

  6. #6
    Sencha User
    Join Date
    Apr 2011
    Posts
    1
    Vote Rating
    0
    smwald is on a distinguished road

      0  

    Default


    Is there a way to have grouped elements be inline in the list - currently it renders separate lists under each grouped letter title and the letter title extends the full width of the page, unlike the lists which take up about 95% of the page width.

    Thanks!

    Stephen

  7. #7
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    This should be pretty easy with a few lines of CSS. Give your Ext.List a unique class so you can style it independently of other Ext.Lists. Something like:

    Code:
    cls: 'Special'
    Then use the following to get your corners:

    Code:
    .Special .x-list-item:first-child {
    	-webkit-border-top-left-radius: 5px;
    	-webkit-border-top-right-radius: 5px;
    }
    .Special .x-list-item:last-child {
    	-webkit-border-bottom-left-radius: 5px;
    	-webkit-border-bottom-right-radius: 5px;
    }
    That should get you rolling.

    Good luck.
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

Similar Threads

  1. Solution: Rounded list box corners
    By isnoop in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 15 Nov 2010, 2:47 AM
  2. anyone have any css samples for a list with rounded corners?
    By profunctional in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 14 Jul 2010, 12:32 PM
  3. Ext.ToolTip getting cut off edges of screen/viewport
    By chinabuffet in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 7 Jun 2010, 11:43 PM
  4. Window drags just until edges of screen
    By someuser in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 13 Feb 2009, 1:40 AM
  5. panel right and bottom edges clipped
    By szundi in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 9 May 2007, 8:43 AM

Thread Participants: 3