Dynamically positioning a card button based on the card height

ShaunLakeAWE — Thu, 16 Mar 2023 06:07:08 GMT

Good afternoon,

I am running into a problem where I set a fixed height for a number of cards displayed in a row (to accommodate different text block lengths or headings that run over two lines), but the button doesn't shift downwards with the bottom edge of the card when its length is changed.

I can get the button to sit at the bottom of the card by modifying the card and button elements via CSS properties, but this interferes with the button itself (changing its width and aligning it to the cards left edge), and the button will either overlap or abut the card text when the viewport is collapsed.

This isn't great, and I was hoping there is a method for shifting the button to the bottom of the card without having to fix it in place - an option to keep the button position responsive, so it automatically adjusts/flows with the rest of the card content when the card is resized.

Ideally (if at all possible), the button position would adjust to the bottom of the card dynamically whenever the card height value is changed (which may be often depending on updated card content length).

The HTML I'm using when trying to get this to work is attached for reference.

Hopefully someone's run into this problem before or is able to shed some light - any assistance would be greatly appreciated.

Kind regards,

Shaun

Re: Dynamically positioning a card button based on the card height

KlaraSchmitt — Thu, 16 Mar 2023 20:57:00 GMT

Hello @ShaunLakeAWE,

I can help you a little bit with keeping the buttons at the bottom of the cards; however, you may still observe some height unbalance at the tablet viewport. Unfortunately, our grid system still relies on floats, so it's difficult to make cards maintain the same height when they are reflowing.

Within the <style> tags, you want to add this:

.card-content {
justify-content: space-between;
}

This will evenly distribute available space between the <h4>, the <p>, and the <a> (button). If you prefer your headings and paragraph text to remain more top aligned, you can choose to wrap the <h4> and <p> tags in a <div> which will change the space distribution to being distributed between two elements: the div container and the button.

Hopefully this gets you a little further in your goals.

Re: Dynamically positioning a card button based on the card height

ShaunLakeAWE — Thu, 16 Mar 2023 21:59:33 GMT

Hi Klara,

This is just what I was after - thank you! I appreciate the quick response as well as the tip about wrapping the headings and paragraphs in a separate div to maintain the standard spacing between them.

Kind regards,

Shaun

topic Re: Dynamically positioning a card button based on the card height in ArcGIS Hub Questions

Dynamically positioning a card button based on the card height

Re: Dynamically positioning a card button based on the card height

Re: Dynamically positioning a card button based on the card height