Building a custom dialog box using Angular Material with HTML and CSS

I've been exploring different approaches to create a customized angular material dialog with a unique header using CSS/SCSS and the TailwindCSS framework. I am aiming for a specific visual effect, similar to what is shown in the figure below.

desired-effect

However, despite numerous attempts, I have only managed to achieve the following result:

current-effect

My main challenge lies in filling the white area beneath the header and applying a yellow background color to the material icon. Below is a snippet of my HTML/CSS code:

CODE:

<div class="w-full bg-gray-50 dark:bg-gray-900">

    <div class="edit-dialog-header">
        <div class="edit-dialog-header-title pl-5 pr-10 pt-4 uppercase w-max" fxLayout="row" fxLayoutAlign="start">
            <div class="font-bold">Dialog title</div>
            <span class="edit-dialog-button-exit">
                <button class="p-1" [mat-dialog-close]
                        matTooltip="Close"
                        mat-icon-button>
                    <mat-icon>close</mat-icon>
                </button>
            </span>
        </div>

        <div class="edit-dialog-header-subtitle pl-5 pr-5 uppercase">Dialog subtitle</div>

        <div class="grid justify-items-center edit-dialog-header-footer">
            <mat-icon class="material-icons-round badge w-10 h-10">link</mat-icon>
        </div>
    </div>
    
    <div> Some Content ... </div>
</div>
.mat-dialog-container {
    padding: 0px;
    position: relative;
}

.mat-dialog-content {
    margin: 20px;
}

.edit-dialog-header {
    background-color: #929aa0;

    .edit-dialog-header-footer {
        background: #ffffff;
        background: linear-gradient(0deg, #ffffff 50%, rgba(146, 154, 160, 1) 50%);

        mat-icon {
            font-size: 20px;
        }

    }

    .edit-dialog-header-title, .edit-dialog-header-subtitle {
        color: #fbfbfd;
    }

    .edit-dialog-header-title {
        font-size: x-large;
    }

    .edit-dialog-header-subtitle {
        font-size: medium;
        font-weight: normal;
    }

    .edit-dialog-button-exit {
        button {
            position: absolute;
            top: 0;
            right: 0;
            border: none;
            background-color: #929aa0;

            mat-icon {
                color: #fbfbfd;
            }
        }
    }
}

.badge {
    font-weight: bold;
    color: #fbfbfd;
    background: #929aa0;
    border-radius: 50%;
    padding: 5px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

Is there anyone out there who has some insights on how I can address the issue of the white space below the header? Your input would be greatly appreciated. Thank you!

Answer №1

Consider implementing the z-index: 10 property within your CSS rule.

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

RxJS Transformation is failing to return the updated object

In my Angular 5.1 single page application, I am encountering an issue with a service response while calling REST services. The problem lies in how the response is handled when it returns an array of Events. Here is how I am trying to transform the response ...

What is the best way to align text with my CSS number and circle on the same line?

Here are two questions for you: First off, I've successfully created a circle with a number inside it using CSS. How can I go about filling the circle with color? Secondly, I'd like to know how I can align the words "Opportunity #1" on the same ...

JQuery is having trouble with playing multiple sound files or causing delays with events

I've been working on a project that involves playing sounds for each letter in a list of text. However, I'm encountering an issue where only the last sound file is played instead of looping through every element. I've attempted to delay the ...

Prevent HTTP method server errors from displaying in the Angular 8 browser console

Currently utilizing Angular 8 and seeking a way to suppress any HTTP errors displaying in the browser console. Here is an example of the error message: zone-evergreen.js:2828 POST http://localhost:3000/api/auth/login 401 (Unauthorized) Within my Error-In ...

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Displayed below is a layout with two nested divs, both featuring automatic vertical scrolling. Is there a CSS technique available to show the inner scrollbar while maintaining the inner div at 100% width? https://i.stack.imgur.com/HSKHH.png div { ba ...

Can someone explain how to use JavaScript to make table data fill the entire row in a table?

After clicking the button, the layout of the table changes. I want to keep the original table layout even after the JavaScript function runs. I am still learning about JavaScript. function toggle(button) { if(document.getElementById("1").value=="Show ...

Easy jQuery image that smoothly fades in and out

Can anyone recommend a script that allows for creating a slideshow where images fade in and out, rather than sliding left and right? I have a list of images below that I would like to use for the slideshow. <ul class="slideshow"> <li><im ...

Conceal div elements and retain their status when the page is reloaded or switched

I currently have 3 div elements displayed on a webpage: header-div fixed_menu_div page_cont Each of these divs are styled with the following CSS properties: #header-div { top:0; left:0; display:inline; float:left; } #page_cont { mar ...

I am wondering how to use the value assigned to a variable's textContent as an argument for player input in my JavaScript code

i am currently developing a JavaScript project to create a user interface for my rock, paper, scissors game. Currently, the game only runs in the console and prompts the player for input. So far, I have implemented three buttons (one each for rock, paper, ...

Tips for creating a scrollable smiley input field

I have a chat system where I am incorporating smileys from a predefined list. QUERY I am looking to create a scrolling feature for the smileys similar to how it is implemented on this particular website. The twist I want to add is to have this functiona ...

Is it possible to have a Heroku host that supports both an Angular client and an express server within

I currently have my Express server and Angular web app hosted on Heroku using two separate app folders. This setup requires me to pay for two hobby accounts. I am considering merging the two projects together, but I am unsure if this would have any negati ...

Is there a way to use JavaScript to alter the existing URL?

Currently, I am utilizing a select tag to allow users to choose the number of 'rows' displayed on the table. <%=select_tag :per_page, options_for_select([10,20,50,100]....some more code...., onchange => "if (this.value) {windows.location=& ...

CSS code for targeting specific screen sizes in the Bootstrap grid system

I'm not an expert in styling, but I often use Bootstrap for small projects. Currently, my main challenge lies within the grid system. With one monitor at a 1920x1080 resolution and another at 1366x768, I find myself wanting to adjust the grid system b ...

Place a pair of divs in the center next to one another

What is the best way to align two divs in the center beside each other with some padding in between that actually works? I attempted using display: inline, but it didn't have the desired effect. .my-container { position: rela ...

The concealed [hidden] attribute in Angular2 triggers the display of the element after a brief delay

I am currently utilizing the [hidden] attribute within my application to conceal certain elements based on a specific condition. The situation is such that I have two divs - one for displaying results and another for showing the text "No results". Both t ...

How can we toggle a function to expand or collapse fields generated in an ngFor loop?

One of my challenges involves managing a div that is repeated using *ngFor in Angular. This results in multiple divs on the page, each containing collapsible fields that can toggle. Essentially, I have nested collapsible fields within other collapsible fie ...

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

Display the variable value in an HTML format following the submission of a request to an API using NODE JS, express, and jquery

Seeking assistance with completing a straightforward task: Creating an HTML AJAX link that triggers a Node.js API call to retrieve a value, wait for the response, and then display the value in HTML, JS, or PHP. After clicking on the "Get My Value" link be ...

Updating a behavior object array in Angular 5 by appending data to the end

After creating a service to share data across my entire application, I'm wondering if it's possible to append new data to an array within the userDataSource. Here is how the service looks: user.service userDataSource = BehaviorSubject<Array& ...

Font on the internet that does not have the specific Germanic di

Just recently I purchased a new font and was excited to use it on my website using web fonts. However, upon closer inspection, I noticed that the umlauts such as ä, ü, and ö were missing from the font, leaving empty spaces where those characters should ...