Angular Material: div not being filled by layout-fill

<!-- Container Div -->
<div layout-fill>
    <!-- Image Div -->
    <div layout="column" layout-align="center center" class="coverImage" layout-fill>
        <md-content class="md-padding">
            Sample Text Here
        </md-content>
        <md-button class="md-raised md-primary">Sign Up</md-button>
    </div>
</div>

Looking for some guidance on utilizing Angular Material's flexbox features to design a page with a full-page background image. The idea is to have text and a button centered on the image overlay.

Despite setting the outermost div to occupy the entire screen, the inner image div does not seem to expand accordingly. Instead, it only accommodates the space needed for the text and button. Suggestions or tips on why this may be happening would be greatly appreciated. While I am aware of alternative CSS methods to achieve this effect, my goal here is to understand the nuances of flexbox implementation.

Update:
Check out the JSFiddle link.

javascriptcssangularjsflexboxmaterial-design

Answer №1

The main issue arises when both layout-align and layout-fill are used in the same parent container.

Possible Solutions

To resolve this, there are two options:

  1. Add a custom CSS rule to the parent container with align-items: stretch;

  2. Use only layout-fill without layout-align on the parent container

Explanation

When using the layout-* directive, Angular Material applies flex layout styles by adding a class to the element. For example:

<div class="parent" layout="row" layout-align="space-between center" layout-fill> 
  <div class="child child-1" flex>
  <div class="child child-2" flex="none">
</div>

Will be compiled to :

<div class="parent layout-fill layout-align-space-between-center layout-row" layout="row" layout-align="space-between center" layout-fill> 
  <div class="child child-1 flex" flex>
  <div class="child child-2 flex-none" flex="none">
</div>

And the resulting CSS would include:

