Develop Reference

Why does this Angular Material dialog fail to display both its header and footer?

I have been developing an e-commerce app with Angular 14.
I am currently working on a form that can only ne submitted upon accepting conditions displayed in a modal.
I app.component.ts I have:
import { Component } from '#angular/core';
import { MatDialog, MatDialogConfig } from '#angular/material/dialog';
import { FormGroup, FormControl } from '#angular/forms';
import { HelloComponent } from './hello/hello.component';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
public form: FormGroup = new FormGroup({});
constructor(private dialog: MatDialog) {}
ngOnInit() {
this.form = new FormGroup({
first_name: new FormControl(''),
last_name: new FormControl(''),
phone: new FormControl(''),
email: new FormControl(''),
});
}
public openDialog() {
const dialogConfig = new MatDialogConfig();
// Dialog options
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.width = '420px';
dialogConfig.height = '320px';
this.dialog.open(HelloComponent, dialogConfig);
}
}
In the tenplate, hello.component.html I have
<div mat-dialog-title>
<h2>Terms and Conditions</h2>
</div>
<div mat-dialog-content>
<p>
Quia hic repellendus cupiditate ipsam voluptates, officia reiciendis quas.
Tempore autem quia amet, quas dolor qui animi, quidem neque quam blanditiis
nobis vero temporibus in, nisi dolore adipisci? Minus, cum.
</p>
<p>
Esse placeat nisi iusto earum, eius dolor ipsa aliquam laborum, praesentium
eum, maxime labore maiores odit distinctio! Eius, id amet. Ex quaerat
veritatis suscipit nulla delectus fugit saepe, explicabo eveniet?
</p>
<p>
Optio quae deserunt blanditiis! Quisquam quis libero quae dolor ipsam,
nesciunt dolore alias provident maiores eligendi iusto magnam soluta,
aspernatur exercitationem error temporibus modi neque blanditiis laborum
perspiciatis. Impedit, quis.
</p>
</div>
<mat-dialog-actions>
<button mat-raised-button color="primary" (click)="reject()">Reject</button>
<button mat-raised-button color="primary" (click)="accept()">Accept</button>
</mat-dialog-actions>
The styles:
::ng-deep .mat-dialog-container {
padding: 0 !important;
overflow: hidden;
}
.mat-dialog-content {
padding: 0 10px 0 20px;
margin: 0 -10px;
overflow-y: auto;
overflow-x: hidden;
}
.mat-dialog-title {
margin: 0 !important;
border-bottom: 1px solid #ccc;
}
.mat-dialog-title h2 {
font-size: 18px;
margin: 0;
padding: 10px 0;
text-align: center;
}
p {
font-size: 14px;
line-height: 1.5;
text-align: justify;
margin-top: 0;
margin-bottom: 10px;
}
.mat-dialog-actions {
justify-content: center;
border-top: 1px solid #ccc;
}
The problem
As can be seen in THIS Stackblitz, the dialog's header is not visible (unless its footer, <mat-dialog-actions> is absent).
Questions
How can I fix this bug?
Is there a solution that does not affect the modal's aesthetics?

your title is not shown because your dialog content exceeds the dialogs size.
I also had problems with the sizing in Angular Material dialogs. What I would do is not setting the height in the dialog config (Height in % does not work for whatever reason in MatDialogs).
I'd rather set the height in the mat-dialog-content itself.
I forked your project and made some editing here:
StackBlitz edited
It seems to work like that.
Hope it helps. :)

I have solved it by doing this:
A) Unset the dialog height:
// Dialog options
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.width = '420px';
// dialogConfig.height = '320px';
B) Set the bottom margin of the <mat-dialog-actions> element to 0.
.mat-dialog-actions {
justify-content: center;
border-top: 1px solid #ccc;
margin-bottom: 0;
}

Copying text from accordion triggers click button

Hello I have this siple accordion, and I have an issue, that whenever i copy text from accordion, click event listener triggers and closes the accordion.
I would like to make it work without using jQuery
How could I fix it?
and how would I make it , so when i click somewhere else than on .question / .answer it would close automaticaly? i tried adding event listener to window, but after a long time of not figuring out how to makeit work I gave up.
here is my codepen : https://codepen.io/drabfi/pen/LYrBxzWhttps://codepen.io/drabfi/pen/LYrBxzW
<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container active">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>
const accordion = document.querySelectorAll(".content-container");
for(let i=0;i<accordion.length;i++){
accordion[i].addEventListener("click", function (){
if(this.classList.contains("active")){
accordion.forEach((panel)=>panel.classList.remove("active"));
}else{
accordion.forEach((panel)=>panel.classList.remove("active"));
this.classList.add("active");
}
})
}
.accordion{
margin: 0 auto;
width: 60%;
border-color: #fff;
padding: 2rem;
border-radius: 30px;
&-title{
margin-bottom: 2rem;
text-align: center;
}
.content-container
.question{
padding: 1rem 0;
font-size: 22px;
cursor: pointer;
border-bottom: 1px solid #000;
position: relative;
&::after{
content: "+";
position: absolute;
right: -5px;
}
}
.answer{
padding-top: 1rem;
font-size: 22px;
line-height: 1.5;
width: 100%;
height: 0px;
overflow: hidden;
transition: all .5s;
}
}
// js styling link
.accordion .content-container.active{
.question{
&::after{
content: "-";
font-size: 2rem;
transition: .5s;
}
}
.answer{
height: 150px;
}
}
I would be very happy to see the solutions so I could move on from this spot. Thank you for any advices.

