I am trying to give some margins between the buttons (Reset Filter/Apply Filter/Save & Apply Filter)in UI, I have used flex to align the buttons, but I am not able to give some margins/gaps between the buttons.
Any idea how to do it
Code :
<div class="d-flex flex-column justify-space-around">
<v-btn
text
style="margin-left: 30px"
color="primary"
#click="resetFilter()">
Reset Filter
</v-btn>
<v-btn
v-if="!updatingSavedFilter"
color="primary"
#click="
applyFilter()
filterDropdownOpen = false">
Apply Filter
</v-btn>
<v-btn
color="primary"
#click="
validateAndSaveFilter()
filterDropdownOpen = "false">
Save & Apply Filter
</v-btn>
</div>
It appears you're using Vuetify, am I right? In that case, you could add a margin class to each button:
<v-btn
text
style="margin-left: 30px"
color="primary"
class="mb-2"
#click="resetFilter"
>
Reset Filter
</v-btn>
See Vuetify's spacing documentation.
On another subject: try to avoid inline style. Better add a class. In this case you can have something like
class="mb-2 ml-7"
That will give you 8px margin on the bottom and 28px margin on the left.
Also, when passing function name to #click, don't execute it, only pass the name (see my example above).
You have to set a height to be able to use justify-content: space-around. Like in this example:
.box {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 300px;
}
.box button {
height: 50px;
width: 200px;
}
<div class='box'>
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>
Or you can use the new gap property.
.box {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 20px;
}
.box button {
height: 50px;
width: 200px;
}
<div class='box'>
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>
Or just set a margin-top
.box {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.box button {
height: 50px;
width: 200px;
}
.box button:not(:first-child) {
margin-top: 20px;
}
<div class='box'>
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>
There is a universal css solution to set gap between flex items using the following CSS, instead of adding styles/classes to each child element:
.d-flex{
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px; /* sets only for rows */
column-gap: 20px; /* sets only for columns */
}
Reference:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
Related
I have a flex container that contains several items that have the flex-grow property set to 1 and a certain max-width.
I want to add an event listener to the group of items, but I do not want the event to fire if the event location is in the empty space of the flex container. For example, for a click event, I want the event to fire only if the blue space of the image below is clicked.
If I add the event listener to the parent container, the event fires even if I click the purple. If I add the event listener to the child items, the event does not fire when if I click on the margins of the items. In addition, for events like onmouseenter or onmouseleave, the event fires 3 times if I move my mouse over all the items, whereas my desire is for it to only fire once.
Here is a snippet of the current scenario:
$(".flex-container").on("mouseenter", () => {
$("#hidden").show();
})
$(".flex-container").on("mouseleave", () => {
$("#hidden").hide();
})
$(".flex-item").on("mouseenter", () => {
$("#hidden2").show();
})
$(".flex-item").on("mouseleave", () => {
$("#hidden2").hide();
})
.flex-container {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 5px;
padding: 5px;
}
.item-container {
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}
.flex-item {
padding: 5px;
margin: 10px;
outline: 1px solid black;
flex: 1 1 auto;
height: 24px;
max-width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
#hidden, #hidden2 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-container">
<div class="flex-item">
1
</div>
<div class="flex-item">
2
</div>
<div class="flex-item">
3
</div>
</div>
<div id="hidden">
Flex Container Hovered
</div>
<div id="hidden2">
Flex Item Hovered
</div>
Adding an extra flex container as a wrapper achieves close to the intended effect, but the intention of the flex-grow property of the items is not preserved, as seen below.
The items do not grow to the max-width of the items to fill up the outer box. Here is a snippet of the above scenario:
$(".flex-container").on("mouseenter", () => {
$("#hidden").show();
})
$(".flex-container").on("mouseleave", () => {
$("#hidden").hide();
})
$(".flex-item").on("mouseenter", () => {
$("#hidden2").show();
})
$(".flex-item").on("mouseleave", () => {
$("#hidden2").hide();
})
$(".extra-wrapper").on("mouseenter", () => {
$("#hidden3").show();
})
$(".extra-wrapper").on("mouseleave", () => {
$("#hidden3").hide();
})
.flex-container {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 5px;
padding: 5px;
}
.extra-wrapper {
display: flex;
}
.item-container {
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}
.flex-item {
padding: 5px;
margin: 10px;
outline: 1px solid black;
flex: 1 1 auto;
height: 24px;
max-width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
#hidden, #hidden2, #hidden3 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-container">
<div class="extra-wrapper">
<div class="flex-item">
1
</div>
<div class="flex-item">
2
</div>
<div class="flex-item">
3
</div>
</div>
</div>
<div id="hidden">
Flex Container Hovered
</div>
<div id="hidden2">
Flex Item Hovered
</div>
<div id="hidden3">
Extra Wrapper Hovered
</div>
How do I add an event listener to the items in a flex container when the items have a flex-grow and a max-width property?
Try this: https://jsfiddle.net/sean7777/zngdr51k/11/
How 2 make it work
It works because since margin does not count in mouseleave and mouseenter events, we use a wrapper element around the flex-item, wrap. The wrapper then gets assigned padding, and you attach the event listener to the wrapper.
This way you can simulate margin as padding and make it work with the event listner.
Note that you will have to assign width and height to the box. In the example, if you remove the width/height, it won't look right.
Building upon the suggested answer from #ourmandave, I came up with the following solution.
In this solution, I added a pseudo element to each flex-item so that I could include the elements' margins in the events' "hot spots" as they were called. I then used additional logic to prevent the event handlers from repeated triggers by using the event's related target. By checking where the cursor used to be upon mouseleave or mouseenter events, one can prevent the event handlers from being fired again when the mouse moves from one flex item to another flex item. This solution still preserves the desired effects of flex-grow and max-width.
$(".flex-container").on("mouseenter", () => {
$("#hidden").show();
})
$(".flex-container").on("mouseleave", () => {
$("#hidden").hide();
})
$(".flex-item").on("mouseenter", (e) => {
if (e.relatedTarget.className === "flex-item") return;
console.log('mouseenter fired');
$("#hidden2").show();
})
$(".flex-item").on("mouseleave", (e) => {
if (e.relatedTarget.className === "flex-item") return;
console.log('mouseleave fired');
$("#hidden2").hide();
})
.flex-container {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 5px;
padding: 5px;
}
.item-container {
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}
.flex-item {
padding: 5px;
margin: 10px;
outline: 1px solid black;
flex: 1 1 auto;
height: 24px;
max-width: 24px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.flex-item::before {
content: '';
position: absolute;
inset: -10px -10px -10px -10px;
}
#hidden, #hidden2 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-container">
<div class="flex-item">
1
</div>
<div class="flex-item">
2
</div>
<div class="flex-item">
3
</div>
</div>
<div id="hidden">
Flex Container Hovered
</div>
<div id="hidden2">
Flex Item Hovered
</div>
Trying to create something like this text that wraps onto more than one line and with the checkbox vertically centered relative to the lines.
Current code:
<div className = 'terms'>
<IonCheckbox/>
<span> paragraph </span>
</div>
CSS:
.terms {
margin-top: 10vw;
font-style: italic;
ion-checkbox {
margin-right: 2vw;
}
}
I need the paragraph to be a left aligned block. Instead it just wraps around the checkbox. I've tried using a variety of of things like float: left on the check-box, display: block
Use slot option in IonCheckbox
<IonItem>
<IonLabel ><i>paragraph </i></IonLabel>
<IonCheckbox slot="start" />
</IonItem>
The easy way is to stick everything into a flexbox. I don't have ionic here but it should work fine. Wrap the checkbox with a div if necessary.
<div className = 'terms' style="display:flex">
<div><input type="checkbox"></div>
<span> paragraph </span>
</div>
I think you use flexbox;
display: flex;
justify-content: flex-start;
flex-direction: row;
ion-checkbox {
vertical-align: top;
margin-right: 5px;
}
span {
display: inline-block;
width: 80%;
font-style: italic;
color: grey;
}
I'm not sure how i gonna ask this, but here it goes, i'm training css and i'm literally copying some random layout, and i find this website where he's using a padding outside the div (pic1, pic2), this way his content keeps centralized, what i want to know is how can i do this, my way (pic3, pic4) as you can see the padding keeps inside the div (which holds my section producs) making the section not centralized.
pic1
pic2
pic3
pic4
tsx
<div className={styles.sectionHeader}>
<h1>Top Picks</h1>
Ver todos
</div>
<div className={styles.sectionWithTopPicks}>
<div className={styles.eachItemSection}>
<Image src={img1} width={800} height={800} layout="responsive" />
<p>texto do produto</p>
<h5>R$ 50,00</h5>
</div>
<div className={styles.eachItemSection}>
<Image src={img1} width={800} height={800} layout="responsive" />
<p>texto do produto</p>
<h5>R$ 50,00</h5>
</div>
<div className={styles.eachItemSection}>
<Image src={img1} width={800} height={800} layout="responsive" />
<p>texto do produto</p>
<h5>R$ 50,00</h5>
</div>
<div className={styles.eachItemSection}>
<Image src={img1} width={800} height={800} layout="responsive" />
<p>texto do produto</p>
<h5>R$ 50,00</h5>
</div>
</div>
</div>
scss
.productBox {
display: block;
position: relative;
box-sizing: border-box;
height: 700px;
width: 100%;
background: saddlebrown;
padding: 0 40px 0 40px;
h1 {
font-size: 4rem;
}
}
.sectionHeader {
display:flex;
justify-content: space-between;
a {
font-size: 32px;
font-weight: 400;
font: sans-serif;
}
}
.eachItemSection{
width:25%;
height: 500px;
padding: 0 0 0 22px;
img{
align-self: center;
width:
}
}
.sectionWithTopPicks{
padding-top: 50px;
flex-wrap: wrap;
background: black;
display: flex;
justify-content: space-around;
p {
color: white
}
h5 {
color: white
}
}
I understand your objective, but you have to adjust the code.
With the flexbox approach, you can:
Use a flex-div to hold your items with: .sectionWithTopPick { display: flex; }
Inside it, use a div to hold the content, and tell the div how to fit the parent flex-box with flex-grow: 0; flex-shrink: 1; flex-basis: 25% (this tells to the inside div to never grow beyond 25%, but to shrink if necessary). This div also has the padding.
Select the first item with :fisrt-child and remove left-padding
Select the last item with :last-child and remove right-padding
Use another div to contain the item's contents, and make it's image fill 100% of the space.
Here a codepen with working solution
How you can see here the CSS box-model explain that padding and border are part of the html element.
You can also play here. So you can use margin if you want a space outside the div.
For align i can advise to use margin-left: auto; margin-right:auto;
I agree with Ale Macedo's answer but I'd make the following changes.
.eachItemSection {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 25%;
display: flex;
flex-direction: column;
padding: 2vh .5vw;
&:first-child {
padding-left: 1vw;
} &:last-child {
padding-right: 1vw;
}
I have this div with three inner divs.
ONE - I am div TWO - I am div THREE - I am div
But in mobile it can only fit two divs in a row horizontally, I need divs after 2nd to step down.
Like this:
ONE - I am div TWO - I am div
THREE - I am div
How do I do this?
I am using flex.
Edit
I have added HTML code.
I am using React and other UI component and I tried to minimize it in HTML. It's something like this right now.
<div class="parent">
<div class="child">
<span>ONE</span>
<p>I am div</p>
</div>
<div class="child">
<p>TWO</p>
<p>I am div</p>
</div>
<div class="child">
<span>THREE</span>
<p>I am div</p>
</div>
<div>
.parent {
display: flex;
justify-content: space-around;
margin-bottom: 3rem;
white-space: nowrap;
}
.child {
display: flex;
align-items: center;
margin-left: 1rem;
margin-right: 1rem;
}
You can use flex-wrap to continue on the next line. justify-content will center the div
.outer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Styles below are for demonstration purposes */
.inner {
height: 50px;
width: 300px;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
<div class="outer">
<div class="inner red">A</div>
<div class="inner green">B</div>
<div class="inner blue">C</div>
</div>
This will work for responsive layout, and it also permits them to fit in one line, if the screen size allows it. You can use media query to set it for mobile only.
.outer{
display: flex;
flex-flow: wrap;
text-align: center;
}
.inner{
flex-grow: 1;
}
I'm needing to create CSS classes that can display content similar to this design image here: design concept
Obviously, the code statements themselves don't matter. But how can I create CSS that could wrap the containing content as seen in the image and have that work to n nested containers? I've been playing around with div tags and display: inline-block styling but nothing is working out.
Here is what I currently have, using flex-box. This is almost what I need except that the "rows" aren't setting their width to fit the text content as it just sets the width of everything to the largest width child... seems that this approach might not be possible.
.container {
display: inline-flex;
flex-direction: column;
padding-left: 15px;
}
.containerRow {
display: flex;
flex-direction: column;
justify-content: center;
height: 35px;
margin: 5px;
}
.dropContainer {
height: 70px;
border: 1px solid #ccc!important;
background-color: white;
color: black;
}
.purple {
background-color: #872A61;
color: white;
}
.green {
background-color: #478B26;
color: white;
}
<div class="container purple">
<div class="containerRow">
if (something == true) then
</div>
<div class="container green">
<div class="containerRow">
<div><b>where</b> something(x: Number, y:Number) <b>is</b></div>
</div>
<div class="dropContainer">
Some more stuff again
</div>
<div class="dropContainer">
Some more stuff again
</div>
<div class="containerRow">
<b>end</b>
</div>
</div>
<div class="containerRow">
<b>end</b>
</div>
</div>
Use margins or padding styles with percentages to achieve the nth term.