.layout {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.layout-row {
    flex-direction: row;
}

.layout-align-space-between-center {
    align-items: center;
    align-content: center;
    max-width: 100%;
    justify-content: space-between;
}

.layout-fill {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}

It is evident that layout-fill does not impact the flex-related rules.

In order to achieve a stretched flex item, one would typically use align-items: stretch as advised in the guide to Flexbox by CSS-Tricks. However, this approach differs in Angular Material implementation since align-item rule conflicts with layout-align-* positioning.

Illustrative Examples

Explore this CodePen demonstration for a practical understanding.

Answer №2

<div layout-fill>
<img src="" class="bg" alt="background image"></img>
<div layout="column" layout-align="center center">
    <md-content class="md-padding">
        Example Text Here
    </md-content>
    <md-button class="md-raised md-primary">Join Now</md-button>
</div>
</div>

also include this in your CSS 

  img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

Answer №3

Sorry for the delay 😅 Make sure to include the "layout" attribute in the div that contains your layout-fill element.

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

How can I deactivate the today button in the angular-ui bootstrap datepicker popup?

Currently, I am working with two dates: StartDate and EndDate which are being managed using the angular-ui-bootstrap datepicker. When a user selects a StartDate (which must be greater than today's date), I want to ensure that the min-date of the EndD ...

javascriptangularjstwitter-bootstrapdatepickerangular-ui-bootstrap

Using a for loop in conjunction with Observable.forkJoin

In my component, I am striving to populate an array known as processes, containing individual process objects that each have a list of tasks. Currently, I am dealing with two API calls: /processes and /process/{processId}/tasks I utilize the /processes ...

javascriptangularobservableangular2-observables

Alternative method for displaying text in Discord

At the moment, my discord bot is set up to read from a file and post the new data in that file to a specific channel. I am interested in modifying the output so that any characters enclosed in ~~ are displayed as strikethrough text. const Bot = require( ...

javascriptnode.jsdiscord.js

Utilizing only select functions from lodash can be more beneficial than installing the entire library, as it reduces the amount of unnecessary dependencies

While working on my project, I incorporated underscore.js for its functionality. However, I recently discovered the need for Lodash's fill function. The idea of adding Lodash to my project seems excessive due to overlapping features with underscore.js ...

javascriptnpmunderscore.jslodash

Creating a radio button along with a submit button that redirects to a different local HTML file

Can someone please help with this code? I'm trying to redirect to the value of each radio button when it's clicked. Any guidance or JavaScript code would be greatly appreciated. Thank you. I've tried multiple solutions but none of them seem ...

javascripthtmlcssradio-button

Ways to display certain JSON elements

I'm attempting to retrieve a specific part of a JSON file through AJAX and display it in an HTML div. I only want to show a certain object, like the temperature. Here is the AJAX code: $(function () { $.ajax({ 'url': 'http://ap ...

javascripthtmljqueryjsonajax

Can someone explain the purpose of this code snippet: `const { foo = "bar" } = "baz"`?

I came across this code not too long ago and had trouble finding the answer online, so I'm turning to you for help. The specific code snippet is from a webpack configuration file: const { NODE_ENV = 'production', } = process.env; Appreci ...

javascript

Avoid displaying passwords in source code

Currently, I am working on developing a password manager web application similar to LastPass. One issue that has come to my attention is the visibility of variables containing decrypted passwords in the source code after retrieving them from a database u ...

javascriptphppassword-manager

Looking to showcase the outcome of the Procedure invocation when I made the call?

{ "isSuccessful": true, "resultSet": [ { "name": "pradeep", "password": 123, "timestamp": "2014-04-08T12:58:45.000Z" }, { "name": "dileep", "password": 1234, "timestamp": "2014-04-08T13:00:52.000Z" } ] } I have ...

javascriptadapteribm-mobilefirstworklight-server

Issues with clicking in JS eventListener

I'm in need of some assistance with a small header issue in my project. I've included all the necessary header files so that you can run it in a snippet and see what's going on. The problem lies within my JS file. When running the file, you ...

javascripthtmlonclicklistenerevent-listener

The problem of duplicate ids: Once an id is used, it cannot be

Currently, I'm focusing on a specific script : http://www.andwecode.com/playground-demo/pop-up-login-signup-box-jquery/# I've made some adjustments to the Gmail and Facebook boxes within this script. When clicking on them, I want them to displa ...

htmlcss

Unique styling for underlines in pop-up with custom CSS

When exploring my codesandbox project, I encountered 2 questions: How can I create a custom underline CSS similar to the UI image below the file name and trash icon? I tried using text-decoration:none, but it doesn't match the UI. How do I center a U ...

htmlcssvuetify.js

Can you provide instructions on utilizing WYSIWYG for real-time label editing?

I am currently developing an online survey creator. The structure of a Question entity is as follows: [Question] int QuestionId { get; set; } int QuestionNumber { get; set; } String QuestionText { get; set; } QuestionType QuestionType { get; } When prese ...

javascriptjqueryajaxasp.net-mvc-3

Locating the ASP.NET validator's Control with the help of JQUERY or basic Javascript

On my webpage, I have several textboxes with corresponding ASP.NET validators for validation. I know that I can validate all the validators using a JavaScript function: Page_ClientValidate("myvalidators") where "myvalidators" is the group name of my val ...

javascriptjqueryasp.netvalidationserver-side-validation

Calculating the sum of all elements in an array

Hi, I am currently attempting to retrieve the total value from an array (such as Arr[1] + Arr[2], and so forth). Unfortunately, I am struggling to find a solution. Below is my existing function: this.hourlyTotals = function() { var custsperhour = Math ...

javascripthtmlarrays

The Div element on my webpage is not adjusting properly to fit the size of mobile devices

My app was created using Quick flip 2, and I needed to resize it for mobile screens, so I implemented jquery-mobile. Here is the code snippet: <!--css--> <style> .quickFlip, .quickFlip3 { height: 350px; width: 400px; } .quickFlip2 { ...

androidjquerycssjquery-mobileflip

Adjust the output number in a JavaScript BMI calculator to the nearest whole number when using the

Hey there, I'm currently working on a beginner project and could use some assistance. My project involves creating a basic BMI calculator using metric units, but I seem to be encountering issues with rounding numbers. Here is a snippet of my code: var ...

javascript

Can the max-height CSS media-query be utilized safely?

It seems that using the max-height media query is proving to be quite a challenge due to an issue with Chrome 67 on iOS. The problem arises when users scroll on Chrome as it constantly adds and removes the address bar. This action causes the max-height va ...

htmlioscssgoogle-chrome

Sliding Feature

Can someone assist me with implementing a jQuery half slide function from left to right? Please check out the following URL for more information: http://jsfiddle.net/prabunivas/Fy9Hs/2/ <div> <div id="col1" style="float:left"> &l ...

jqueryhtmlcss

Creating a dynamic display of flash files on a webpage through a unique combination of PHP, AJAX, and

Despite my lack of experience with Ajax and minimal java knowledge, I have a strong background in SQL and PHP. Even though I anticipate criticism for this question, I am determined to seek help. My primary objective is to rotate 4 flash SWF files randomly ...

javascriptphpajaxflash