display: flex & justify-content: space-evenly - javascript

guys.
Just a question about CSS and javascript.
I have this code but I need to make the input areas centered.
For some reason they are not aligned even with the same length.
I know that the text size effects the position of the flex, but I didn't understand how.
Sorry for the silly question, I'm just starting to learn it.
<div class="playersDiv">
<div class="players player1">
<h2>Player Name</h2>
<div class="showInput">
<input type="playerInput1" name="playerInput1" id="playerInput1">
<button class="addPlayerBtn">Add Player</button>
</div>
</div>
<div class="scoreDiv">
<p>Input below the quantity of each tile in the end of the game:</p>
<div class="scoreItem">
<h3>Forest</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Town</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Production</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Factory</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
</div>
</div>
.scoreItem{
display: flex;
justify-content: space-evenly;
margin: 0 auto 0.5rem auto;
height: 2rem;
}
#fnum {
margin: 0 1rem;
}

Firstly, the fnum id should be a unique ID for one element on the page. In this instance you should use classes instead of id:
<input type="number" name="fnum" class="fnum">
Then, in your css you should use . instead of #:
.fnum {
margin: 0 1rem;
}
The name attribute should also be unique, as this is the way you will access the data from your backend. e.g.
<input type="number" name="production-fnum" class="fnum">
<input type="number" name="factory-fnum" class="fnum">
Presuming the CSS you have is written in a separate .css file, or in tags.
The space-evenly attribute is affected by the width of the elements,
You can add a fixed width to the h3 and input elements with:
h3 {
width: 150px;
}
input {
width: 150px;
}
or, you can give each h3 element a class and add the style to that, and style the fnum class we created earlier e.g.
<h3 class="label">Factory</h3>
.label{width: 150px}
.fnum{width: 150px}
Also, I would use a label instead of h3 (https://www.w3schools.com/tags/tag_label.asp)

I can offer such a solution. Set this rule in your css:
.scoreItem h3 {
width: 90px;
}
Where width 90px is the width of the longest tag h3 - Production.
.scoreItem{
display: flex;
justify-content: space-evenly;
margin: 0 auto 0.5rem auto;
height: 2rem;
}
#fnum {
margin: 0 1rem;
}
.scoreItem h3 {
width: 90px;
}
<div class="playersDiv">
<div class="players player1">
<h2>Player Name</h2>
<div class="showInput">
<input type="playerInput1" name="playerInput1" id="playerInput1">
<button class="addPlayerBtn">Add Player</button>
</div>
</div>
<div class="scoreDiv">
<p>Input below the quantity of each tile in the end of the game:</p>
<div class="scoreItem">
<h3>Forest</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Town</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Production</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Factory</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
</div>
</div>

Related

Showing / Hiding Div With jQuery

I'm using toggle() but it's not working. My script is in the footer:
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").toggle();
});
});
or I've also tried addClass():
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
Basically I'm just trying to toggle between showing and hiding the form divs.
When product-suggestion-form-container is clicked on, form-div-top should show.
When contact-us-form-container is clicked on, form-div-bottom should show.
Then they should hide when those divs are clicked on again.
Shouldn't clicking on product-suggestion-form-container cause form-div-top to become active and therefore to display: flex? Not sure why nothing's happening.
I was just getting the jQuery from here, but ideally I'd like to add a smooth transition and whatever other best practices you might suggest for doing this.
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
.form-div-outer {
margin: 10px 0;
}
.form-div-top,
.form-div-bottom {
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
/*initial display*/
.form-div-inner-top {
display: none;
}
.form-div-inner-bottom {
display: none;
}
.form-div-inner-top:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-div-inner-bottom:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-input {
margin: 10px 0;
padding: 5px;
border: none;
background-color: #ffffff;
width: 100%;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
<div class="form-div-outer">
<div class="contact-us-form-container">
<span class="form-title">Contact Us Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-bottom">
<form class="form-div-inner-bottom">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group input-group-contact-reason">
<div class="contact-reason-container">
<ul class="radiolist">
<li>
<input class="radio" type="radio"><label>Order question</label>
<input class="radio" type="radio"><label>Website feedback</label>
<input class="radio" type="radio"><label>Trouble finding product</label>
</li>
</ul>
</div>
</span>
</form>
</div>
</div>
It seems you have forgot .s in your code to access the data.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
});
});

vertically align content and scroll box when reached the browser height

