I have an html layout that I cannot modify since it's a 3d party library.
I have four divs and I want them to be inside a flexbox like that:
1------2------3
(where 2 is in the center and 4 is not visible at all).
I have created an example here.
It seems that it mostly work as I want to apart from the fact that the last div messes up the center position of the item number 2. Is there a way I can completely "exclude" it from the flex array by css even though it is in HTML?
.fc-toolbar {
background-color: #7CC2DD;
color: white;
height: 5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.fc-left {
order: 0;
}
.fc-right {
order: 2;
}
.fc-center {
order: 1;
}
.fc-clear {
}
<div class="fc-toolbar">
<div class="fc-left">
<button type="button">
<
</button></div>
<div class="fc-right">
<button type="button">
>
</button>
</div>
<div class="fc-center">
<h2>May 2016</h2>
</div>
<div class="fc-clear"></div>
</div>
You can give the element position: absolute and it will be taken out of the flow, just as you would do with a non-flex element.
You can find the updated jsfiddle here.
Related
I have a text field that I am trying to attach focus styling to and when focused, I want the box the expand and then include an "Add" button below the text area.
Both elements are on different levels (due to the existing structure of the code base). But I can't figure out how to hide/display the button when focusing on the text area. Here's an example of what I'm working with:
<form class='container'>
<div class='form-item'>
<div class='input-container>
<textarea id='addComment'></textarea>
</div>
</div>
<span class='button-wrapper'>
<button id='addCommentBtn'></button>
</span>
</form>
And here is the CSS/SCSS I've got
#addCommentBtn {
display: none;
}
#addComment {
transition: all 0.5s ease;
margin: 0.5em;
width: 95%;
}
#addComment:focus {
height: 10em;
margin-bottom: 2em;
}
#addComment:focus + #addCommentBtn {
display: block;
}
The expansion of the textarea on focus works as intended, but getting the button the change from display:none to display:block won't seem to work (I've tried a few different variations as well such as visibility).
If it comes down to it, I may have to adjust the Vue components, but this is last resort as it would require more tweaks/confirmation from project lead as the components are used in numerous areas and changes would affect those other areas as well.
ALSO: I would prefer not to use JQuery as well.
This should fix the problem. Flex will automatically adjust the height of container based on content.
function toggleButton(showFlag) {
document.getElementById('addCommentBtn').style.display = showFlag ? "inline" : "none";
}
.container {
display: flex;
flex-direction: column;
}
#addCommentBtn {
display: none;
}
<form class='container'>
<div class='form-item'>
<div class='input-container'>
<textarea id='addComment' onfocus="toggleButton(true)" onfocusout="toggleButton(false)"></textarea>
</div>
</div>
<span class='button-wrapper'>
<button id='addCommentBtn'>Add</button>
</span>
</form>
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>
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'm currently writing a page using Angular and have created a dialog window for users to copy columns from an Excel document. This window consists of two large textareas lined up as columns next to each other, which I achieved using css' column-count attribute.
The issue is that when the first textarea is focused, there is a glow around it. The bottom of the glow shows up in the next column above the second textarea. Is there something I can do to fix this?
I don't want to remove the glow because it helps the user know they're focusing on that input. Worst case scenario I'll just keep it as is.
Here's a picture of what it looks like to have the first text area focused.
copy-paste-dialog.component.html
<h1 mat-dialog-title>Copy/Paste Parts From Excel</h1>
<div id="dialogInput" mat-dialog-content>
<div>
<h4>Part Numbers</h4>
<textarea rows="20" class="form-control" placeholder="Part Numbers" [(ngModel)]="result.supplierPNs" ></textarea>
</div>
<div>
<h4>Descriptions</h4>
<textarea rows="20" class="form-control" placeholder="Descriptions" [(ngModel)]="result.descriptions" ></textarea>
</div>
</div>
<div mat-dialog-actions class="dialogButtons" >
<button mat-raised-button color="primary" [mat-dialog-close]="result">Submit</button>
<button mat-raised-button color="warn" (click)="cancel()">Cancel</button>
</div>
copy-paste-dialog.component.css
.dialogButtons {
margin: 10px 0;
}
#dialogInput {
column-count: 2;
}
textarea {
resize: none;
}
if it doesn't matter for you, you can just use flexbox:
.dialogButtons {
margin: 10px 0;
}
#dialogInput {
display: flex;
width: 100%;
margin: 0 -10px;
}
textarea {
resize: none;
}
#dialogInput div {
flex: 1;
margin: 0 10px;
}
display: flex works likes a row, it puts the divs next to each other.
flex: 1 means it will take the remaining space, so by giving both the divs within #dialoginput, it will take the even amount of space, which in this case is 50%.
At last, I added some margin.
Flex-box instead of column-count: 2 will solve this issue
CSS Change
.dialogButtons {
margin: 10px 0;
}
#dialogInput {
display: flex;
}
#dialogInput textarea {
margin-right: 1em;
}
textarea {
resize: none;
}
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;
}