List view need help

Hi can I ask some help please, I have button groups and I want to toggle grid view and list view, my problem is that I can’t make the gridview to listview

I tried to add this css code, but nothing happen

.list-view .panel {
	        width: 100%;
        }

        .list-view .panel-body {
	        padding: 15px;
	        width: 100%;
        }

here is my pen

Thank you in advance.

Without knowing how you want the listview to look its hard to give an answer but to have one item on a line you would need this.

.myRow .list-view .panel-box {
  width: 100%;
}

Of course the images would be huge as they now take up all the row and you would have to limit their size.

e.g.

.myRow .list-view .panel-box img {
  max-width: 200px;/* adjust to suit*/
}

Then the question arises of what you want to do with the text and the buttons etc ?

e.g. next to image instead of below.

.myRow .list-view .panel-box .panel{
  flex-direction:row;
}

Hi Paul,

Thank you so much , sorry I forgot to paste ,I want to achieve like this , the buttons are on the right side and the price.

Thank you in advance.

You’d have to use css grid for that section as you changed the order of the items and although you can change order in flexbox you can’t stack things in a different way like that.

If you do something like this:


/**
   For list view
**/

.myRow .list-view .panel-box {
  width: 100%;
}
.myRow .list-view .panel-box img {
  max-width: 150px;
}

.myRow .list-view .panel-box .panel {
  flex-direction: row;
}
.myRow .list-view .panel-body {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas:
    "info info info price"
    "info info info buttons";
}
.myRow .list-view .panel-body .price_m {
  grid-area: price;
  margin: 0;
}
.myRow .list-view .action-wrapper {
  margin-top: 0;
  grid-area: buttons;
}
.myRow .list-view .info {
  margin: 0 15px 0 0;
  grid-area: info;
  align-self: end;
}

You’ll end up with a display like this:

I’ll leave the small screen modifications up to you :slight_smile:

1 Like

Hi Paul,

Thank you so much, wow I havn’t use css grid yet.
just confuse of what does it mean on this code, what is the purpose of info info info ?

grid-template-areas:
    "info info info price"
    "info info info buttons";

Those are a visual representation of the grid areas.

I set the columns to be 3fr and 1fr

grid-template-columns: 3fr 1fr;

That means the first column takes three times as much space as the second column.

Then I named the column areas as ‘info’, ‘price’ and ‘buttons’. I didn’t actually need to repeat the ‘info’ text so the rule could be this instead.

  grid-template-areas:
    "info  price"
    "info buttons";
}

So that says that the column all down the left is called ‘info’ and then the column on the right is split between ‘price’ on the top and ‘buttons’ on the bottom. These are names that I just made up.

Now with tha in place you can just drop content into those areas and it will work automatically in the flow of the document.

i.e.

.myRow .list-view .panel-body .price_m {
  grid-area: price;
}

That puts the price div over to the top right even though the html was nowhere near there. That’s the beauty of CSS grid as you can drop content into specified places without removing it from the flow as such.

Read this article for a full overview.

1 Like

Thank you Paul :smiley:

Hi @PaulOB

Can I ask some help please, is it possible to not to have space between the Price and Button “Add to cart Button” ? because If I have longer description it will also add additional extra space between the price and the button.

Here is my codepen

Thank you in advance.

Try add a margin-top: auto; to the price. Then the bottom margin of 0 will pull the price down to the button.

If you want some distance to the button, give the bottom margin a non zero value.

1 Like

Hi Thank you Erik_J,

It works, I also add margin-bottom for my buttons so that it will push up the price up and it will align to description but I have problem if my description is short it will not align.

Here is my pen

Thank you in advance.

.myRow .list-view .panel-body .price_m {
            grid-area: price;
            margin-top: auto;
        }
        .myRow .list-view .action-wrapper {
            margin-top: 0;
            margin-bottom:80px;
            grid-area: buttons;
        }

I want to position / align the price like this example, is this possible ?

The margin-bottom:80px is nonsense as it just creates extra space and breaks everything :slight_smile:
You just need to align things to the top if that’s what you want?

Set the grid-tempate-rows property and then you can set the top space to collapse and then the price and button will sit together at the top. Remove the end alignment as my example had everything aligned to the bottom.

here’s your demo forked with the changes made.

1 Like

Try remove the bottom margin here:

        .myRow .list-view .action-wrapper {
            margin-top: 0;
           /* margin-bottom:80px; */
            grid-area: buttons;
        }

As @PaulOB said already, it breaks everything. :slight_smile:

2 Likes

Thank you so much Paul :slight_smile:

1 Like

Thank you Erik_J :slight_smile:

1 Like

That’s close to being a fluff post. :wink:

You could also use the like button (the heart) like I did on your fluff post. :slightly_smiling_face:

2 Likes

Off Topic

Surely saying “thank you” to people who have replied to your question is good manners, rather than fluff. smile Of course you can use the “like” button instead or as well, but let’s not squeeze the humanity out of the forums.

5 Likes