I have created one travel page via HTML and CSS and I have added button to add another trip in the same but after clicking on the button more than 5 times the form is getting out of region. It seems the issue is coming from styles but i am unable to figure out the same.
Click here to replicate the issue
<div class="form-row">
<button class="btn btn-primary" type="button" onclick="displayResult()">Add another trip</button>
</div>
Check your JSFiddle and found the issue.
You have to add following class in your css.
form .form-row{margin-left: 0;}
you have this in your css :
.form-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
}
here margin-left: -5px makes the content moves to left every time the element is created then change margin-left: -5px' tomargin-left: 0px`.
After changing Css your css will look like this
.form-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: 0px;
}
It seems like the way you are adding the new form sections when clicked on the 'Add another trip' is wrong. The <div class="form-new" id="space"></div> element that you have placed to insert the new form section is inside the previous <div class="form-row"></div>. You should not place it there but just after it. Try to understand with this example.
This is what you have now.
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row">
<div class="form-new" id="space"></div>
</div>
Try making it this way,
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-new" id="space"></div>
Related
I have these 2 children elements and I want them on the right side(I have that working just fine), but now I want to add more space between them and having a hard time to get that to work. Can someone tell me what I'm missing, please? thanks
section {
background: yellow;
display: flex;
justify-content: flex-end;
}
<section>
<button>Cancel</button>
<button>Confirm</button>
</section>
gap property can help you
section {
background: yellow;
display: flex;
justify-content: flex-end;
gap: 5px;
}
dont create more containers if you can avoid this. This is my principle
You can assign a default class to your buttons, or set a new class to your elements, and specify (for example) a margin that will be applied.
consider the following example:
section {
background: yellow;
display: flex;
justify-content: flex-end;
}
.elementContainer{
margin: 5px;
}
<section>
<div class='elementContainer'>
<Button variant="secondary">Cancel</Button>
</div>
<div class='elementContainer'>
<Button variant="primary">Confirm</Button>
</div>
</section>
This will add a 5px margin around each item with the element class.
you may change this style according to your needs.
You can use column-gap
So try this:
HTML:
<section>
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Confirm</Button>
</section>
CSS:
section {
background: yellow;
display: flex;
justify-content: flex-end;
column-gap: 10px;
}
i have a bunch of repeating cards:
<div id="container">
<div class="card">
<div class="card_img"><img src="/img.jpg"></div>
<div class="card_text">Title</div>
<div class="card_moreinfo">More info</div>
</div>
...
<div class="card">
<div class="card_img"><img src="/img.jgp"></div>
<div class="card_text">Title</div>
<div class="card_moreinfo">More info</div>
</div>
</div>
the container style is something like:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
the card style is something like:
.card {
flex: 0 0 13em;
}
my goal is to have the more info text (div), appear when i hover the card; since the cards contain a product coming from the database i can surely add the product id as class both in card and in moreinfo and target it by name with a javascript, but im wondering if i can change the display of the div, targeting it as the child of the div im hovering
.card_moreinfo {
display: none;
}
.card_moreinfo:hover + card_moreinfo{
display: block;
}
source: Using only CSS, show div on hover over <a>
You need to use the :hover for displaying or hiding the child.
Example;
.card_moreinfo{
display: none;
}
.card:hover .card_moreinfo{
display:block;
}
.card {
flex: 0 0 13em;
}
.card:hover {
/*add your css*/
}
Before you mark duplicate, I have read other posts on this topic, but my code is slightly different and I couldn't find one answering the way I did it.
<div id="appB" class="containerB">
<div class="col-lg-6 col-md-12 order-first res-m-bttm-lg">
<card data-image="https://www.worldatlas.com/r/w728-h425-c728x425/upload/23/08/01/shutterstock-104644850.jpg">
<h1 slot="header">Spain</h1>
<p slot="content">Bet On Spain's Team playing against Portugal.</p>
<p slot="content">ETj9Qy3r5DyXw87qEHyp5gXhruFMuicEUR</p>
</card>
</div>
</div>
CSS:
.containerB {
padding: 40px 80px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
Rest of CSS: CSS Code (pastebin)
JS: Javascript Code (pastebin)
Linking to a third-party site because the javascript was long and looked bad and would of been crowded.
This is how I set my card's background, but for some reason, it is off-center and for some reason it is showcasing some empty space.
If anyone can explain a solution, that would be very helpful.
Try this code
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Heads up only been doing this for a couple days.
I have a form with one text field and one button. Trying to center the text field and button side by side inside of my form.
.row {
width: 100%;
margin-bottom: 20px;
display: flex; flex-wrap: wrap;
}
.col-6 {
width: 50%;
}
.form {
margin 0 auto;
display: block;
}
<div class='grid'>
<div class='row'>
<div class='col-6'>
<form class='form'>
<input type ='text' name='userGuess' class='userGuess'/>
<button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
</form>
</div>
</div>
</div>
I tried a lot of different things and nothing seems to work how I want it too.
Note: Not entire CSS code, just basic framework so I didn't paste all of it.
thanks.
Add justify-content: center; to your .row. Then read this article.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I added a Div to Contain the two.
Here is the updated CSS with class Container.
.row {
width: 100%;
margin-bottom: 20px;
display: flex; flex-wrap: wrap;
}
.col-6 { width: 50%; }
.form {
margin 0 auto;
display: block;
}
.container{
width:100%;
padding:1%;
}
Here is your updated HTML with the new Div in it.
<div class='grid'>
<div class='row'>
<div class='col-6'>
<form class='form'>
<div class="container">
<input type ='text' name='userGuess' class='userGuess'/>
<button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
</div>
</form>
</div>
</div>
</div>
I have a situation where I have a list of divs with a specific order that need to be rendered in quite a complex way. In simple terms, this is my HTML:
<div>
<div class="box">1 (first in list)</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9 (last in list)</div>
</div>
The way in which I want to display the divs is in rows of 4 from left to right, with each row stacked from bottom to top, like this:
9
5 6 7 8
1 2 3 4
I have created a fiddle of the result that shows what I'm after: http://jsfiddle.net/mpcjs/ - However, I would like a solution that doesn't require re-ordering of the divs in the HTML. Also note that the number of divs is variable.
Is this even possible? CSS3/jQuery solutions are welcome!
This is possible using the jQuery Plugin jQuery Masonry.
Replace this (starting at line 287)
var position = {
top: minimumY + this.offset.y
};
with
var position = (this.options.fromBottom) ? {
bottom: minimumY + this.offset.y
} : {
top: minimumY + this.offset.y
};
jsFiddle: http://jsfiddle.net/fnexE/
You should look into flexbox. Here's a fiddle demonstrating how it would work, with the caveat that I have only tested it in Chrome.
.flex{
width:400px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;}
This is not a viable solution, yet, but with chrome and safari you can use writing-mode in CSS3. Check out the w3-dev section on vertical text.
.row {
writing-mode: bt-rl;
}
.box {
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/mpcjs/4/
I am unsure how to stack the DIVs from the bottom, but this will reverse them:
HTML:
<div>
<div>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box'>7</div>
<div class='box'>8</div>
<div class='box'>9</div>
</div>
</div>
CSS:
.box{
float:left;
border:1px solid #000;
width:22%;
margin:1%;
}
jQUERY:
$('div > .box').each(function() {
$(this).prependTo(this.parentNode);
});
If you want a pure CSS solution, it would like that:
the basic HTML
<div class="container">HOVER ME!
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
<div class="inner">four</div>
<div class="inner">five</div>
<div class="inner">six</div>
<div class="inner">seven</div>
</div>
and we float the inner to the right:
.inner {
float: right;
width: 100px;
height: 100px;
background-color: lightsalmon;
margin: 5px;
font-size: 20px;
}
That's all !
Well, not all, you still need to hover
.container:hover,
.container:hover div {
-webkit-transform: rotate(180deg);
-webkit-transition: all 3s;
}
Well, that was only to make it a little fun, but the efect is nice, isn't it ?
test it