you need to learn a bit about event delegation...
const
accordion = document.querySelector('.accordion')
, accordionEl = accordion.querySelectorAll('.content-container')
;
accordion.onclick = ({target: elmAcc}) =>
{
if (!elmAcc.matches('.content-container > div.question')) return // select only this div
let elContainer = elmAcc.closest('.content-container')
if (elContainer.classList.toggle('active'))
accordionEl.forEach( panel => panel.classList.toggle('active', panel===elContainer))
}
// clicking outside will close accordion :
document.addEventListener('click', event =>
{
if (!accordion.contains(event.target))
accordionEl.forEach( panel => panel.classList.remove('active'))
});
.accordion {
margin : 0 auto;
width : 60%;
border-color : #fff;
padding : 2rem;
border-radius : 30px;
}
.accordion-title {
margin-bottom : 2rem;
text-align : center;
}
.accordion .content-container .question {
padding : 1rem 0;
font-size : 22px;
cursor : pointer;
border-bottom : 1px solid #000;
position : relative;
}
.accordion .content-container .question::after {
content : "+";
position : absolute;
right : -5px;
}
.accordion .answer {
padding-top : 1rem;
font-size : 22px;
line-height : 1.5;
width : 100%;
height : 0px;
overflow : hidden;
transition : all 0.5s;
}
.accordion .content-container.active .question::after {
content : "-";
font-size : 2rem;
transition : 0.5s;
}
.accordion .content-container.active .answer {
height : 150px;
}
<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>

Javascript page enter event

I want an event this should load everytime the site is typed in the browser example : http://localhost/ is typed in the url and the first page should show is my overlay. After they read the information they can close it but if they wanna read it again they can click the button. Also if the site is getting refreshed the overlay should be popup again.
My current code and where I stuck :
const doc = document;
const menuOpen = doc.querySelector(".menu");
const menuClose = doc.querySelector(".close");
const overlay = doc.querySelector(".overlay");
menuOpen.addEventListener("click", () => {
overlay.classList.add("overlay--active");
});
menuClose.addEventListener("click", () => {
overlay.classList.remove("overlay--active");
});

to do this in javascript you can achieve this using window.load like this:
window.onload = function() {myFunction()};
function myFunction() {
overlay.classList.add("overlay--active");
}
but for the best solution i would think adding the overlay--active by default as #Keith mentioned would be nicer as this requires less javascript for the webpage.

