Edit overflow property for cards

All Quick 'n Easy Web Builder support issues that are not covered in the forums below.
Post Reply
BillDjr
Posts: 8
Joined: Fri Feb 19, 2021 7:18 pm

Edit overflow property for cards

Post by BillDjr »

I was wondering if there is any way to edit the overflow property for cards. (ie: add vertical scrolling) If not, what else would be good to use rather than cards that can function in a similar way and allow vertical scrolling?

EDIT:

For anyone else reading this thread, it is possible to have the content in your card-item scroll. The following will only work if you are willing and able to manually edit the page CSS (ie: NOT in QnEWB's Object HTML).
Some things to note:
* Since re-publishing your page will overwrite your manual CSS changes, only do so after you are sure the page is complete and published for the last time via QnEWB.
* You will need to tinker with card-item padding (possibly margin?) so that the scrollbar doesn't overlap the content. Do this while manually editing the CSS.
* This works within card containers, layout grids, etc.

All you need to do to add a vertical scroll is set the height of your card-item (ie: using px) and add overflow-y: auto;

ONLY MANUALLY EDIT FILES IF YOU HAVE EXPERIENCE WITH THAT. DO SO AT YOUR OWN RISK.
PLEASE do not ask this forum for support if you do this incorrectly, as this forum is here (I believe) to support QnEWB, not html/css experiments outside of the app.
If you mess things up beyond your ability to repair, just re-publish your file from within QnEWB and try again. ;)

EXAMPLE: (Note the 1st and last lines inside the CSS parameters [height & overflow-y])

Code: Select all

#Card1-card-item1
{
   height: 250px;
   box-sizing: border-box;
   border-radius: 0 0 4px 4px !important;
   margin: 10px 10px 10px 10px;
   padding: 0px 0px 0px 0px;
   color: #4F4F4F;
   font-family: "Trebuchet MS";
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
   text-align: left;
   overflow-y: auto;
}
Hope this helps someone somewhere sometime. ;)
Last edited by BillDjr on Mon Mar 08, 2021 11:50 am, edited 4 times in total.
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Edit overflow property for cards

Post by Pablo »

Maybe you can display the cards inside an inline frame?
BillDjr
Posts: 8
Joined: Fri Feb 19, 2021 7:18 pm

Re: Edit overflow property for cards

Post by BillDjr »

I can put individual cards inside inline frames, inside a card container?
Last edited by BillDjr on Mon Mar 08, 2021 11:47 am, edited 2 times in total.
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Edit overflow property for cards

Post by Pablo »

You can put the cards on another page and display this page inside an inline frame.

If this is not what you want then please try to be more specific.
BillDjr
Posts: 8
Joined: Fri Feb 19, 2021 7:18 pm

Re: Edit overflow property for cards

Post by BillDjr »

I think one or both of us are misunderstanding (likely it's me). I want to have all cards in the same row (& card container) to display at equal height, but not determined by the card with the most text content...I'd like long text to scroll in their respective cards only, to avoid cards with less content being displayed with a lot of blank space.
Let's say I have 3 cards in a container, as a row. Card 1 has minimal text. Card 2 has 2 paragraphs of text. Card 3 has minimal text.
I want to have all 3 cards be the height of the shortest card, with card 2 scrolling its 2 paragraphs....this would do away with all blank space in card 1 & card 3.
Is there a way to achieve this using cards, or do I have to go another route (I'm not opposed to that if required, I just like the look/functionality of cards)?
Or is your suggestion above the only way to do it?
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Edit overflow property for cards

Post by Pablo »

You can give cards a fixed height via the flex properties (min height in pixels).
However a card cannot be smaller than its contents.

Do you have an example of what you are trying to do?
BillDjr
Posts: 8
Joined: Fri Feb 19, 2021 7:18 pm

Re: Edit overflow property for cards

Post by BillDjr »

Yes, I do have an example, but obviously the cards are different heights as they are in a layout grid rather than a card container.
-Link removed-

"However a card cannot be smaller than its contents."
- Sounds like that's the answer to my question :(

Also, I had originally set the cards to be collapsed on page load, but that left everything looking pretty empty and didn't make for easy reading.
Thanks for your time! :)
Last edited by BillDjr on Tue Mar 02, 2021 7:10 pm, edited 1 time in total.
BillDjr
Posts: 8
Joined: Fri Feb 19, 2021 7:18 pm

Re: Edit overflow property for cards

Post by BillDjr »

I found a solution.
EDIT:
I created the same look as a card by using 2 shapes with text, but since rounded corners didn't work outside the editor, I added the css manually after publishing. Same with adding "overflow-y: auto" to the shape_text to get my scrolling working.
I had done all this by adding the css in Object HTML, but it got placed in a bad spot, and I couldn't get it inside the right tags to make it work. Easier just to edit the file manually after the fact.

All's well that ends well. :)
Post Reply