I m customising angular material for my project.
I m facing alignment issues with padding-left
My Result:
Expected result:
And here is my code:
.mat-flat-button {
line-height: 28px !important;
padding: 0 12px !important;
font-weight: 400 !important;
}
<button mat-flat-button color="primary">
<mat-icon color="white">add</mat-icon>
Create
</button>
Put the button text in a span tag and add the following properties to it:
button {
display: flex;
flex-direction: row;
align-items: center;
background: blue;
color: white;
border: none;
border-radius: 5px;
padding-right: 12px;
}
<button mat-flat-button color="primary">
<mat-icon color="white">add</mat-icon>
<span>Create</span>
</button>
Edit:
Changes in the code are done to run this snippet on this website:
Replacing <mat-icon color="white">add</mat-icon> with <span color="white" class="material-icons">add</span> (Credits: krmld)
button {
display: flex;
flex-direction: row;
align-items: center;
background: blue;
color: white;
border: none;
border-radius: 5px;
padding-right: 12px;
}
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<button mat-flat-button color="primary">
<span color="white" class="material-icons">add</span>
<span>Create</span>
</button>
</body>
I solved it using the following css styles
.mat-button,
.mat-flat-button {
padding: 0 12px !important;
line-height: 28px !important;
font-weight: 400 !important;
font-size: small !important;
}
.mat-icon {
height: inherit !important;
width: inherit !important;
}
.mat-flat-button>.mat-button-wrapper>mat-icon {
margin-left: -4px !important;
margin-right: 4px !important;
font-size: large !important;
}
.mat-button-toggle-label-content {
line-height: 20px !important;
}
Related
Hello I am trying to make a hamburger menu bar. But I can't seem to position the circle right icon to the right. When I try to add a padding-right it won't let me.
My JS:
{
SidebarData.map((item, index) => {
return (
<div >
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
<span className={"roundright"}>
<PageRight />
</span>
</Link>
</li>
</div>
);
})
}
My CSS:
.nav-text {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 16px 8px 16px;
list-style: none;
height: 50px;
text-align: center;
}
.nav-text a {
text-decoration: none;
color: #FFFFFF;
border: 1px solid white;
font-size: 14px;
width: 90%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.roundright {
font-size: 14px;
color: #E7135D;
font-size: 14px;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
Here is what I currently have:
Desired result:
Here is my CSS:
I would recommend using a flexbox and the justify-content for this case. You can view more on the space-between property here. Note that my answer only contains new classes and not your previously written classes.
Example HTML:
<div >
<Link to={item.path}>
<li key={index} className={`${item.cName} item-container`}>
{item.icon}
<span>{item.title}</span>
<span className={"roundright"}>
<PageRight />
</span>
</li>
</Link>
</div>
Example CSS:
.item-container {
display: flex;
justify-content: space-between;
align-items: center;
}
I'm trying to put some buttons onto some flex containers for a sort of middle-of-the-page dropdown menu. I need four buttons that fill the space of the flex container, that appear on hover. I can get the hover action working, but my buttons don't show up and are a little off. I'm very new at this and have really hit a wall here.
Essentially, I need a box that splits into 4 other clickable boxes on hover, all contained inside the original box.
.nav-box-container {
width: 220px;
margin: 15px 7px 0px 7px;
flex-grow: 1;
}
#media (max-width: 767px) {
.nav-box-container {
width: auto;
}
.nav-box-citations {
color: #282828;
background-color: #fff;
outline: 3px solid #bbb;
margin: 0px;
padding: 25px 25px 30px 25px;
padding-right: 19px;
min-height: 160px;
font-size: 17px;
font-weight: 500;
height: 100%;
}
.nav-box-citations-buttons {
display: none;
width: 100%;
background-color: #fff;
outline: #282828 solid;
text-decoration: none;
}
.nav-box-citations:hover,
.nav-box-citations:focus+.nav-box-citations-buttons,
.nav-box-citations-buttons:hover {
display: inline;
}
<div class="nav-box-container">
<div class="nav-box-citations">
<h3 class="nav-box-title">Citation Guides</h3>
<p class="nav-box-desc">Get help on formatting citations and bibliographies.</p>
<div class="btn-grp">
<button type="button-group" class=nav-box-citations-buttons>APA</button>
<button type="button-group" class=nav-box-citations-buttons>MLA</button>
<button type="button-group" class=nav-box-citations-buttons>AMA</button>
<button type="button-group" class=nav-box-citations-buttons>Chicago</button>
</div>
</div>
</div>
Produces this:
The trick is to target just the children of the hovered parent:
.nav-box-citations:hover .nav-box-citations-buttons {
display: inline;
}
.nav-box-container {
width: 220px;
margin: 15px 7px 0px 7px;
flex-grow: 1;
}
#media (max-width: 767px) {
.nav-box-container {
width: auto;
}
.nav-box-citations {
color: #282828;
background-color: #fff;
outline: 3px solid #bbb;
margin: 0px;
padding: 25px 25px 30px 25px;
padding-right: 19px;
min-height: 160px;
font-size: 17px;
font-weight: 500;
height: 100%;
}
.nav-box-citations-buttons {
display: none;
width: 100%;
background-color: #fff;
outline: #282828 solid;
text-decoration: none;
}
.nav-box-citations:hover .nav-box-citations-buttons {
display: inline;
}
<div class="nav-box-container">
<div class="nav-box-citations">
<h3 class="nav-box-title">Citation Guides</h3>
<p class="nav-box-desc">Get help on formatting citations and bibliographies.</p>
<div class="btn-grp">
<button type="button-group" class=nav-box-citations-buttons>
APA
</button>
<button type="button-group" class=nav-box-citations-buttons>
MLA
</button>
<button type="button-group" class=nav-box-citations-buttons>
AMA
</button>
<button type="button-group" class=nav-box-citations-buttons>
Chicago
</button>
</div>
</div>
</div>
Hello, I created a site but I have a problem with my buttons I think
it comes largely from the fact that I use <a> tags (impossible for
me to create from scratch starting from a tag If someone can
explain to me this way of doing things I'm interested because I've
tried many times and it's impossible for me now
I want this style of button : 1) Invite & Support button: https://i.imgur.com/U4wF4H7.png 2) Login Button in the header section:
https://i.imgur.com/rajn8eU.png But i have this style actually :
https://i.imgur.com/xbDuOe3.png
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
</div>
<div class="login">
Login
</div>
</nav>
</header>
<div class="circuit">
<h1 class="header_title">The Perfect <br>Discord Music Bot.</h1>
<h2 class="header_second_title">Poseidon is the only Discord bot you'll ever need!</h2>
Invite
Support
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div> <!-- Javascript clickable text // add function js -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>```
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.topbar {
height: 80px;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
font-size: 21px;
}
.topbar nav a:hover, .topbar nav a.active {
color: #94C8D0;
}
.header-logo {
padding: 0px 20px;
cursor: pointer;
width: 25vh;
}
.login_btn {
margin: auto 25px auto;
background-color: #EEEEEE;
color: #3b3b3b;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.header_title {
text-align: center;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 1000;
font-size: 72px;
word-spacing: 0px;
margin: 0px;
padding: 0px;
letter-spacing: normal;
line-height: 72px;
}
.header_second_title {
text-align: center;
color: #9F9F9F;
font-family: 'Inter';
font-size: 30px;
margin: 16px 0px 0px;
padding: 0px;
line-height: 36px;
font-weight: 500;
}
.header_btn {
display: flex;
justify-content: space-evenly;
}
.invite_btn {
display: flex;
justify-content: center;
font-size: 24px;
font-family: 'Inter';
background-color: #1A9BB6;
color: #ffffff;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
.support_btn {
display: flex;
justify-content: center;
font-size: 24px;
font-family: 'Inter';
background-color: #EEEEEE;
color: #282828;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business"
"social . . design";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
padding: 8px 0px 0px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
To train myself, I decided to reproduce this website:
https://hydra.bot/ this project taught me many things despite the fact
that my current project does not correspond to 100% (Very complex for
me to reproduce it to 100% currently), I block especially on the
buttons, so if someone can help me I'm interested, thank you in
advance
You need to wrap your invite and support button in another div that has display flex property.
If you make display flex it is not going to do anything to itself, rather it modifies its child components
.container {
display: flex;
justify-content: center;
}
<div class='container'>
Invite
Support
</div>
how can I do so that the button is not hidden when resizing the modal?
I'm having trouble solving this problem can someone help me?
I believe it must be simple to solve, I just couldn't find the solution yet
below is the JSX code (React) and CSS code
if you look at the image you will be better able to understand the problem
JSX (React) code below:
<Modal open={this.props.open} visible={this.props.visible}>
<div class={style.Container}>
<div class={style.Header}>
<div class={style.Title}>{data.subject}</div>
<div
class={style.Buttons2}
onClick={(event) => this.props.visible(false)}
>
<MdBackspace size="24px" color="#FFF" />
</div>
</div>
<form onSubmit={this.handleSubmit} class={style.Wrapper}>
<div class={style.Message}>
{ReactHtmlParser(this.state.message)}
</div>
<div class={style.Editor}>
<ReactQuill
value={this.state.content}
onChange={this.handleType}
/>
</div>
<div class={style.Controls}>
<input type="file" multiple onChange={this.fileSelected} />
{this.state.buttonState ? (
<button class={style.SendButton} type="submit">
Enviar
</button>
) : (
<button class={style.ButtonDisabled} disabled>
Enviar
</button>
)}
</div>
</form>
</div>
</Modal>
CSS code below:
.Container {
width: 720px;
display: flex;
flex: 1 1 100%;
flex-direction: column;
background: #f9f9f9;
border-radius: 5px;
border: 2px solid #405c77;
resize: both;
overflow: auto;
}
.Header {
width: 100%;
display: flex;
justify-content: space-between;
background: #405c77;
padding: 20px;
flex-wrap: wrap;
}
.Title {
color: #fff;
font-weight: 700;
font-size: 16px;
}
.Wrapper {
/* flex: 1 1 100%; */
height: 100%;
display: grid;
/* grid-template-rows: 60% 30% 40px; */
grid-template-rows: minmax(5px, 1fr);
}
.Message {
/* height: 100%; */
margin: 10px;
padding: 10px;
display: grid;
border-radius: 5px;
overflow-y: auto;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.111);
}
.Editor {
height: calc(30% - 40px);
/* height: 100%; */
margin: 10px;
}
textarea {
width: 100%;
height: 160px;
resize: none;
padding: 5px;
}
.Buttons2 {
cursor: pointer;
background-color: transparent;
outline: none;
border: none;
}
.SendButton {
display: flex;
justify-content: flex-end;
align-items: center;
height: 30px;
cursor: pointer;
padding: 10px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
background: rgba(64, 92, 119, 0.8);
transition: all 0.1s ease-in-out;
color: #fff;
}
.SendButton:hover {
transition: all 0.1s ease-in-out;
background: rgba(64, 92, 119, 0.999);
}
.ButtonDisabled {
display: flex;
justify-content: flex-end;
align-items: center;
width: 60px;
height: 30px;
background: red;
padding: 10px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
color: #fff;
}
.Controls {
/* height: 40px; */
/* height: 100%; */
display: flex;
flex: 1 1 100%;
flex-wrap: nowrap;
justify-content: space-between;
}
.Controls input {
margin-top: 12px;
cursor: pointer;
padding: 12px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
}
Maybe try putting your button inside the Editor div?
<div class={style.Editor}>
<ReactQuill
value={this.state.content}
onChange={this.handleType}
/>
<div class={style.Controls}>
<input type="file" multiple onChange={this.fileSelected} />
{this.state.buttonState ? (
<button class={style.SendButton} type="submit">
Enviar
</button>
) : (
<button class={style.ButtonDisabled} disabled>
Enviar
</button>
)}
</div>
</div>
Its difficult without being able to inspect it properly
try this:
{
position:fixed;
top:0;
z-index:5;
}
I'm trying to replicate this design for my logo but struggling with the CSS. So far I have managed to write the code below but am struggling to create the stacked text for growth hacker and entrepreneur. If you have any guidance it would be much appreciated.
<a class="navbar-brand navbar-brand-fix" href="<?php echo site_url('/') ?>">Elliott Davidson | <span class="logo-growth-hacker">Growth Hacker</span><br><span class="logo-entrepreneur">Entrepreneur</span></a>
.navbar-brand
font-weight: bold
font-size: 1rem
text-transform: uppercase
color: $light-grey
padding: 30px 30px 30px 0px
.navbar-default .navbar-brand
color: $light-grey
a.navbar-brand.navbar-brand-fix
span.logo-growth-hacker
font-weight: 200
font-size: 0.5em
text-transform: none
vertical-align: text-top
span.logo-entrepreneur
font-weight: 200
font-size: 0.5em
text-transform: none
margin-top: -18px
float: inherit
margin-left: 182px
padding-top: 5px
Here's how I would do it. Create a couple of flex columns using the row layout and style accordingly.
a {
display: inline-flex;
align-items: center;
background: linear-gradient(to right, #666, #666 50%, #444 50%, #444);
color: white;
padding: 1rem;
text-decoration: none;
font-size: 1.25rem;
}
.col {
border-left: 1px solid white;
padding: 0 0 0 1rem;
margin: 0 0 0 1rem;
font-size: .6rem;
}
a:hover .col { border-color: red; }
<a class="navbar-brand navbar-brand-fix" href="<?php echo site_url('/') ?>">
<span class="name">Elliott Davidson</span>
<span class="col">
Growth Hacker<br>
Entrepreneur
</span>
</a>
Hopefully this may get you started :-)
.logo {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.logo > * {
flex: 0 0 auto;
}
.title {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.title > * {
flex: 0 0 auto;
}
<div class="logo">
<div class="name">
Elliott Davidson
</div>
<div class="title">
<div class="funText">
Growth Hacker
</div>
<div class="position">
Entrepreneur
</div>
</div>
</div>