my name: [$name]
How to make the “my name:” not visible if the "[$name]" is blank? I’m using inline css because this form will be sent to HTML email.
As mentioned in the comments, if you want to use CSS only, it depends on the HTML structure. It is possible though.
.nameContainer {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.name {
margin-left: 0.5em
}
.name:empty + span {
display: none;
}
<div class="nameContainer">
<span class="name"></span><span>My name:</span>
</div>
<div class="nameContainer">
<span class="name">John Doe</span><span>My name:</span>
</div>
Related
I have a two basic div containers and I am trying to apply some styles to it. I do import my CSS styles from a separate .module.css file and the first style gets picked up in the className property, when assigned. However, the same thing is not working for the second div. The css property for class 'sales' is not being picked up
dashboard.js
import HomeSalesmanStyles from '../../../styles/SalesmanHome.module.css';
const HomeSalesman = ({name}) => {
return(
<>
<div className={HomeSalesmanStyles.container}>
<h4>
Hello, {name} 👋
</h4>
</div>
<div className={HomeSalesmanStyles.sales}>
Hello
</div>
</>
)
};
export default HomeSalesman;
SalesmanHome.module.css
.container {
display: flex;
justify-content: center;
margin-top: 5%;
};
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
Any ideas where the issue is?
----------- Edit ------------
The issue was wrong css module name import! After correcting to the right file, everything works.
This looks like a syntax error in the CSS: adding a semicolon after a rule is invalid.
.container {
display: flex;
justify-content: center;
margin-top: 5%;
} /* <- no semicolon */
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
<div class="container">
<h4>
Hello, {name} 👋
</h4>
</div>
<div class="sales">
Hello
</div>
I want the black text in the box (I choose Medellin) to be hidden but when I mouse over the actual grid item I want it to appear. How is this possible?
<main id="cards">
<a href="signup.html"><section class="cards__med">
<div class="cards__flexchild">
<h1 class="cards__med-title">Medellín</h1>
<img class="cards__medimage" src="img/medellin.jpeg" alt="medellin">
<h1 class="cards__texthead">The City of Eternal Spring</h1>
<!-- Choose City -->
<h1>I choose Medellín!</h1>
</div>
</section></a>
#cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
text-align: center;
font-family: 'Roboto', sans-serif;
margin-top: 3rem;
No problem :)
You'd want to avoid using multiple H1s on a page to maintain the document outline but you can simple use something such as:
// If you just want a simple hide / show
.cards__med:not(:hover) .cards__med-btn { display:none; }
I'd also try to clean the HTML up a little bit if at all possible as there are multiple nested elements that will throw validation errors and multiple h1s:
<div href="signup.html" class="cards__med cards__flexchild">
<h1 class="cards__med-title">Medellín</h1>
<img class="cards__medimage" src="img/medellin.jpeg" alt="medellin">
<h2 class="cards__texthead">The City of Eternal Spring</h2>
Choose City
</div>
``
I'm not sure on which element in the HTML it is you want to be hidden but you can adapt the following as you see fit:
CSS
.selector:not(:hover) .item-reveal {
opacity:0; // If you want the area the hidden content will occupy to stay the same height
display:none; // If you want to completely hide the element
}
I am using the Material-UI library for React.
I am trying to make a simple form that looks like:
However, I can't figure out how to align the button with the TextField.
I tried changing the margin-top but it increases the margin of the entire wrapper.
Below is the code sandbox for it.
Any tips on getting this fixed?
https://codesandbox.io/embed/material-demo-y5eg7?fontsize=14&hidenavigation=1&theme=dark
In your styles.css file you can add {position: relative; top: 10px} to the small-button className then adjust the top value until you are happy with the position alternatively you might be able to wrap the row in a div and use {display:flex; flex-direction:row; justify-content:center;} to align them all.
Change the below styles in styles.css
.horizontal-form { /* This is newly added style */
display: flex;
align-items: center;
}
.input-text-wrapper {
/* margin-bottom: 1.2em; */ /* comment these styles */
}
.input-text-wrapper-small {
width: 33%;
/* margin-bottom: 1.2em; */
display: inline-block;
}
.small-button {
width: 10%;
/* display: inline-flex;
align-items: center; */
}
jsx
Remove the small-button div from inside the input-text-wrapper div and Then Enclose the input-text-wrapper div and small-button div inside a newly created horizontal-form div
...
</Typography>
<div className="horizontal-form">
<div className="input-text-wrapper">
<div className="input-text-wrapper-small">
...
</div>
<div className="input-text-wrapper-small">
...
</div>
<div className="input-text-wrapper-small">
...
</div>
</div>
<div className="small-button">
<Button variant="contained" color="primary">
Add
</Button>
</div>
</div>
</CardContent>
....
Just replace this line
<div className="input-text-wrapper">
with
<div className="input-text-wrapper" style={{display:"flex", alignItems:"center"}} >
AND remove margin-bottom from your style.css
.input-text-wrapper-small {
width: 30%;
/*margin-bottom: 1.2em;*/
display: inline-block;
}
On UIKit, How do you create an email form with an inline text so the user can input text and the form has #example.com after it.
You can do this in bootstrap here: https://getbootstrap.com/docs/4.0/components/input-group/
But I am unable to recreate this on UiKit?
Just "borrow" the concept from bootstrap. Wrap the elements within grid, group them with the class name, and inside the group add element with the flexbox display, it will fit automatically. From what I've seen in sources - they give him 1% width - maybe there's a case for that, but anyway works with only display:flex.
Here's my proposition:
HTML
<form class="uk-grid-small" uk-grid>
<div class="uk-width-1-2#s input-group">
<input class="uk-input" type="text" placeholder="50">
<div class="input-group-append">
<div class="input-group-text">
#email
</div>
</div>
</div>
</form>
CSS
.input-group {
display: flex;
}
.input-group-append {
display:flex;
align-items:center;
}
.input-group-text {
display: flex;
align-items: center;
font-weight: 400;
height:38px;
color: #495057;
padding: 0 10px 0;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-left:none;
}
I've also made a codepen for the reference https://codepen.io/arysom/pen/QzGjyo
Having this:
<label>
<button>Create</button>
</label>
I want button to be aligned to the right like this
----------------------------
| [create]|
----------------------------
while having this:
<label>
<button>Delete</button>
<button>Update</button>
</label>
I want buttons to be in the corners
----------------------------
|[delete] [update]|
----------------------------
Without adding additional classes to the label.
You can just use margin-left: auto on last-child and that will produce desired result.
label {
display: flex;
border-bottom: 1px solid #aaa;
margin: 20px 0;
}
label button:last-child {
margin-left: auto;
}
<label>
<button>Create</button>
</label>
<label>
<button>Delete</button>
<button>Update</button>
</label>
You can do this using nothing but standard flexbox properties:
flex-direction: row-reverse - put the items in a row, start from "the end" (depends on reading direction)
justify-content: space-between - put the items as far away from each other as possible
label {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
<label>
<button>Create</button>
</label>
<label>
<button>Delete</button>
<button>Update</button>
</label>
You can use CSS Flexbox justify-content property to align your elements.
Have a look at this Codepen.
Or look at the code below for reference, also I've used <div>s in place of <label> as in the .two they are acting on both the buttons.
div {
display: flex;
background: #ddd;
padding: 10px 20px;
margin-bottom: 10px;
}
div:first-child {
justify-content: flex-end;
}
div:nth-child(2) {
justify-content: space-between;
}
<div>
<button>Create</button>
</div>
<div>
<button>Delete</button>
<button>Update</button>
</div>
Learn more about CSS Flexbox
Hope this helps!