CSS responsive Button position

Question

Picture of how the button is positioned right now

Right now I am trying to make my modal responsive but the "SAVE" button is not positioning as i want it to. I want to have the button at the same position all the time, but right now it is disappearing. My HTML and css looks as the following

.delete{
    font-size: 16px;
    max-width: 100%;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.delete .text-div{
    padding: 3px;
}
.delete .button-div{
    display: inline-block;
    position: relative;
    padding: 3px;
    /* right: 50%;*/
    left: 80%;
}

<div class="delete">
    <div class="dialog-content-wrapper">
        <mat-toolbar matDialogTitle class="mat-accent m-0">
            <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
                <span class="title dialog-title">Delete Entry</span>
                <button mat-icon-button (click)="onClose()" aria-label="Close dialog">
                    <mat-icon>close</mat-icon>
                </button>
            </mat-toolbar-row>
        </mat-toolbar>
    </div>
    <div class="text-div">
        <span>Are you sure you want to delete this vacation entry?</span>
    </div>
    <div class="button-div">
        <button mat-raised-button color="accent" class="button" (click)="buttonClick();onClose()">SAVE</button>
    </div>
</div>

enter image description here

If you are using a framework you should add it because now, it is quite broken compared to your image. Or you have missing CSS — MaxiGui
– MaxiGui, Commented May 24, 2022 at 15:03

Helena Sánchez · Accepted Answer · 2022-05-24 15:08:54Z

2

First off, you don't need to wrap single elements into divs, it's not a very good practice regarding accessibility.

Regarding your question, where exactly do you want your button to be? If its position is set to relative, it will be positioned relative to the nearest positioned ancestor. That means that you need to put a position property to the .delete div (usually, relative will suffice).

Another way to achieve what you want (if I understand it correctly) would be adding align-self: end to the button element, since it's wrapped inside a flex container.

edited May 24, 2022 at 15:08

answered May 24, 2022 at 15:06

Helena Sánchez

2202 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

stann Over a year ago

That's the right answer. Also nice to mention, that he's positioning .button-div 80% from left, so if SAVE button is wider than 20% of the available space, it will be simply cut off. (like on the screen)

Helena Sánchez Over a year ago

Yes. It would be nicer with a right: 0, although I'm not a fan of positioning elements like this. Flex is much better.

user18460597 Over a year ago

The align-self method worked for me! Thanks!

Collectives™ on Stack Overflow

CSS responsive Button position

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related