I have 5 multi-columns that have scroll eventlistener. The problem is when I put pictures inside a column the others columns goes under that one. I tried some clearfix solution but does not work.
Can you help me please?
Here is a jsfiddle without pictures - I put the CSS beside (I want it to works like that but with pictures, not with text) - https://jsfiddle.net/u849yzn3/15/
And here is what happens when I put picture - https://jsfiddle.net/georgeSohan/7puf3z9m/4/
Here is the html
<div id="main" class="clearfix">
<div class="scroll-class columnScroll clearfix" id="scroll">
<div class="imgWrap clearfix"><img src="images/0-i6"> </div>
<div class="imgWrap clearfix"><img src="images/0-i6.jpg"</div>
<div class="imgWrap clearfix"><img src="images/0portrait.jpg"</div>
</div>
<div class="columnScroll clearfix"><p> Some Text</p></div>
<div class="columnScroll clearfix"><p> Some text</p></div>
<div class="columnScroll clearfix"><p> Some text</p></div>
<div class="columnScroll clearfix"><p> Some text</p></div>
</div>
Thank you!
Related
I am trying to add a chat to test site. Using float right is perfect, because if the screen goes smaller then it moves with it, but the problem with that it's not "not enough right" for me. Is there any other responsive ways to get the chat more right? I am using bootstrap
Here is the chat HTML code:
<div class="chat pull-right" style="width: 30%">
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">Chat</h3></div>
<div class="chat-messages panel-body">
<div class="chat-user">
<div class="chat-username">James</div>
<div class="chat-message">This is a test</div>
</div>
<div class="chat-user">
<div class="chat-username">David</div>
<div class="chat-message">This is a test</div>
</div>
</div>
</div>
</div>
I don't know where you want have your chat box, example if if want to have chat options always on right corner or always on half height of display, you can use position absolute and z-index for that. PS what mean: "not enough right"? Can you add some screen shot or maybe example on bootply or fiddle.
I am using a library that create timeline. This is javascript based.
I have the following html
<div class="container">
<div class="row">
//Stuff here
</div>
<div class="row>
<div id="timeline">
</div>
</div>
<div class="row>
//Other stuff here
</div>
</div>
And the timeline library is replacing my $('#timeline') element by the timeline
If I do not have many elements on my timeline, everything is fine
But if I have more elements, the timeline is expending through the third <div class="row">.
How to fix it to have the third row always placed after the timeline ?
I do not want to hide the overflow.
What CSS trick should I try ?
Try adding class clearfix if you are using something like that or any thing similar I would be better if you post your css too
just for kicks, try....
if it doesnt work i will delete... but my understanding is that its worth a try.
<div class="container">
<div class="row">
//Stuff here
</div>
<div class="row>
<div id="timeline">
</div>
<div style="clear:both"></div> <!--this is the added line-->
</div>
<div class="row>
//Other stuff here
</div>
</div>
I'm getting some strange CSS behavior when using display:table,table-row,table-cell
When a table-cell contains an empty div, it pushes down the content of the cell next to it.
<html>
<body>
<div style="height:200px">
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div style="height:100px;width:200px;overflow-y:scroll"></div>
</div>
<div style="display:table-cell">
<div style="height:100px;width:100px;overflow-y:scroll">Why am I getting pushed down?!?</div>
</div>
</div>
</div>
</div>
<div style="height:200px">
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div style="height:100px;width:200px;overflow-y:scroll">A</div>
</div>
<div style="display:table-cell">
<div style="height:100px;width:100px;overflow-y:scroll">Suddenly I'm not getting pushed down?!?</div>
</div>
</div>
</div>
</div>
</body>
</html>
If I put some content in the DIV, behavior stops. Is this a bug? Affects Firefox and Chrome. If it's not a bug, how do I get around it?
To get around this problem, set vertical-align:top on the empty td.
FIDDLE
Different browsers can use different systems it is hard to say that if this is a bug or your browser
acting differently or could be a server not updating to check this inspect element and check if code matches
I've been staring at this wireframe I've made and it has me stumped on how to make it...
http://i.stack.imgur.com/ytiMf.png
The sticky jquery properties are not the problem, it's the positioning of the areas themselves given their overlapping nature that's giving me strife.
Any suggestions? Am I thinking about this the wrong way?
Like this: http://jsfiddle.net/7Fv64/
<div class="green">Hi</div>
<div class="content-wrap">
<div class="sidebar">
<div class="yellow">Hello</div>
</div>
<div class="content">
<div class="red">Stuff</div>
<div class="purple">And</div>
<div class="black">Things</div>
</div>
</div>
I'm starting out a website using BootStrap 3 framework. Here's the section of the code that I have an issue with:
<div class="row">
<div class="col-md-8">
<div class="brand">
<h1>Test Text.</h1>
<div class="line-spacer"></div>
<p><span>Some more test Text</span></p>
</div>
</div>
<div class="col-md-12">
<img src="img/devices.png" />
</div>
</div>
</div>
Here's what the output looks like:
How do I get the image along the same row as the text? I tried placing the <img> within the col-md-8 div tag, tried without specifying any col div value, but none of that worked. Any help is appreciated. The CSS is the generic bootstrap min css.
You might want to split the area up in two parts, but always keep in mind that bootstrap standard uses 12 grid system.
So if you want the two next to each other u use...
<div class="row">
<div class="col-md-6">
Here your text
</div>
<div class="col-md-6">
<img />
</div>
</div>
That should fix your issue, remember up count goes over 12 it wraps.
Your columns have to always add up to a total of 12 and your code should be similar to the below:
<div class="container">
<div class="row">
<div class="col-md-4">
CONTENT
</div>
<div class="col-md-8">
CONTENT
</div>
</div>
</div>
Have a good read over the Bootstrap Docs on their Grid System:
http://getbootstrap.com/css/#grid