CSS to make last 3 menu items on bottom of container
Question

Hi,

I'm trying to get the last 3 menu items containers to at the bottom of the menu container (to separate the settings from the main options). I tried "position:relative; bottom: -300px;", but it doesn't work properly on mobile. Is there a way to just make it go to the bottom regardless of device? Thanks:

Solution

That is not responsive! @Rasika Modi :)

Is this responsive?

But in terms of CSS.
@Fadi Zananiri you would need to put on the parent height 100%

And then do a margin-bottom by calculating the height of the footer of your side menu if exists. You just need to sum the total pixels of your footer that shows your user name on your image, in this case, john smith. Or you can simply use margin-bottom: var(height-footer)

To calculate the footer height you need to calculate any margin or padding that the last element at the bottom has. I can see that the height where I am selecting is getting padding to give the height to the element itself. so I will sum all those paddings.


It will be something like this the margin-bottom to apply based on the padding that the login info is getting.(You can only give a little more space)

margin-bottom: calc(var(--space-base) + var(--space-m)) 

Kind Regards,

Márcio

Why dont you separate things into a separate block and customize them as you want? Is it possible for your use case or requirements?

From your requirements, it seems you have two different blocks, one for the main settings and another for the options.

But to go to the bottom you need position absolute and bottom:0 and it needs to be relative to the parent which means, the parent container needs to have position: relative.


Kind Regards,

Márcio

Thanks for the feedback, the "position absolute and bottom:0" approach does not seem to work (the menu item does not move for me, even when I make the parent position: relative)?

Hi

you could wrap the whole menu into a flexbox and have a spacer div with the flex1 class between.

you might have to create your own full-height class to fit to your screen dimensions.

Another option could be to use the FloatingContent widget from OutSystemsUI. With this one you can absolute position elements on the screen.

Stefan

Hi @Fadi Zananiri ,
Is this you wanted in your application? This is responsive in all the mobile screen sizes. Let me know.

Regards, 

Rasika

Solution

That is not responsive! @Rasika Modi :)

Is this responsive?

But in terms of CSS.
@Fadi Zananiri you would need to put on the parent height 100%

And then do a margin-bottom by calculating the height of the footer of your side menu if exists. You just need to sum the total pixels of your footer that shows your user name on your image, in this case, john smith. Or you can simply use margin-bottom: var(height-footer)

To calculate the footer height you need to calculate any margin or padding that the last element at the bottom has. I can see that the height where I am selecting is getting padding to give the height to the element itself. so I will sum all those paddings.


It will be something like this the margin-bottom to apply based on the padding that the login info is getting.(You can only give a little more space)

margin-bottom: calc(var(--space-base) + var(--space-m)) 

Kind Regards,

Márcio

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.