I was insert text to <div> from java script. Looks like <div> tag width and height already setup. So If I insert large paragraph text then <div> is overlapping on to other <div> under below.
$("#formDescription").text($("#Description").val());
html
<div class="col-sm-10 col-sm-offset-1" id="box_front_bottom" style="display: none;">
<div class="panel panel-default">
<div class="panel-body">
---
---
<div class="form-group">
<div class="col-sm-5" style="overflow: auto">
#Html.Label("Description", new { #class = "control-label" })
</div>
<div class="col-sm-7" id="formDescription">
</div>
</div>
If I use less text, it will show like this
JSFiddle
With the bootstrap CSS you are setting the containers of that information with float:left you may need to clear the floats to keep each form in separate lines; use this:
.form-group:after {
content: " ";
display:block;
clear:both;
}
The demo http://jsfiddle.net/Q2FHr/2/
use display: inline-block; and max-height
Related
I have a banner in my page. I managing the design with bootstrap. The image with the id ”mybanner” is created dynamically from the code. So there are times that my code may not have at all the image element.
I would like to specify a minimum height for the div id ” myhorizontalbanner” so if there is not present at all the image element to display as banner the div id ” myhorizontalbanner” colored with red color.
My code when the image is there
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
<img id="mybanner" src="images/mybannerimage.jpg" class="img-fluid" /> <!--This Image
element is comming dynamically-->
</div>
</div>
</div>
My code when I dont have image
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
</div>
</div>
Have you tried with min-height ?
For example:
#myhorizontalbanner {
min-height: 150px;
}
I have a series of containers that each contain a word, occasionally two words.
CSS
.container-title {
font-size: 5.625vw;
}
HTML
<div class="container">
<div class="container-title">Orange</div>
</div>
<div class="container">
<div class="container-title">Acai Berry</div>
</div>
<div class="container">
<div class="container-title">Kiwi</div>
</div>
<div class="container">
<div class="container-title">Mangosteen</div>
</div>
These all look perfect, except for "Mangosteen" that ends up as "Mangoste-en". I don't mind title with two words, but want to avoid any one-word title from being hyphenated. Would it be best to override this in JS to fix the issue, or is there a CSS method that would work?
Try this in CSS3.0:
div {
word-wrap: break-word;
}
I have element sidebar and div with class sticky-top:
<div class="row">
<div class="col-lg-4">
<div class="sticky-top">
....
</div>
</div>
</div>
I need pass a margin, when sidebar is sticky, because class sticky-top doesn't have a margin-top.
How I can write margin when sidebar is sticky?
Try:
.sticky-top { top: 0.5em; }
You need to use top instead of margin-top
<div class="row">
<div class="col-lg-4">
<div class="sticky-top" style="top: 30px">
....
</div>
</div>
</div>
Try to use:
.sticky-top{
margin-top:10px;
}
if it gives you trouble, you can force it with !important, like this:
.sticky-top{
margin-top:10px !important;
}
Please note that !important should be used only when other solutions are not working.
Hope it help!
In the employee section of a Wordpress site, I'm trying to have the bio slide open in the correct position when you click on each employee photo.
It's working well when the row is full width (4 columns) and in mobile (1 column) but in the 2 column layout (480px to 882px), position().left is returning 0, so the negative margin isn't being properly applied and the bio goes offscreen.
I can't for the life of me figure out why this is... Any help is greatly appreciated!
The site in question: http://contractor-marketing.website/
The HTML (simplified):
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
</div>
The JS:
jQuery('.column').each(function(s, el) {
jQuery(this).find('.bio-full').eq(0).css('margin-left',-(jQuery(el).position().left));
});
Check my example below. Although I took a different approach, it essentially does what you want, and it even animates the element transition.
NOTE: This animation will happen EACH time you press the animate button. You must prevent such animation from happening more than once (if that is the behavior you are looking for). Also, change the $('#animate') selector and click event to the event of your choice.
$('#animate').click(function() {
$(".bio-full").animate({
left: "+=300",
}, 1000, function() {
// Animation complete.
});
});
body{
padding:0;
margin:0;
}
.bio-full{
background-color: red;
display:hidden;
position:relative;
width:300px;
left:-300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="animate">Animate</button>
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
</div>
I hope this helps!
Cheers!
HTML
<div class="channellist" id="channellist">
<div class="c01" id="c1"></div>
<div class="s01" style="display:none" id="p_c1">
<div>channel name</div>
<div class="programs">
<div>p1</div>
<div>p2</div>
<div>p3</div>
</div>
</div>
<div class="c01" id="c2"></div>
<div class="s01" style="display:none" id="p_c2">
<div>channel name</div>
<div class="programs">
<div>p1</div>
<div>p2</div>
<div>p3</div>
</div>
</div>
</div>
<div class="c01" id="c3"></div>
Script
$(".c01").live("mouseenter mouseleave", function(){
var id=this.id;
$("#p_"+id).slideToggle();
});
On mouseenter of the class c01 i am making s01 to display block and on mouseleave i am making that s01 to display none.
There are 10 programs. I want to select the program. On mouse enter it is displaying all the program names when i try to see the programs by scrolling my mouse the next div's program are getting displayed
I cant able to select the programs. It is showing next channels programs
How can i resolve this?
Array.from(document.querySelectorAll(".c01")).forEach(function(c){
c.addEventListener("mouseover", function(){
var s = c.parentNode.querySelector(".s01");
if(s) {
s.style.display = "block";
}
});
c.addEventListener("mouseout", function(){
var s = c.parentNode.querySelector(".s01");
if(s) {
s.style.display = "none";
}
});
})
#c1{
background-color: yellow;
height: 10px;
}
#c2{
background-color: red;
height: 10px;
}
<div class="channellist" id="channellist">
<div class="chanel-wrapper">
<div class="c01" id="c1"></div>
<div class="s01" style="display:none">
<div>channel name</div>
<div class="programs">
<div>p1</div>
<div>p2</div>
<div>p3</div>
</div>
</div>
</div>
<div class="chanel-wrapper">
<div class="c01" id="c2"></div>
<div class="s01" style="display:none">
<div>channel name</div>
<div class="programs">
<div>p1</div>
<div>p2</div>
<div>p3</div>
</div>
</div>
</div>
</div>
<div class="c01" id="c3"></div>
I had to add a wrapper around each associated c01 and s01 (I gave them the channel-wrapper class but it is not used). If you don't want that, you can add a data-* attribute (e.g. data-index) in the s01s so that you can linked them with the associated c01.
You can try to retrieve it by looking at the following siblings (but I wouldn't do that).