[Silk UI Web] Button placement in Gallery + CardSimpleImage

[Silk UI Web] Button placement in Gallery + CardSimpleImage

  
Forge Component
(64)
Published on 14 Jun by Labs
64 votes
Published on 14 Jun by Labs

Hi, in Gallery widget using EqualHeight =  True and CardSimpleImage, can SIlkUI team make it so the button (Action placeholder) anchored to bottom?


I managed to do that with CSS, but it was not a pretty workaround, since sometimes text would be overflowing through Action placeholder area...



Thanks.

Hi Harlin,

Add to your CSS the following classes/code:


.CardSimpleImage {
position: relative;
}

.CardSimpleImage .Card_Actions {
position: absolute;
width: 100%;
bottom: 10px;
left: 0;
}

This will let the button stick to the bottom of the card :)

Regards,

Jasper

Hi Harlin,

As a best practice, enclose your widget inside a div with your own class and implement your CSS class specific to the widget you need.

This way, if you need to use the same widget on the same page or on other pages you will be able to choose between the two behaviors (Silk UI and yours) and won't override it all over the place.

Cheers,

GM

Jasper Oudenaarden wrote:

Hi Harlin,

Add to your CSS the following classes/code:


.CardSimpleImage {
position: relative;
}

.CardSimpleImage .Card_Actions {
position: absolute;
width: 100%;
bottom: 10px;
left: 0;
}

This will let the button stick to the bottom of the card :)

Regards,

Jasper

Hi Jasper,

I am well aware of this css fix, but you miss something.

The button will occupy some of the text area, see in below screenshot.


We should add spacing container to make room for the button area:


Final result:


However, my initial message on this post is that I expect this button placement will be default behavior of Gallery's EqualHeight setting, without tinkering with CSS.

I prefer CSS protocol.  Give me the espace of Css and let me work with that. The use  in Silk UI is not working for me. Please help me, because I need proper uploading of my numerous  projects and services.