I'm using Angular Material to build an application. I want to use mat-stroked-button, but I have encountered a problem. As you can see in the gif below, whenever I hover the button all text quickly moves down and then back up. I can't figure out why this is happening.
Here is the HTML:
<div id="home">
<div id="side">
<div id="info">
<h1>{{title}}</h1>
Info here
</div>
<div id="navigation">
<button mat-stroked-button *ngFor="let item of menuItems">{{item}}</button>
</div>
</div>
<div id="content">
<button mat-stroked-button>BUTTON</button>
<router-outlet></router-outlet>
</div>
</div>
app.component.css:
#home{
position: absolute;
display: flex;
top: 50%;
left: 50%;
width: 99%;
height: 98%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#side{
width: 25%;
height: 100%;
display:flex;
flex-direction: column;
}
#info{
background: brown;
margin-bottom: 10px;
border: 1px solid black;
}
#navigation{
background: brown;
border: 1px solid black;
}
#info h1 {
margin: 0;
text-align: center;
}
#content{
width: 100%;
height: 100%;
background: gray;
}
button[mat-stroked-button]{
display: block;
width: 80%;
margin: auto;
margin-bottom: 5px;
margin-top: 5px;
}
styles.css:
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
body, html, #home{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
}
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
I have replicated the problem on stackblitz: https://stackblitz.com/edit/angular-sfbd5v
Thanks.
In app/appcomponent.css, remove the translate properties, and try the below code. It will stop the elements from jumping about.
#home{
position: absolute;
display: flex;
top: 2%;
left: 2%;
margin: auto;
width: 95%;
height: 95%;
}
Try adding your override styles for the button to hover as well
button[mat-stroked-button], button[mat-stroked-button]:hover {
Related
I am learning React JS and also brushing up on some CSS styling. I have a small app that is basically a drum machine that I wanted to style to look as a launchpad using 3D transformations and CSS. The algorithm itself works, so I made the body of the launchpad, but I also wanted to make 3D buttons for it which would visually sink in when interacted with (either on click or key down). But I can't figure out how to make the buttons into cuboids that go on top of the main cuboid (the drumpad). They just remain flat in the top plane of the launchpad cuboid.
Codesandbox
Relevant JSX code:
The launchpad itself:
return (
<div className="drum-container">
<div className="drum-body">
<div id="drum-machine" className="side top">
<div className="drum-header">
<span>Beat Pro X</span>
<span>{clipName}</span>
</div>
<div id="display">
{keys.map((element, index) => {
return (
<Drumpad
key={element}
clip={clips[index]}
pressKey={element}
onClick={handleDrumpadClick}
onKeyDown={handleDrumpadClick}
/>
);
})}
</div>
</div>
<div className="side bottom"></div>
<div className="side left"></div>
<div className="side right"></div>
<div className="side front"></div>
<div className="side back"></div>
</div>
</div>
);
The Drumpad element:
return (
<div className="drumpad-button">
<div
ref={drumpadRef}
id={props.clip.name}
className="dpad-side dpad-top"
onClick={playAudio}
>
<span className="drum-pad-key">{props.pressKey}</span>
<audio ref={audioRef} className="clip" src={props.clip.source} />
</div>
<div className="dpad-side dpad-bottom"></div>
<div className="dpad-side dpad-left"></div>
<div className="dpad-side dpad-right"></div>
<div className="dpad-side dpad-front"></div>
<div className="dpad-side dpad-back"></div>
</div>
);
CSS:
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
background-color: darkgrey;
}
#root {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.drum-container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid white;
border-radius: 4px;
height: 100%;
width: 100%;
perspective: 1500px;
perspective-origin: center;
}
.drum-body {
padding: 0;
margin: 0;
position: relative;
height: 700px;
width: 700px;
transform-style: preserve-3d;
transform: rotateX(-50deg);
}
.side {
border-radius: 15px;
position: absolute;
opacity: 0.9;
border: 2px solid white;
}
.front {
left: 100px;
top: 300px;
height: 100px;
width: 500px;
background-color: #d50000;
transform: translateZ(350px);
}
.back {
left: 100px;
top: 300px;
height: 100px;
width: 500px;
background-color: #aa00ff;
transform: translateZ(-350px);
}
.left {
top: 300px;
height: 100px;
width: 700px;
background-color: #304ffe;
transform: rotateY(90deg) translateZ(250px);
}
.right {
top: 300px;
height: 100px;
width: 700px;
background-color: #0091ea;
transform: rotateY(-90deg) translateZ(250px);
}
.top {
left: 100px;
height: 700px;
width: 500px;
background-color: #00bfa5;
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
left: 100px;
height: 700px;
width: 500px;
background-color: #64dd17;
transform: rotateX(-90deg) translateZ(50px);
}
#display {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
row-gap: 20px;
column-gap: 20px;
padding: 0;
border: 0;
width: 80%;
margin: 200px auto 100px auto;
}
.drumpad-button {
border: 2px solid black;
position: relative;
padding: 0;
height: 120px;
width: 120px;
transform-style: preserve-3d;
transform: rotateX(30deg);
}
.dpad-side {
border-radius: 2px;
position: relative;
opacity: 0.9;
border: 2px solid white;
}
.dpad-front {
height: 20px;
width: 120px;
background-color: #d50000;
transform: translateZ(60px);
}
.dpad-back {
height: 20px;
width: 120px;
background-color: #aa00ff;
transform: translateZ(-60px);
}
.dpad-left {
height: 20px;
width: 120px;
background-color: #304ffe;
transform: rotateY(90deg) translateZ(60px);
}
.dpad-right {
height: 20px;
width: 120px;
background-color: #0091ea;
transform: rotateY(-90deg) translateZ(60px);
}
.dpad-top {
height: 120px;
width: 120px;
background-color: darkgreen;
transform: rotateX(90deg) translateZ(10px);
}
.dpad-bottom {
height: 120px;
width: 120px;
background-color: #64dd17;
transform: rotateX(-90deg) translateZ(10px);
}
Drumpads are in a grid, so I've tried setting the grid as the basis for the transform-style: preserve-3d, thinking that the grid elements as its children would then treat the top face of the launchpad as the base plane, but maybe there's something else I am doing wrong?
But from my understanding preserve-3d should be set on the element containing the elements that make up the figure in 3D space. When I change translateZ values I can see different planes popping up, but for some reason preserve-3d is ignored. Is it because of the grid? Or maybe specifics of the JSX nesting of imported components?
i'm practicing making a web page and i was using boostrap 5. my website is already responsive for mobile devices using the #media but when i try to see my webpage on larger screen sizes some divs - sections - row are out of its place and others remain perfect on their place. How can i make the whole column be center no matter the screen size.
when it's on my resolution it looks perfect
enter image description here
but when i zoom out it moves to the left
enter image description here
HTML
<div class="contaier">
<div class="card">
<div class="row">
<div class="col-12 col-md-8">
<div class="circle"> </div>
<div class="col-6 col-md-4"></div>
<h1>TOKEN</h1>
</div>
<div class="content1">
<p>The token will be launched in phase 2, which will serve as a passive reward for each of our DIVERS and as a token for the metaverse economy that is being built for the third phase.</p>
</div>
<img src="http://luxtopia.org/wp-content/uploads/2022/02/haseowo.gif">
</div>
</div>
</div>
</div>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
text-decoration: none;
text-shadow: #000000 0px 0 14px;
}
body{
background-image: url(http://luxtopia.org/wp-content/uploads/2022/03/ffinal.png);
height: 100%;
width: 100%;
background-size: auto;
background-position: bottom center;
font-family: 'Varela', sans-serif;
overflow-x: hidden ;
background-size: 100% 102.5%;
background-attachment: scroll;
background-repeat: no-repeat;
resize: both;
color: var(--font-color);
}
.cards .container{
object-fit: contain;
display:inline-block;
width: 100%;
padding: 1% 15%;
}
.card{
position: relative;
bottom: 850px;
left:230px;
width: 400px;
height: 300px;
background:#335bb7;
border-radius: 100px;
display: flex;
align-items: center;
transition: 0.5s;
border-style: none;
}
.card h1{
position:absolute;
left: 148%;
font-size: 30px;
bottom: 50%;
}
.card2 h1{
position:absolute;
right: 115%;
font-size: 30px;
bottom: 50%;
}
.card3 h1{
position:absolute;
left: 93%;
font-size: 30px;
bottom: 50%;
}
.card4 h1{
position:relative;
right: 46%;
font-size: 30px;
top: 5%;
}
.card .circle{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
overflow: hidden;
}
.card .circle::before{
content:'';
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: #335bb7;
clip-path: circle(120px at center);
transition:0.05s;
display:hidden;
}
.card:hover .circle:before
{
background: #00fcf3;
clip-path: circle(400px at center);
height: 250px;
border-radius: 20px;
}
.card img{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
height: 250px;
width: 250px;
pointer-events: none;
transition:0.05s;
}
.card:hover img{
left: 2%;
top: 35%;
height: 400px;
width: 400px;
}
.card .content1
{
position: absolute;
width: 50%;
left: 10%;
padding:10px 0px 0px 20px;
transition: 0.5s;
opacity: 0;
visibility: hidden;
}
.card:hover .content1
{
left: 0;
opacity: 1;
visibility: visible;
left: 40%;
padding: 65px 20px;
}
thank you all who took the time to read my post, i apreciate any kind of help :')
You have got a typo in your first <div> class-name (contaier -> container).
Add a few flex-attributes:
.card{
justify-content: center;
}
You can alternatively also use the bootstrap classes instead:
<div class="card justify-content-center"></div>
This centers the child-elements of card. In your case: <div class="row">
Not sure if your rows or columns are the problem, since you only posted a snippet of your code. If you have trouble with the centering of your columns, just add this bootstrap class to the respective div: <div class="row justify-content-center">
I am trying to add a horizontal scroll onto a page so that when you scroll vertically, the page scrolls horizontally. I found a piece of code that can do this which is entirely CSS based however it doesn't seem to be responsive. I found this on CodePen.
Is there any way in which this code can be transformed into the page being responsive?
I've attached the code below.
#container {
margin-top: -15px;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
}
#container .box>div {
width: 100%;
height: 100%;
font-size: 96px;
color: #FFF;
position: absolute;
top: 5%;
left: 2.6%;
margin: -50px 0 0 -50px;
line-height: .7;
font-weight: bold;
}
#container {
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
width: 100vh;
height: 100vw;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
.one {
background-color: #45CCFF;
}
.two {
background-color: #49E83E;
}
.three {
background-color: #EDDE05;
}
.four {
background-color: #E84B30;
}
<div id="container">
<div id="container2">
<div class="box one">
<div class="full">
<img class="desktop" src="public/images/lookbook/4.jpg" alt="Header" />
</div>
</div>
<div class="box two">
<div>2</div>
</div>
<div class="box three">
<div>3</div>
</div>
<div class="box four">
<div>Last</div>
</div>
</div>
</div>
If anyone has any idea - please let me know!
I took the initiative to remove all those ugly white spaces and scroll bars, plus what you asked for: Codepen
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
#container {
width: calc(100vh + 17px);
height: 100vw;
margin-top: -17px;
margin-right: 100px;
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
}
#container .box > div {
font-size: 96px;
color: #FFF;
position: absolute;
top: 0;
left: 0;
margin: 0;
line-height: 0.9;
font-weight: bold;
}
.full {
height: 100%;
width: 100%;
position: relative;
}
.desktop {
width: 100%;
height: 100%;
display: block;
position: absolute;
background-size: cover;
}
.one {background-color: #45CCFF;}
.two {background-color: #49E83E;}
.three {background-color: #EDDE05;}
.four {background-color: #E84B30;}
Here is the code you want, use the image as a background instead. This allows it to cover the div completely as you'd like it to. Whilst also being responsive.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
background-size: cover;
}
#container .box>div {
width: 100%;
height: 100%;
font-size: 96px;
color: #FFF;
position: absolute;
top: 5%;
margin: 20px 0px 0px;
line-height: .7;
font-weight: bold;
}
#container {
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
width: 100vh;
height: 100vw;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
.one {
background-color: #45CCFF;
background-image: url(https://images.pexels.com/photos/1022454/pexels-photo-1022454.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.two {
background-color: #49E83E;
background-image: url(https://images.pexels.com/photos/1023949/pexels-photo-1023949.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.three {
background-color: #EDDE05;
background-image: url(https://images.pexels.com/photos/963071/pexels-photo-963071.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.four {
background-color: #E84B30;
background-image: url(https://images.pexels.com/photos/1022928/pexels-photo-1022928.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
<div id="container">
<div id="container2">
<div class="box one">
<div class="full">
<div>1</div>
</div>
</div>
<div class="box two">
<div>2</div>
</div>
<div class="box three">
<div>3</div>
</div>
<div class="box four">
<div>Last</div>
</div>
</div>
</div>
I've tried several ways to code that supports IE - no success. See screenshot below to see the issues I'm showing.
position: relative; and position: absolute; in the parent in css didnt work.
First several lines shows -
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=11">
HTML
<div class="notice-wrapper">
<div class="notice-overlay">
<div class="notices">
<div class="box-left">
<img src="imgs/check.png" alt="Everything is Good! - Sorenson VRS">
<p class="good">EVERYTHING IS GOOD!</p>
</div>
<div class="box-right"><h1>Service Outage</h1><p>Sorenson is not experiencing any service outage at this time. If you are experience problems connecting to VRS, please restart the Sorenson endpoint (VP, PC, or Mobile device). if you continue to have problems, please contact Tech Support below.</p></div>
</div>
</div>
</div>
<div class="service-wrapper">
<div class="services">
<div class="button"><img src="imgs/icon-techsup.png" class="iconBtn"> TECHNICAL SUPPORT</div>
<div class="text"><p>For technical issues with placing or receiving videophone calls.</p></div>
</div>
<div class="services">
<div class="button"><img src="imgs/icon-custserv.png" class="iconBtn"> CUSTOMER SERVICES</div>
<div class="text2"><p>For questions about applying for ntouch®, porting, moving, updating your address, or other general questions.</p></div>
</div>
</div>
<div class="video-wrapper">
<div class="title-video"><h2>(title here)</h2></div>
<div class="video"><img src="imgs/video-placeholder.png" alt="video"></div>
<div class="bg-orange"></div>
<div class="bg-white-watermark"></div>
<div class="bg-white"></div>
</div>
CSS with the Everything is Good boxes -
.notice-wrapper {
height: 400px;
width: 100%;
}
.notice-overlay {
display: block;
width: 100%;
height: 400px;
position: relative;
background: rgba(0,0,0,0.8);
left: 0;
z-index: 9999;
color: #fff;
overflow: hidden;
text-align: center;
}
.notices {
display: flex;
width: 809.25px;
height: 288.25px;
text-align: center;
vertical-align: middle;
overflow: hidden;
margin: 0 auto;
position: relative;
transform: translateY(60px)
-ms-transform: translateY(60px);
-webkit-transform: translateY(60px);
}
.box-left {
flex: 1;
background: #41ad49;
height: 100%;
padding-top: 35px;
}
.box-right {
width: 450px;
background: #40403f;
padding: 25px;
text-align: left;
}
CSS for the two buttons and the texts -
.service-wrapper {
width: 100%;
height: 175px;
background-color: #000000;
}
.services {
width: 55%;
display: flex;
margin: 0 auto;
transform: translateY(15px)
-ms-transform: translateY(25px);
-webkit-transform: translateY(15px);
}
.text p {
flex: 1 1 auto;
line-height: 25px;
font-size: 16px;
color: #ffffff;
text-align: left;
align-items: center;
transform: translateY(6px)
-ms-transform: translateY(6px);
-webkit-transform: translateY(6px);
}
.text2 p {
flex: 1 1 auto;
line-height: 25px;
font-size: 16px;
color: #ffffff;
text-align: left;
align-items: center;
transform: translateY(6px)
-ms-transform: translateY(6px);
-webkit-transform: translateY(6px);
}
.button {
flex: 0 0 auto;
height: 40px;
width: 225px;
margin: 10px;
padding: 5px;
padding-right: 15px;
padding-left: 15px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-around;
}
.iconBtn{
max-height: 75%;
max-width: 75%;
}
CSS on title and the image -
.title-video h2 {
width: 100%;
position: absolute;
margin: auto 0;
text-align: center;
margin-top: 50px;
transform: translateX(-285px)
-ms-transform: translateX(-285px);
-webkit-transform: translateX(-285px);
}
.video-wrapper {
width: 100%;
margin: auto 0;
text-align: center;
}
.video {
position: absolute;
margin: auto 0;
text-align: center;
width: 100%;
}
.video img {
max-height: 75%;
max-width: 75%;
width: 700px;
height: 393px;
margin-top: 90px;
}
I am running into an issue where my contact-section-left is not centering in the parent div. This is not a vertical-align: top issue. You can see the border-right white line, that is showing how much the height extends for the contact-section-left div is, but I am it to be the same size as the right side with the image (sorry the example doesn't have the image).
I am not sure if I am going for the wrong approach here or what, but I am wanting it to look like the paint image I made below.
Any ideas?
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
border-right: 1px solid #FFF;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your entire code can be simplified as follows. I use a pseudo element for the vertical line in between, and shift the position with order via flexbox.
jsFiddle
#contact-section {
display: flex;
justify-content: space-around;
align-items: center;
color: #FFF;
background: #00a16d;
padding: 1em 2em;
}
#contact-section:before {
content: "";
flex: 0 0 1px;
height: 2em;
background: #fff;
order: 2;
}
#contact-section-left {
font-size: 1.5em;
order: 1;
font-style: italic;
}
#contact-section-right {
background: url("https://i.imgur.com/cLMHUZE.png") center / contain no-repeat;
font-size: 2em;
order: 3;
padding: .5em 0;
}
<div id="contact-section">
<div id="contact-section-left">Tell us more about your project.</div>
<div id="contact-section-right">Contact us</div>
</div>
Assiging display: flex; align-items: center; to the parent of the left/right sections will display them side-by-side and center them vertically. Then if you move the border-right from the left (shorter) element to a border-right of the right (taller) element, the line should look more like you want it.
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
display: flex;
align-items: center;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
border-left: 1px solid #FFF;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your #contact-section-wrap doesn't have a height. The height: 100%s you are setting aren't really doing anything. They still rely on a parent height to have any idea what they're getting 100% of.
Try setting a height on #contact-section-wrap.