1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    44
    Vote Rating
    3
    Belkin is on a distinguished road

      0  

    Default Unanswered: DataView.List styling for 3 colums

    Unanswered: DataView.List styling for 3 colums


    I tried to style list to show 3 columns

    Code:
    .x-dataview-item, .x-list-item {    float: left;
        width: 25%;
        display: inline-block;
        background: white url(images/polaroid.png) repeat;
        margin-right: 3%;
        margin-left: 3%;
        margin-top: 3%;
        margin-bottom: 3%;
        text-align: center;
        -webkit-box-shadow: 0px 0px 20px 0.1em #222;
        -moz-box-shadow: 0px 0px 20px 0.1em #222;
        box-shadow: 0px 0px 20px 0.1em #222;
    }
    But the main problem how list is rendered for position it use -webkit-transform: translate3d(0px, 0px, 0px); so even i rewrite some styles it doesnot work as i need.
    I tried dataview it fit my requirements but then pagelist plugin doesnot work

  2. #2
    Sencha User
    Join Date
    Dec 2012
    Posts
    44
    Vote Rating
    3
    Belkin is on a distinguished road

      0  

    Default


    Any suggestions?

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Answers
    17
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default More specific?

    More specific?


    Can you be a bit more specific in your explanation?

    Did you just want 1 list, with 3 columns? I've created a screen with 3 lists next to each other using dataview. The CSS for the container and thumbnail for each is this:

    Code:
       .thumbnail-container {
       margin-top: 3.3%;
       padding: 2% 2% 0% 3.3%;
       text-align: center;
       color: #FFF;
       text-shadow: 1px 2px #333;
       display: inline-block; 
    		  
       }
    
    
                 /* BELOW IS THE CSS FOR EACH WALL COMPONENT */
                .thumbnail-item {
                background: #eee;
                width: 202px;
                height: 115px;
                display: inline-block;
                margin: 30px 30px 30px 30px;
                }
    
    
    	    .carousel {
    	    background: #fff;
    	    }
    Then I have a container that requires 3 lists. The container layout is like this, with a flex of 0.3 so they each take up 1/3 and sit next to each other:

    Code:
    layout: {
    	type: 'hbox',
    	},
        items: [
            {
                xtype: 'thumblist1',
                flex: 0.3
            },
            {
                xtype: 'thumblist2',
                flex: 0.3
            },
    		{
                xtype: 'thumblist3',
                flex: 0.3
            }
        ]
    	}
    Does that help you?

  4. #4
    Sencha User
    Join Date
    Dec 2012
    Posts
    44
    Vote Rating
    3
    Belkin is on a distinguished road

      0  

    Default


    So i have store with list of images, and in list component i need
    image 1 | image 2 | image 3 |
    Image 4 | image 5|

    etc.

Thread Participants: 1