I have a form that I want to be vertically centered and by clicking a link (addAnother) add an input to html each time and when reached the browser height scroll be applied to its container.
I'm using display: table-cell and overflow-y: scroll but then content is aligned in the middle.
<div class="row justify-content-center align-items-center">
<div class="col-12 col-sm-10 col-md-8 col-xl-6">
<div id="spaceTeammatesBox" class="space-box form animated fadeInLeft">
<div class="team-emails-outer">
<div class="team-emails-inner">
<h3 class="mb-4">{% trans "Who is on your team?" %}</h3>
<div class="form-group forms">
<input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
<span class="input-line" data-placeholder="Ex. name#example.com"></span>
</div>
<div class="form-group forms">
<input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
<span class="input-line" data-placeholder="Ex. name#example.com"></span>
</div>
<div class="form-group forms">
<input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
<span class="input-line" data-placeholder="Ex. name#example.com"></span>
</div>
</div>
<div>
<div class="add-teammate-link d-flex flex-row-reverse text-right">
{% trans "add another" %}
</div>
</div>
</div>
</div>
</div>
</div>
in js I have:
$('#addAnother').click(function() {
$('#spaceTeammatesBox').find('.form-group.forms').last().after(`
<div class="form-group forms">
<input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
<span class="input-line" data-placeholder="Ex. name#example.com"></span>
</div>
`);
});
in the css:
#spaceTeammatesBox {
background: lightblue;
display: table;
width: 100%;
}
.team-emails-outer {
display: table-cell;
width: 100%;
}
.team-emails-inner {
height: calc(100vh - 100px);
overflow-y: scroll;
}
How can I have vertical alignment and vertical scroll both at the same time in bootstrap 4?
Your help is appreciated in advance.
For this you could use two containers: one for placing things vertically and another for the scroll. In your cace I would add to <div class="team-emails-inner"> a new class centered-content. Then the content of this div I would wrap in another container with a class scroll-box. The css for the both classes looks like this:
.centered-content {
display: flex;
align-items: center; /* this vertically centers the child container */
}
.centered-content .scroll-box {
max-height: 100%; /* this prevents the scroll-box to overflow the height of the parent */
width: 100%; /* this pushes the scrollbar to the very edge of the box */
overflow: auto; /* and this allows the scroll to appear only when necessary */
}
The whole thing works like this (open it in full page):
$('#addAnother').click(function() {
$('#spaceTeammatesBox').find('.form-group.forms').last().after(`
<div class="form-group forms">
<input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
<span class="input-line" data-placeholder="Ex. name#example.com"></span>
</div>
`);
});
#spaceTeammatesBox {
background: lightblue;
width: 100%;
}
.team-emails-inner {
height: calc(100vh - 100px);
padding: 10px;
}
.centered-content {
display: flex;
align-items: center;
}
.centered-content .scroll-box {
max-height: 100%;
width: 100%;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row justify-content-center align-items-center">
<div class="col-12 col-sm-10 col-md-8 col-xl-6">
<div id="spaceTeammatesBox" class="space-box form animated fadeInLeft">
<div class="team-emails-outer">
<div class="team-emails-inner centered-content">
<section class="scroll-box">
<h3 class="mb-4">{% trans "Who is on your team?" %}</h3>
<div class="form-group forms">
<input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
<span class="input-line" data-placeholder="Ex. name#example.com"></span>
</div>
<div class="form-group forms">
<input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
<span class="input-line" data-placeholder="Ex. name#example.com"></span>
</div>
<div class="form-group forms">
<input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
<span class="input-line" data-placeholder="Ex. name#example.com"></span>
</div>
</section>
</div>
<div>
<div class="add-teammate-link d-flex flex-row-reverse text-right">
{% trans "add another" %}
</div>
</div>
</div>
</div>
</div>
</div>

Append child not working with newly created element

I want to append child to a div.
<div class="d-flex quantityReceived" id="quantityReceived">
<button type="button" class="btn btn-info changeValue" onclick="allOrderType()"><div id="spinner"><i class="fas fa-caret-down"></i></div></button>
<input name="order" class="typeahead orderType form-control" type="text" id="allOrderType" aria-describedby="Incomplete Orders" placeholder="Incomplete Orders">
</div>
Here is my javascript to append to the id quantityReceived
console.log(a)
document.getElementById("quantityReceived").appendChild(a);
The element a is a combination of elements like this which I can see in the google console.
<div id="autocomplete-list" class="auocomplete-items>
<div>
"Main"
<input type="hidden" value="main">
</div>
<div>
"Sub"
<input type="hidden" value="Sub">
</div>
</div>
However, when I inspect the parent div with id quantityReceived, I do not see the child element a being appended. I am not sure why this is happening
The html that you're attempting to append is incorrect.
You need to close the input, so it should look like this:
<div id="autocomplete-list" class="auocomplete-items>
<div>
"Main"
<input type="hidden" value="main"/>
</div>
<div>
"Sub"
<input type="hidden" value="Sub"/>
</div>
</div>
You can then check the result
console.log(document.getElementById("quantityReceived"));
At first glance, and just taking a guess since your example is lacking in detail, but I would guess that a isn't actually a thing to append correctly. So as a proof of concept to maybe trigger a light bulb to you on your issue;
const child = document.createElement('aside');
document.getElementById('test1').appendChild(child);
div {
height: 5rem;
width: 10rem;
border: red 1px dashed;
padding: .5rem;
margin: 1rem auto;
}
div aside {
height: 1rem;
width: 3rem;
border: green 3px dotted;
padding: .5rem;
margin: 0 auto;
}
<div id="test1"></div>
Besides that your HTML-to-be-appended is invalid, I think it should not be a problem (if indeed that HTML is a DOM node and not a string!), see:
let a = document.createElement('div');
a.setAttribute('class', 'autocomplete-items');
a.setAttribute('id', 'autocomplete-list');
a.innerHTML = `
<div>
Main
<input type="hidden" value="main" />
</div>
<div>
Sub
<input type="hidden" value="sub" />
</div>
`;
document.getElementById("quantityReceived").appendChild(a);
<div class="d-flex quantityReceived" id="quantityReceived">
<button type="button" class="btn btn-info changeValue" onclick="allOrderType()">
<div id="spinner">
<i class="fas fa-caret-down"></i>
</div>
</button>
<input name="order" class="typeahead orderType form-control" type="text" id="allOrderType" aria-describedby="Incomplete Orders" placeholder="Incomplete Orders" />
</div>

No color on hover

I can't seem to figure out why the remaining 3 tabs don't have colors when I hover my mouse. The first 3 are working properly but the remaining 3 are not. I only made adjustments on their margins and nothing more. I just like to put code on my Blogger blog because its quite helpful. Below are the codes I'm having problems with. They are working on the console but when I put it on my blog the hover effect is not there.
p {
margin-top: -30px;
}
.ctc-txt.bg_ffffff.br6 {
width: 642px;
height: 200px;
}
.clr-txt {
top: 160px;
}
.text-center.ct-case.mb10 {
display: flex;
align-items: right;
justify-content: center;
margin-top: -20px;
margin-left: 120px;
}
.counter {
margin-left: -14px;
}
#copyStr {
margin-left: 260px;
margin-top: -10px;
}
#text {
top: -30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/Dieffer/test1/master/mycss.css">
<form method="post" id="text" action="">
<p class="">
Type or Paste your text here to change text case
</p>
<div class="relative">
<textarea class="ctc-txt bg_ffffff br6" name="form_content" id="form_content" onclick="cont()"> </textarea>
<img class="clr-txt" onclick="resete()" src="https://smallseotools.com/asets/images/cleartext.svg">
</div>
<div class="col-lg-12 col-sm-12 pn pt5 pb5">
<div class="button_box h-a">
<div class="counter">
<label>Character Count: <span id="cc"> 0 </span></label>
<label>- Word Count: <span id="wc"> 0 </span></label>
</div>
</div>
</div>
<div class="text-center ct-case mb10" id="ctc_button_box">
<input name="toggle" class="button ctc-btn br6" type="button" id="toggle" value="tOGGLE cASE">
<input name="sentence" class="button ctc-btn br6" type="button" id="sentence" value="Sentence case">
<input name="lower" class="button ctc-btn br6" type="button" id="lower" value="lower case">
<input name="" class="button ctc-btn br6" type="button" id="upper" value="UPPER CASE">
<input name="capitalized" class="button ctc-btn br6" type="button" id="capitalized" value="Capitalize Word">
<input name="alternating" class="button ctc-btn br6" type="button" id="alternating" value="aLtErNaTe cAsE">
</div>
</form>
Have you tried to clean your browser-cache?
Since the Code works just fine, maybe that could cause the problem.

