I have a div which contains 2 child elements. The 1st div have content added dynamically via jQuery on user interaction. The 2nd is a text area which have a problem not getting contained within its parent div.
<div class="organizer_email_address">something#gmail.com</div> is added via jQuery after the user selects some options and click on a button.
I tried the clearfix method but it does not cause the parent div to contain the 2nd child completely. Please have a look and see what went wrong, thanks!
HTML
<div id="organizer_email_container">
<div id="organizer_email_addresses_container">
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
</div>
<textarea id="organizer_email_template" class="clearfix">Some text </textarea>
</div>
CSS
#organizer_email_container {
width: 800px;
min-height: 130px;
height: auto;
margin: 25px auto;
padding: 25px;
background: #FAFAFA;
display: none;
}
#organizer_email_template {
width: 500px;
height: 120px;
background: #F6F6F6;
color: #666;
font-size: 13px;
padding: 7px 10px;
border: 1px solid #B9B9B9;
border-top-color: #A4A4A4;
-moz-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-ms-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-webkit-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float: left;
clear: both;
}
.organizer_email_address {
background-color: #F3F7FD;
border: solid 1px #BBD8FB;
vertical-align: middle;
font-size: 12px;
color: #2A2A2A;
padding: 2px 5px 2px 7px;
margin: 1px;
float: left;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Why do you have a display:none on the #organizer_email_container?
Looks fine to me: http://cl.ly/1c361c0G3r0G1U0p3J0P
-
You should put your class="clearfix" in the parent container, not as a class of your text area.
Related
I have a "main-div" with specific height and a dropdown on bottom part inside it. The dropdown is causing extra scroll. Is there any way to stop causing scroll and make it overlap through the parent div?
(height and properties of the main div cannot be changed in my real situation)
.main-div{
height: 300px;
width: 600px;
overflow-y: scroll;
border: 2px solid #404040;
}
.dropdown {
position: relative;
display: inline-block;
margin-bottom: 10px;
margin-top: 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #109fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.other-content{
height: 280px;
background-color: rgb(80, 210, 166);
}
.button-1{
background-color: #180f37;
padding: 10px;
border: #0f1c40;
color: #fff;
}
<div class="main-div">
<div class="other-content">
<h4>Scroll down to see the button</h4>
</div>
<div class="dropdown">
<span class="button-1">Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</div>
There is one popup. Selected installments are displayed in this pop-up. The user can choose as many installments as he/she wants. Selected installments have a border bottom. But I don't want the last item to be border bottom. I tried many ways but failed.
html
<div className="installmentinfo__container only-desktop">
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{billDate}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
</div>
css
.installmentinfo__container.only-desktop {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
background-color: white;
top: 210px;
margin: auto;
transform: translateX(-280px);
padding: 0.3em;
z-index: 999;
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}
.installmentnumber {
float: left;
}
.installmentdate {
width: 50%;
color: black !important;
}
.installmentamount {
width: 50%;
color: black !important;
font-weight: 1000;
}
}
}
What i tried;
.column:last-child{
border-bottom: none;
}
.last-child{
border-bottom: none;
}
&:last-of-type {
border-bottom: none;
}
Use the last-of-type pseudo selector to remove the last item style
.column > div:last-of-type {
border-bottom:none;
}
For More Details https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
psuedo-lastchild is not the last child of a parent container rather last child of a class.so what i did was gave all three segments a same class of segments for targeting the border side of the css and id for other css that was different from each other.
.installmentinfo__container.only-desktop {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
/* position: absolute; */
background-color: white;
/* top: 210px; */
margin: auto;
/* transform: translateX(-280px); */
padding: 0.3em;
z-index: 999;
}
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
}
.column {
display: flex;
flex-direction: column;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
/* border-bottom: 1.5px solid #d1d1d1; */
padding-bottom: 5px;
}
#installmentnumber {
float: left;
width: 50%;
}
#installmentdate {
width: 50%;
color: black !important;
}
#installmentamount {
width: 80%;
color: black !important;
font-weight: 100;
}
.segments{
border-bottom: 1.5px solid #d1d1d1;
}
.segments:last-child{
border-bottom: none;
}
<body>
<div class="installmentinfo__container only-desktop">
<div class="installmentinfo">
<div class="column">
<div class="segments" id="installmentnumber" >{(i+1).toString()}</div>
<div class="segments" id="installmentdate">{billDate}</div>
<div class="segments" id="installmentamount">{e.amount}{e.currency}</div>
</div>
</div>
</div>
</body>
In your snippet your are giving border bottom to .column class and then you are try to overwrite it with border none with :last-child selector instead you can do like this,
If your are thinking about repeating .column div then you can use following snippet
.column:not(:last-of-type){
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}
In can you want to repeat .installmentinfo div multiple times and you want to give border bottom to column when .installmentinfo isn't a last div then you can use following snippet
.installmentinfo:not(:last-of-type) .column{
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}
Within my index.html, I have created the following div, which is located within the center tag.
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
This looks like this on the page: [Progress Bar Image]1
I would like the blue bar, to be positioned to the left of this container.
Below is my CSS:
/* Progress Bar */
.container {
width: 400px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0,0,0,.2);
}
.bar-fill {
height: 20px;
display: block;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
Once again, I would like the blue bar (div labelled bar or bar fill) to be positioned to the left inside the container.
Thanks.
Simply add margin-left: 0px; to .bar-fill
.container {
width: 400px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}
.bar-fill {
height: 20px;
display: block;
margin-left: 0px;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
The element is already left based on the code provided.
There is no center tag in your HTML and, in any event, the tag has been deprecated and should no longer be used.
.container {
width: 400px;
margin:auto; /* center the container */
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}
.bar-fill {
height: 20px;
display: block;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
If the container div is inside a <center> tag which cannot be removed then setting the text-align of the tag to left should have the desired effect.
JSFiddle Demo
I have a small piece of code and i wanted to know that how can I do when I click on outside div class="gutte" and this div should be go focusout. I snippet my code down and this is not focusout when I click on outside of div class="gutte" (or <body> ) and i cannot use input type[text]. When I click on btn1 div class="gutte" focus but one I click on another part (in input type text) it goes focusout.. How could I do this ? I am using jQuery framework.
var tt = $.noConflict();
tt(document).ready(function($) {
$(".qta").focus(function() {
$(".gutt").css({
'display': 'inline-block'
});
$(".gutte").addClass('grandisciti');
});
$(".gutte").focusout(function() {
$(".gutt").css({
'display': 'none'
});
$(".gutte").removeClass('grandisciti');
});
});
body {
width: 100%;
height: 100%;
background-color: #c1c2c3;
}
.gutte {
box-sizing: border-box;
position: relative;
display: block;
width: 550px;
height: 50px;
background-color: #fff;
color: #000;
margin: 0px;
padding: 0px;
margin-left: 32%;
margin-top: 30px;
padding-top: 2.5px;
padding-left: 1px;
padding-bottom: 2px;
border-radius: 10px;
border-radius: 10px;
text-align: center;
}
.ati {
box-sizing: border-box;
position: static;
display: inline-block;
width: 105px;
height: 45px;
margin: 0px;
padding: 0px;
padding: 0px 10px;
border: none;
background-color: #ccc;
/*border:2px solid #ccc;*/
border-radius: 10px;
outline: none;
cursor: pointer;
transition: 0.8s all;
font-size: 120%;
color: #000;
}
.grandisciti {
width: 600;
height: 300px;
-webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
}
.gutt {
display: none;
width: 530px;
margin:10px;
background-color: #000;
}
.tref {
display: inline-block;
width: 80%;
height: 100px;
resize: none;
outline: none;
padding: 10px;
margin: 15px;
border: 5px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body
<div tabindex="1" class="gutte">
<div class="irj fjr_p05gure rddre ">
<button class="ati qta ">btn1</button>
<button class="ati ">btn2</button>
<button class="ati ">bt3</button>
</div>
<span class="gutt">
<input type="text" class="tref"/>
</span>
</div>
When you focus in a element, any element that has focused make focusout, then target element make focused. See this example for better understanding.
$("input").focus(function(){
console.log(this.name + " focused");
}).blur(function(){
console.log(this.name + " blured");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="A" />
<input name="B" />
<input name="C" />
You need to add focus event to any button like this:
Answer:
Jsfiddle
I have written small piece of code where i have a div container and in that div has spans and forms textbox btns. when i click on btn1, container height increase and show an textbox but when i click on textbox div goes focus out. How is possible that when i click on btn1 and its stay focus in even i click on textbox(after click on btn1 and show blackbox) it shouldnt goes focusout and when i click out site of container it should goes focusout ? how can i do please help me ?
var tt = $.noConflict();
tt(document).ready(function($) {
$(".qta").focus(function() {
$(".gutt").css({
'display': 'inline-block'
});
$(".gutte").addClass('grandisciti');
});
$(".gutte").focusout(function() {
$(".gutt").css({
'display': 'none'
});
$(".gutte").removeClass('grandisciti');
});
});
body {
width: 100%;
height: 100%;
background-color: #c1c2c3;
}
.gutte {
box-sizing: border-box;
position: relative;
display: block;
width: 550px;
height: 50px;
background-color: #fff;
color: #000;
margin: 0px;
padding: 0px;
margin-left: 32%;
margin-top: 30px;
padding-top: 2.5px;
padding-left: 1px;
padding-bottom: 2px;
border-radius: 10px;
border-radius: 10px;
text-align: center;
}
.ati {
box-sizing: border-box;
position: static;
display: inline-block;
width: 105px;
height: 45px;
margin: 0px;
padding: 0px;
padding: 0px 10px;
border: none;
background-color: #ccc;
/*border:2px solid #ccc;*/
border-radius: 10px;
outline: none;
cursor: pointer;
transition: 0.8s all;
font-size: 120%;
color: #000;
}
.grandisciti {
width: 600;
height: 300px;
-webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
}
.gutt {
display: none;
width: 530px;
margin:10px;
background-color: #000;
}
.tref {
display: inline-block;
width: 80%;
height: 100px;
resize: none;
outline: none;
padding: 10px;
margin: 15px;
border: 5px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body
<div tabindex="1" class="gutte">
<div class="irj fjr_p05gure rddre ">
<button class="ati qta ">btn1</button>
<button class="ati ">btn2</button>
<button class="ati ">bt3</button>
</div>
<span class="gutt">
<input type="text" class="tref"/>
</span>
</div>
Have a close look at the event passed to the focusout function, in particular the target attribute. Your gutte div will likely be catching a focusout event generated by the button. You will need to put in some conditions so that you don't collapse gutte when focus is moving around within gutte.