You could do it by using if-else structure in javascript. Like the code I posted here. In this method you don’t need the “onload” event. And the “overlay” popped up again when the page is refreshed.
var menuOpen = document.getElementById("menu");
var overlay = document.querySelector(".overlay");
menuOpen.addEventListener("click", () => {
if(overlay.classList.contains("active")){
overlay.classList.add("deactive");
overlay.classList.remove("active");
menuOpen.innerHTML = "show";
} else {
overlay.classList.add("active");
overlay.classList.remove("deactive");
menuOpen.innerHTML = "hide";
}
});
.active {
opacity: 1;
}
.deactive {
opacity: 0;
}
#menu {
margin-top: 15px;
margin-left: 100px;
width: 100px;
height: 60px;
background-color: #fff;
border: 1px solid #5522dd;
color: #5522dd;
cursor: pointer;
}
#menu:hover {
color: #fff;
background-color: #5522dd;
}
.overlay {
border: 2px solid #000;
margin-top: 25px;
-webkit-transition: 2s;
transition: 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript page enter event</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="overlay active">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui modi quasi, quam deleniti, placeat expedita nostrum quae quaerat? Id, velit iste saepe dolore, consequuntur vel quis iure excepturi ut aut fugit dignissimos ea magni repudiandae nihil, assumenda deleniti nostrum tenetur minima aperiam doloribus. Quaerat sunt nam distinctio! Suscipit nostrum vel, sunt, eos esse fugit.
</div>
<button id="menu">hide</button>
<script src="javasc.js"></script>
</body>
</html>

You can use jquery and use it in the loading of document.
like
document.ready(()=>{
$(".overlay").addClass("overlay--active");
})

How to set collapse on all other divs when one div is open?

I have seen many questions but none are similar to my case. I have bootstrap collapse and show for a few div contents. The div content shows when title is clicked. I want to close all other div contents when I click another content's title.
The color of the title div is gray and should change to white when its content shows. Once the content is collapsed, title div color should back to gray.
Here's my code:
function collapse (e, id, collapasibleName) {
var toggleColor = document.getElementById(id);
var collapsibles = document.getElementById(collapasibleName);
if(collapsibles.className == 'home__questions-content collapse' || collapsibles.className == 'home__questions-content collapsed')
{
alert("Sdfsdfdsf")
toggleColor.classList.remove('home__questions-title-show');
}
if(collapsibles.className == 'home__questions-content collapse show') {
alert("in show")
toggleColor.classList.add('home__questions-title-show');
}
}
.home__more-questions-content {
padding-right: 40px;
padding-left:40px;
padding-bottom: 20px;
background-color: $white-color;
position:relative;
max-width: 1080px;
margin: auto;
}
.home__questions-content-tile {
margin-bottom: 10px;
border:1px solid #eee;
}
.home__questions-content-title {
padding:20px;
background-color: #000
cursor: pointer;
}
.home__questions-content {
padding-top: 0;
padding-right:20px;
padding-left:20px;
padding-bottom:20px;
}
.home__questions-title-show { background-color: #fff; }
.collapse {
display:none;
}
.collapse.show {
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
<div class="home__more-questions-content" id="accordion">
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-one" data-parent="#accordion" id="collapse-one" onclick="collapse(event, this.id,'collapsible-one');">
<h2>
// title 1 here
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-one">
//title 1's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-two" data-parent="#accordion" id="collapse-two" onclick="collapse(event, this.id,'collapsible-two');">
<h2>
//title 2
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-two">
//title 2's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-three" data-parent="#accordion" id="collapse-three" onclick="collapse(event, this.id, 'collapsible-three');">
<h2>
//title 3
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-three">
// title 3's content here
</div>
</div>
</div>

Here is the code, explanation is in the comment of the question.
Add new code
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
If current block is opened, then close it and return from further processing.
const container = document.querySelector('.container')
container.addEventListener('click', e => {
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
const collapsable = document.querySelectorAll('.item')
Array.prototype.forEach.call(collapsable, el => {
el.classList.remove('active')
})
e.target.parentNode.classList.add('active')
})
.container {
width: 500px;
margin: 0 auto;
color:darkslategrey;
}
.item {
margin: 10px 0;
border-bottom: 1px solid #666;
padding: 5px 10px;
}
.item.active h3 {
color:aquamarine;
}
p {
overflow: hidden;
transition: height .5s ease;
height: 0px;
}
.item.active p {
height: 80px;
}
<div class="container">
<div class="item active">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
</div>

Render only selected element, React JS

I am trying to toggle class in one of my react component.
The idea is to add class when the mouse enter and to remove the class when the mouse leave only in the element only the element in where the user perform the actions. However this is not the case as when the action is being performed all the element with the function are behaving equally.
This is my code so far:
export default class Projects extends Component{
constructor(){
super();
this.state = {
isHovered : false
}
}
//handle mouse enter
handleMouseEnter = () =>{
this.setState({
isHovered : true
});
}
//handle mouse leave
handleMouseLeave = () =>{
this.setState({
isHovered : false
});
}
//render component
render(){
let display = "";
if(this.state.isHovered === true){
display = "active";
}else{
display = "disable";
}
return(
<section className="projects">
{/*section project wrapper*/}
<div className="p-wrapper">
<h1 className="title">Projects</h1>
<hr/>
{/*projet wrapper*/}
<div className="projects-wrapper">
{/*project item wrapper*/}
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*FMA Web development*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/fma_web.png" alt="FMA Web Development"/>
</div>
</div>
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*Web development using php*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/web_dev_php.png" alt="FMA Web Development Using PHP"/>
</div>
</div>
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*Movie Catalog*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/movie_catalog.png" alt="Movie Catalog"/>
</div>
</div>
</div>
</div>
</section>
);
}
}
I have read the use of key in the documentation and read other question especially this one LINK,however when I try to implement I do not get the desired result.
===========================
EDIT
This is what I get now.
As you can see when I hover both of the element triggers.
This is my CSS Code:
/*Projects Start*/
.projects{
width: 100%;
}
.p-wrapper{
margin: 0 auto;
width: 90%;
height: 100%;
}
.projects-wrapper{
margin-top: 2rem;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.project-item{
margin: 1rem;
width: 30%;
position: relative;
box-shadow: 2px 3px 37px -5px rgba(0,0,0,0.84);
}
.p-description{
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(43, 40, 40, 0.61);
color: white;
}
.p-description p {
margin: 1rem;
}
.p-title{
margin: 1rem;
}
.active{
display: block;
transition: all 2s ease-in;
}
.disable {
display: none;
}