I have button element which have icon and text inside of it. I would like to position icon to left side of button and text center of button.
Here is my button element:
<button className='button'>
<span className='buttonSpan>
<span className='buttonIcon'>
<Icon />
</span>
<span className='buttonText'>
Next
</span>
</span>
</button>
I tried to position each of them with justify-content but that doesn't work. Like this:
.button {
.buttonSpan {
display: flex;
justify-content: center;
.buttonIcon {
justify-content: flex-start;
}
.buttonText {
justify-content: center;
}
}
}
Any ideas?
If you can change button element to div, you can use css-grid:
.button {
display: grid;
grid-template-columns: auto 1fr;
justify-content: center;
max-width: 10em;
padding: 1em .5em;
background: transparent;
border: 2px solid grey;
border-radius: 1em;
cursor: pointer;
}
.button:hover {
background-color: gray;
color: white;
}
.buttonIcon {
justify-self: start;
}
.buttonText {
justify-self: center;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<div class='button'>
<i class="buttonIcon fas fa-cannabis"></i>
<span class='buttonText'>
Next
</span>
</div>
Related
enter image description here
As you guys can see, i centered the items but due to the first one is a little bit smaller the title and text on the right is not aligned with the two bellow. I could add some padding to center it manually but im not sure if that is a good practice, and also if it is going to affect the order when i add the media query to make it responsive and all of that.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.0/css/all.css">
<style>
body {
background-color: #eff1ed;
font-family: "Roboto", sans-serif;
}
/* Header and nav bar */
header {
display: flex;
}
.logo-guitar {
padding: 2% 1% 3% 2%;
}
.luthier-name {
width: 100%;
padding: 1.5% 0 0 1%;
}
#nav-bar {
display: flex;
text-align: center;
justify-content: space-between;
flex-direction: row;
}
.nav-link {
width: 94px;
text-align: center;
margin: 2px auto;
padding-top: 15%;
color: #131b23;
text-decoration: none;
font-weight: bold;
}
h1 {
font-family: "Satisfy", cursive;
font-size: 3rem;
}
/* email form */
.email-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#email {
height: 25px;
width: 100%;
}
#submit {
width: 80%;
margin-top: 5%;
background-color: #ffe121;
border: 0;
font-weight: bold;
height: 35px;
font-family: inherit;
font-size: large;
}
/* Features */
.fa-solid {
color: #e3170a;
font-size: 4rem;
}
.features {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}
.p-description {
max-width: 90vh;
}
section {
padding-top: 10%;
}
.icon {
padding-right: 3%;
}
</style>
</head>
<body>
<section>
<div class="features">
<div class="icon"><i class="fa-solid fa-fire"></i></div>
<div>
<h2>Premium Materials</h2>
<p class="p-description">
Our guitars are built with the best amazonian wood. This will
increase the longevity of your purchase.
</p>
</div>
</div>
<div class="features">
<div class="icon">
<i class="fa-solid fa-truck-fast"></i>
</div>
<div>
<h2>Shipping</h2>
<p class="p-description">
We make sure you recieve your trombone as soon as we have finished
making it. We also provide free returns if you are not satisfied.
</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fa-solid fa-user-check"></i></div>
<div>
<h2>Satisfaction</h2>
<p class="p-description">
For every purchase you make, we will ensure there are no damages or
faults and we will check and test the quality of your instrument.
</p>
</div>
</div>
</section>
</body>
</html>
I would like to know whats the best option in these cases.
Try using fixed-width Fontawesome icons by adding fa-fw to the classes (see https://fontawesome.com/docs/web/style/fixed-width). For instance:
<i class="fa-solid fa-fire fa-fw"></i>
I'm experimenting on vertical buttons using CSS display grid & inline-grid and have them working. It's when I try to add regular buttons that things go wrong.
The image displays the issue.
]1
The grid's influence extends out past the visible items it contains and hence the "control" buttons are ending up below the vertical buttons instead of up top next to the first vertical button. I've tried surrounding the grid divs with other divs to try to contain their influence, but no luck.
How do I get the "control" buttons currently at the bottom back up toward the top?
<div id="control">
<div id="title">
Buttons In Grid
</div>
<div class="sideButtonsOuterContainer">
<div class="sideButtonsInnerContainer">
<button id="buttonR0" class="sideButtons">A</button>
<button id="buttonR1" class="sideButtons">B</button>
<button id="buttonR2" class="sideButtons">C</button>
</div>
<div class="sideButtonsInnerContainer">
<button id="buttonR3" class="sideButtons">D</button>
<button id="buttonR4" class="sideButtons">E</button>
<button id="buttonR5" class="sideButtons">F</button>
</div>
<div class="sideButtonsInnerContainer">
<button id="buttonR6" class="sideButtons">G</button>
<button id="buttonR7" class="sideButtons">H</button>
<button id="buttonR8" class="sideButtons">I</button>
</div>
</div>
<div id="sideControls">
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
</div>
</div>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
#control{
width: 20%;
}
#title{
text-align: center;
font-size: 43px;
color: rgb(255, 0, 0);
}
.sideButtonsOuterContainer{
display: grid;
width: 52px;
grid-template-rows: auto auto auto;
gap: 10px;
background-color: #000000;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
.sideButtonsInnerContainer {
display: inline-grid;
width: 45px;
grid-template-rows: auto auto auto;
gap: 4px;
padding: 3px;
}
.sideButtons{
background-color: #4CAF50; /* Green */
color: white;
width: 45px;
height: 127px;
text-align: center;
font-size: 38px;
}
.topButtons{
background-color: #4CAF50; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 38px;
}
I have JSX which renders a card-like component:
{userResourceGuides && userResourceGuides.map((guide) => (
<div className='UserResourceGuides' key={guide.id}>
<div className='UserResourceGuides__col-1'>
<h2>{guide.file_label}</h2>
<p>From: {guide.service_name}</p>
</div>
<div className='UserResourceGuides__col-2'>
<div>
<a href={guide.file_url} target='_blank' rel='noreferrer'>
<span><AiOutlineLink /></span>
</a>
<p>View</p>
</div>
<div>
<span><AiOutlineDelete /></span>
<p>Delete</p>
</div>
</div>
</div>
))}
UserResourceGuides is the parent class. How can I apply a :not(:last-child) selector to this class?
SCSS
.UserResourceGuides {
display: flex;
justify-content: space-between;
margin: 1rem;
&:not(:last-child) {
border: 1px solid red; // all entries have border styling applied
}
&__col-1 {
margin-left: 2rem;
h2 {
color: $color-blue-subheader;
font-size: 1.8rem;
}
p {
color: black;
font-weight: 300;
font-size: 1.2rem;
}
}
&__col-2 {
display: flex;
align-items: center;
margin-right: 1rem;
...
The current styling I have still renders all entries with the border styling applied, and does not exclude the last-child. Not my desired result. What is my error here?
Could anybody tell me how can I achieve this style using flexbox? Pls note the modal close button in the right side of the photo.
This is what i have so far. I don't know how to place the close button on top of the image.
Below is my code for the bootstrap modal dialog box:
<Modal show={this.props.show} onHide={() => this.props.onHide()}
>
<Modal.Body className ="modal-body">
<div className = "data-container">
<div class="callout" data-closable>
<button class="close-button" onClick={() => this.props.onHide()} aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
{this.props.data}
</div>
</Modal.Body>
{/* <Modal.Footer className = "modal-footer">
{this.props.title}
</Modal.Footer> */}
</Modal>
And here is the CSS:
.modal-dialog {
display: flex;
max-width: 800px;
height:auto;
flex-direction:column;
justify-content: center;
padding-top:150px;
margin: auto;
}
.modal-content {
overflow: hidden;
border:none;
justify-content: center;
margin:auto;
}
.modal-body {
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
background-color:rgb(221, 221, 221);
padding: 2px;
}
.callout {
display:flex;
border: none;
display: block;
margin-left:47rem;
}
.close-button {
border: none;
background-color:rgb(221, 221, 221);
color:red;
margin:auto;
/* font-weight: bold; */
font-size:50px;
/* width:30px;
height:30px; */
}
Any help is greatly appreciated.
Thanks ✌️
First you need to specify your parent containers position as relative
.data-container {
position: relative;
}
And then set position as absolute and right to 0 on container that containers your close button
.callout {
position: absolute;
right: 0;
}
Demo here
Using this lovely html and css as a guide, I'm able to display my initials over my photo.
This is great, however, I would like to display only the initials in the event the image does not exist; if the image exist, no peron initials should be rendered.
In other words, the image should overlay the initials when that image exists (so as NOT to see the initials).
.profile-dot {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
background-color: lightgray;
border-radius: 50%;
border: gray 2px solid;
background-size: cover;
background-position: center;
background-repeat: none;
}
.profile-dot span {
font-weight: 700;
color: #fff;
font-style: normal;
font-size: 120%;
}
<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/u20P2.jpg)">
<span>BM</span>
</i>
In reality, the actual initials are coming from an Angular expression such as:
<span>{{ dataItem.personInitials }}</span>
I got a hint re: the use of figure, but I'm not quite there yet - i.e.
<figure>
<i class="profile-dot">
<img height="30" width="30" onerror="this.style.display='none'; this.className='' " src="{{ './assets/profiles/patients/' + dataItem.UID + '.jpg' }}" >
<figcaption>
<span>{{ dataItem.patientInitials }}</span>
</figcaption>
</i>
</figure>
you can add a class to the image when the onerror event happens and then use that class to show/hide the span with the adjacent sibling combinator.
You will also need to add a couple of lines to your css fil so that it hides the span by default and it makes it visible when the image contains that class
.profile-dot img+span {
display: none;/*Hide it by default*/
}
.profile-dot img.broken-link+span {
display: block; /* only show when img has class broken-link*/
}
<figure>
<i class="profile-dot">
<img height="30" width="30" onerror="this.style.display='none'; this.className='broken-link' " src="{{ './assets/profiles/patients/' + dataItem.UID + '.jpg' }}" >
<span>{{ dataItem.patientInitials }}</span>
</i>
</figure>
If you are using angular, you can one simple if check
<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/u20P2.jpg)">
<span *ngIf="!dataItem.imageSrc">{{dataItem.personInitials}}</span>
</i>
Demo in action is here - https://stackblitz.com/edit/angular-r3q4i6
Personally I'd do something like this.
Notice if there is a valid image, it displays. If the link is a dud, then the background color and text would display. Also displays the text while image is loading (nice touch for slower connections).
Have a great weekend!
.profile-dot {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
background-color: lightgray;
border-radius: 50%;
border: gray 2px solid;
overflow: hidden;
}
.profile-dot figure {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
background-repeat: none;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.profile-dot figcaption {
font-weight: 700;
color: #fff;
font-style: normal;
font-size: 120%;
}
<div class="profile-dot">
<figure style="background-image: url(https://i.stack.imgur.com/u20P2.jpg)"></figure>
<figcaption>BM</figcaption>
</div>
<br/><br/>
<div class="profile-dot">
<figure style="background-image: url(BROKEN-LINK)"></figure>
<figcaption>BM</figcaption>
</div>
If you use the z-index property in css, you can set the <span> behind the background image. You can learn more about z-index here. (You will also have to remove the background color in order to make this work.)
.profile-dot {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
border-radius: 50%;
border: gray 2px solid;
background-size: cover;
background-position: center;
background-repeat: none;
}
.profile-dot span {
font-weight: 700;
color: #fff;
font-style: normal;
font-size: 120%;
}
<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/u20P2.jpg);">
<span style="z-index:-1;">BM</span>
</i>