Elements in bootstrap filterbar not correctly sized

I'm building a filter on top of my grid. I defined a custom filter class. In this filterclass I also try to incorperate a checkbox that is in the same style as my inputbox. For some reason I cannot get it the same size as the rest of my elements. Below the fiddle of what I'm doing. Can someone point me out what I'm doing wrong?
http://jsfiddle.net/52VtD/6763/
<div class="FilterBar">
<div>
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon ">Set date</span>
<input type="text" class="form-control" />
<span class="input-group-addon">to</span>
<input type="text" class="form-control" />
</div>
</div>
<div>
<div class="input-group">
<span class="input-group-addon ">Group Flocks</span>
<span class="input-group-addon">
<input type="checkbox"/>
</span>
</div>
</div>
<div class="pull-right">
<button type="button" class="btn btn-warning pull-right">Filter</button>
</div>
.FilterBar {
position: relative;
display: table;
}
.FilterBar > div {
display: table-cell;
padding-right: 8px;
vertical-align: top;
}
.Toolbar .btn-group, .Toolbar .btn-group-vertical {
vertical-align: inherit;
}
.form-control has line-height: 1.42857;
.input-group-addon has line-height: 1;
See http://jsfiddle.net/52VtD/6766/ I added
.input-group-addon {
line-height: 1.42857;
}
U can add class "form-control" to Group Flocks and add one more class .some with line-height: 20px;
HTML
<div class="input-group">
<span class="input-group-addon form-control some">Group Flocks</span>
<span class="input-group-addon"> <input type="checkbox"/> </span>
</div>
And CSS:
.some {
line-height: 20px;
}
http://jsfiddle.net/52VtD/6764/ this is not the best solution
u can try to put all your line in div with class="row" and give all tabs some sizes like .col-xs-4

Categories