Show fixed position buttons

My Angular HTML form includes a grid setup, defined as follows:

 .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2%;
        grid-auto-rows: 90%;
    }

This grid creates two parallel rectangles. I have divs in place to display data within these rectangles, each including a button at the bottom. However, when one of the divs does not have any data to display, the buttons move up the grid. I want the buttons to stay fixed at the bottom of the grid, regardless of whether the div above them contains data or not. How can I achieve this?

htmlcssangularbootstrap-4angular8

Answer №1

If you want the button to stay at the bottom even when there is no data to show, ensure that the display attribute of the container where the button is placed is set to flex, and adjust the margin-top of the button to auto.

Make sure to eliminate the grid-auto-rows: 90%; property from the .grid class or change it to auto. This will help your grid expand properly with the content.

Learn more about CSS grid-auto-rows values here.

HTML:

<div class="grid">
  <div class="cell">
    <div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
    <button class="button">My Button 1</button>
  </div>
  <div class="cell">
    <button class="button">My Button 2</button>
  </div>
</div>

CSS:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2%;
  grid-auto-rows: auto;
}

.cell {
  display: flex;
  flex-direction: column;
}

.button {
  margin-top: auto;
  height: 40px;
  padding: 10px;
  width: 200px;
}

The .cell class represents the element containing the button and content. Take a look at a live demonstration here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending the servlet response back to the original JSP page

Is there a way to display the message "File uploaded successfully" on the upload.jsp page? The page retrieves session attributes, checks the user's department, and acknowledges users by displaying the name of their department. When users upload files ...

javahtmlcssjsp

Issue observed with alignment not being corrected when the browser is resized on a responsive webpage

Utilizing Bootstrap3 for my responsive page design. In the banner content, I am including a box with text inside: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <s ...

htmlcsstwitter-bootstrap-3

Effective methods for transmitting reactive form control between child and parent components in Angular 2

I am working with a nested reactive form structure and I have the following setup: Parent HTML Code <form> <child-component></child-component> <button mat-raised-button color="primary">Save</button> </form> Child HT ...

angular

Is the selection of values from a dropdown list dependent on the type of input method used?

I need help with writing JavaScript code to change the input type based on the user's selection from a drop-down list. For example, if the user selects "Title" or "Claim" from the drop-down list, a simple text input format should appear in front of th ...

javascriptphpjqueryhtml

Is there a way to show the "@" symbol in the browser's address bar instead of it being encoded as "%40" through url

I recently encountered an issue while working on a Python3 (Flask) project with UTF-8 encoding. I tried using this line of code: @app.route('/@<username>', methods=['GET', 'POST']) However, whenever I enter the URL in ...

pythonhtmlurlflask

CSS Creating text-shadow overflow in a select element

I'm currently working on styling a menu with CSS, and I've encountered an issue with the text-shadow effect getting clipped inside the dropdown. It's surprising because I expected the text to spread into the padded area within the select bor ...

htmlcsshtml-select

Encountering redundant links during the scraping process

I'm currently working on extracting "a" tags with the class name "featured" from a specific website . Although the code I've written seems to be error-free, it unfortunately duplicates the links. How can I resolve this issue and avoid the duplica ...

pythonhtmlweb-scrapingbeautifulsoup

Styling with CSS: The Art of Showcasing Initials or Images of Individuals

By following this elegant HTML and CSS example, I am able to showcase my initials over my photo. While this is wonderful, I would like the initials to be displayed only if the image does not exist; if the image is present, the person's initials shoul ...

cssangular

Issue with Angualr2: Trying to assign a value to a property of #<AbstractControl> that is read-only

The form structure is as follows: <form [ngFormModel]="myForm" (ngSubmit)="update()"> <ion-label floating>First Name</ion-label> <ion-input type="text" id="fname" [ngFormControl]="fname"> & ...

angular

How to apply color to text in Node.js

I am in the process of creating a web-based compiler using NodeJS. My main objective is to highlight syntax in different colors. For example, consider the following C code: int var; printf("%d",var); In this code snippet, I would like the "int" and "prin ...

javascriptcssnode.jstwitter-bootstrapexpress

Comparing background-color using .css() in jQuery/Js

I've been experimenting with creating angled divs on a webpage, where each basic panel is separated by an angled break. The idea is to have the background-image of one div flow smoothly into the background-color of the next div. Since I couldn't ...

javascriptjqueryhtmlcssregex

When capturing photos using h5 on iOS devices, the browser may experience a flash back issue

I have been searching Baidu and Google for a while now, but I still haven't found a solution. Here is the specific issue: When using h5 to take photos on iOS systems, the browser flashes back. HTML Code <img src="xxx" onclick="sta ...

javascripthtmlvue.js

Is there a way to display the number of search results in the CodeMirror editor?

After conducting some research on how to integrate the search result count in Codemirror like the provided image, I was unable to find any solutions. I am currently working with Angular and utilizing ngx-codemirror, which led me to realize that editing the ...

angulartypescriptcodemirror

Disappearing act: The vanishing act of the Bootstrap 4 Smart Scroll Mobile

Utilizing the Smart Scroll feature from in Bootstrap has been successful on desktop, but issues arise on mobile devices. When scrolling down and returning to the top, the navbar experiences glitches by hiding again. Attempting solutions from Bootstrap 4 S ...

javascripthtmljquerycsstwitter-bootstrap

What is the best way to adjust image size according to the dimensions of the parent container using CSS

I am working on a card game using Bootstrap styling and I have a container with a background image of a card table (1000x1000). As I resize the browser window, the card table image shrinks to 800x800, then to 500x500, and finally to 200x200. My issue is th ...

htmlcssbootstrap-4

Top method for establishing multiple aliases for disabled elements in CSS

Is there a way to have two different disabled states for checkboxes, one with a gray background and the other with a blue background, while maintaining the same functionality? Code within file.css .overall-example input[type=checkbox]:checked + label { ...

css

Angular 2 - Conceal Table Panel if there is no data in the table

I am using *ngFor to generate panels that contain tables. Each table uses *ngFor to create <td> elements for each item in a dataset. Sometimes the table will have empty rows. Is there a clever way to hide the panel when the table has no children? I ...

angularngfor

Issues with react-bootstrap component Switches functionality not operating as expected

It looks like the bootstrap switches are not functioning properly. Even the documentation version is not working as expected <Form> <Form.Check type="switch" id="custom-switch" label="Check this switch" /> <Form.Check ...

javascriptreactjstwitter-bootstrapbootstrap-4react-bootstrap

Get a single object from an array with .single method provided by @ngrx

Seeking to retrieve an Observable containing a single object from an array of objects in my store. I aim to utilize the .single operator, which should throw an exception if there is not exactly 1 object present. However, I'm struggling with this as my ...

javascriptangularreduxrxjsngrx

The dynamic breadcrumb feature requires that only variables be passed by reference according to strict standards

Currently, I am working on a website that consists of 3 main layouts: header, main layout, and footer. These layouts are all called by the same controller. The main layout changes depending on the request, but the header and footer remain constant. Within ...

phphtmldynamicbreadcrumbs