i'm facing to css problem.basically i have main div tag and 3 div s class named pic_con,body_con and msg_con .
div msg_con length and height depend on the text of it.if text is too long it should have morethan one line to display all.look at the picture.first one with small text,second one with big text ..div msg_con have minimem width and maximum width.
i want to position this 3 div look like in the picture.
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hey this is multiline text</div>
</div>
</div>
my css
.pic_con {
float:left;
background-color:#096;
}
.back_con {
float:left;
background-color:#3CC;
border:5px solid red;
width:150;
}
.body_con {
/*float:left;*/
margin:0 auto 0 auto;
background-color:#C39;
border:5px solid red;
}
i set flote left but it's not work.
As far as I understood you want to align them one after another.
You can manage this, as you tried, by using float: left. Furthermore, you should set the parent div to clear: both.
Another thing that I saw is that you didn't close the pic-con DIVs. Try with this:
HTML
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">pic</div>
<div class="body_con">small icon</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con"></div>
<div class="body_con">small icon"</div>
<div class="msg_con"> hey this is multiline text</div>
</div>
</div>
CSS
.msg_w_1 {
clear: both;
}
.msg_w_1 div {
float: left;
}
Edit: I didn't see the updated post containing CSS when I posted this. Try removing the float: left and width from your CSS classes before trying this
use display:table style.
.msg_con {
display : table
}
this makes .msg_con behave like a table element, it will re-size according to its content's length ( both height and width ).
Related
I'm trying to expand a box (a div) with a header and a hidden div. The problem is that the height isn't affected in the expansion and the hidden text doesn't show up properly.
The main goal is to expand a small box as if it was a tab, to a form, without changing page and with an expansion animation. When expanded, the user can see the text and edit it. As if it was something like a pop-up filling almost the entire screen. All this is already done expect the "expansion part".
I've tried to adapt my code to many of online solutions, but most of them are simple divs. This is a simple example of what I'm trying to do: http://jsfiddle.net/xcWge/14/ (its only the blue box).
HTML
<div class="row">
<div class="col-md-3 col-sm-6 to-expand">
<div id="child" class="widget">
<div class="widget-body text-center">
<div class="big-icon m-b-md watermark"><i class="fa fa-5x fa-exclamation-circle"></i></div>
<h2 class="m-b-md">Tarif</h2>
<p class="text-muted m-b-lg">Some introduction.</p>
<div class="menu-separator"><hr></div>
<div id="hidden-box">
<p>This contains the text to be hidden, assume that it has a huge number of paragraphs</p>
</div>
Button
.row is the group of "expandable boxes"; .to-expand is the div that includes a single box and #child is the div that included all the content in the box.
CSS
<style>
.btn-primary-w {
border-color: #06285e;
border-width: 2px;
}
div.to-expand {
width: 100%;
max-height:-10%;
overflow: hidden;
transition: all .3s ease;
}
.to-expand.fullscreen {
z-index: 999;
max-height: 990px;
}
I saw a solution that was using a negative margin-top and then return it to 0 with overflow hidden to simulate the hidden text but that solution didn't work.
JS
function func() {
$('#to-expand').toggleClass('fullscreen');
$('#to-expand')[0].style.zIndex = "999";
}
Please have a look at this Image.
Here I was use the Bootstrap for aligning the divs. And created only one div. The Contents are added in this div dynamically from the admin side. then it will loop the div. That's Working fine.
But here you can see only 6 Contents are available. So 2 Divs are aligned in the left. I need these div should align in the middle of the Page. If the Contents are 7 or 5 the Second row Contents should be in the Middle. How to align these Divs Middle. Please Help me to Solve this Problem.
Here Is My Code..
<div class="col-sm-6 col-md-3">
<div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="100ms">
<img src="{{ 'assets/img/icon-services.png' |theme }} ">
<h4>{{ service['name'] }}</h4>
<p>{{ str_limit(service['description'], 100) }}</p>
Read More
</div>
</div>
Thank you in Advance.
Add display: inline to child div and text-align: center to the parent div. Don't use col-md of bootstrap because it have float: left propertive
.parent {
text-align: center;
}
.child {
display: inline-block;
width: 24%;
border: solid 1px #123;
height: 50px;
margin: 0 auto !important;
}
<div class="parent" id="parent">
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
You can use bootstrap to set an offset for each div dynamically depending on your div's desired position or set the margin of the divs to auto. See this post for a detailed explanation.
I have the following very simple Bootstrap grid system:
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">
<div id="jsme_container"> </div>
</div>
<div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">
Arrow
</div>
<div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Compound</div>
<div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Arrow</div>
<div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Compound</div>
<div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Arrow</div>
</div>
</div>
Currently for testing purposes, only the first column is filled with content - which is a custom drawing object the size of which can be specified using the following Javascript:
var width = "200px";
var height = "200px";
function jsmeOnLoad() {
// width, height
document.JME = new JSApplet.JSME("jsme_container", width, height, {
"options": "edit,useopenchemlib", // depict in place of edit removes exterior editor window
});
}
I have included this in the following JSFiddle:
http://jsfiddle.net/mrc2016/rbxth6ac/
Please expand the result window to the left and ensure the fiddle is loaded over http not https.
I find that the height of the first column expands successfully to meet the value of "var height" of the jsme_container as set in the Javascript code. However, the same does not happen when the width of the jsme_container is changed. For example, when "var width = 100px", the contents sit within the first column, but when this value is changed to 200px, the contents expand out of the first column and into the second. My question is, how can I stop this from happening and how can I ensure the first (and ultimately all) columns expand to fit the width of their contents?
I apologise for the simplistic nature of this question but I am rather inexperienced with Bootstrap and CSS.
Any help/tips would be much appreciated.
In Bootstrap version 4.x, you can use col-sm-auto.
You can use Flexbox for that, making all children's width change depending on content:
.col-sm-2 { border:1px solid; }
#media screen and (min-width: 480px) {
.flex { display: flex; flex-wrap: wrap; }
.flex > .col-sm-2 { flex: 1; width: auto; }
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h2> RScheme </h2>
<div class="container-fluid">
<div class="row flex">
<div class="col-sm-2"><img src="http://placehold.it/200x200"></div>
<div class="col-sm-2">Arrow</div>
<div class="col-sm-2">Compound</div>
<div class="col-sm-2">Arrow</div>
<div class="col-sm-2">Compound</div>
<div class="col-sm-2">Arrow</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/rbxth6ac/8/
I have the following snippet directly inside the body tag:
<div id="container">
<div class="section profile">
<div class="row">
<div class="col-sm-6">
A
</div>
<div class="col-sm-6">
B
</div>
</div>
</div>
<div class="section technical">
</div>
</div>
My CSS file if it is neccessary:
body {
background-color: #808080;
}
.section {
}
.section.profile {
background-color: #2980b9;
}
.section.technical {
background-color: #bdc3c7
}
However, when I use FullPageJS, the result is like this:
(note: their are thin lines at the left and right)
The problem only happens if I use row div. It also happen if I wrap the row by another div. Also, the problem disappear if I resize the browser window.
This is how I call the script, just like the documentation:
<script>
$(document).ready(function () {
$("#container").fullpage();
});
</script>
I'm not pretty sure what are you expecting to happen, but check this:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
The container must be a class, not an id, but this also will add some padding to the sides.
Also, you should move the .row class to the upper level id and delete the current one with the .row class in it, the row <div> can have both classes without any problem.
In my container, there is multiple childrens, one of the 'div' getting appended by content in that.
when the total height of the container(parent) overflows, i would like to add the scroll bar to the div
is it possible to do by css?
here is the html :
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Js :
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
jsfiddle
UPDATE
I don't want to put the over-flow to container, if so my footer will hide. i require my user need to see the add button always. I can't put my button out side of the container again there would be multiple content in to the container
UPDATE
I find a solution by js is it possible to made without using `js'?
jsSolution
Yes, it is possible to do in CSS. Simply add this CSS rule to #container:
overflow-y:scroll;
Alternatively add this to show the scroll bar only when necessary:
overflow-y:auto;
http://jsfiddle.net/doesfmnm/2/
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
.content{
border:1px solid red;
height:300px;
width:200px;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Adding a little more explanation to what #Guy3000 said. You're appending (adding after) into an element with the class 'content'. Let's consider what that means for the parent .container class. By adding content into a div inside of the parent, your parent will need to either grow to compensate for the added content, or it will need to have a y-axis scroll that permits content longer than the height of the container.
This means you can approach the dilemma you're facing by adding height to the container element, or you can keep a fixed height on the container and have a frame with a y-axis scroll bar contain the added content.
Here is the solution i find :
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">
<div class="content"></div>
</div>
<div class="misc"><button>Add</button></div>
</div>
css :
#container { width: 300px; height: 300px; border:1px solid red;display:table;}
#up { background: green;display:table-row;height:0; }
#down { background:pink;display:table-row; overflow-y:auto}
.misc {
display:table-row;
background:gray;
height:30px;
}
.content {
overflow:auto;
height:100%;
}
Live
js solution :
http://jsfiddle.net/doesfmnm/4/