List view need help

[jemz]

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.

[PaulOB]

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;
}

[jemz]

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.

[PaulOB]

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

[jemz]

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";

[PaulOB]

@jemz

just confuse of what does it mean on this code,

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.

Simple Named Grid Areas | CSS-Tricks

[jemz]

Thank you Paul

[jemz]

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.

[Erik_J]

@jemz

, is it possible to not to have space between the Price and Button

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.

[jemz]

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 ?

[PaulOB]

The margin-bottom:80px is nonsense as it just creates extra space and breaks everything
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.

[Erik_J]

@jemz

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

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.

[jemz]

Thank you so much Paul

[jemz]

Thank you Erik_J

[Erik_J]

@jemz

Thank you

That’s close to being a fluff post.

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

[TechnoBear]

Off Topic

@Erik_J

That’s close to being a fluff post.

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