I have the following set of divs:
<div class="col-md-12">
<div class="col-md-5" id="left">
<div id="A"></div>
<br />
<div id="B"></div>
</div>
<div class="col-md-5" id="right">
<div id="C"></div>
</div>
</div>
So we have a left and right column, with the left column containing two divs and the right column containing one. JSFiddle doesn't seem to have Bootstrap as an option so I had to make do.
What I want to achieve, when in mobile view, is this:
You can see the div that was at the top left, div A, is now at the bottom. I know I need to use offsets for this, but my tinkering has produced no results.
Related
i have 3 column in bootstrap and i want the scroll only the middle dive while keeping the position relative to the parent container . something like facebook scroll
<div class="container">
<div class="row">
<div class="col-md-3">stop scrolling when content end </div>
<div class="col-md-6"> SCROLL </div>
<div class="col-md-3"> stop scrolling when content end </div>
</div>
</div>
i tried using position fixed , but when i use it .it messes the grid system , thats why i want the position to stay relative to the parent if possible .
If I understand the question, you can use sticky-top like this...
https://www.codeply.com/go/IL1wlzpNEP
<div class="container">
<div class="row">
<div class="col-md-3"> <div class="sticky-top">side</div> </div>
<div class="col-md-6"> SCROLL </div>
<div class="col-md-3"> <div class="sticky-top">side</div> </div>
</div>
</div>
The middle column will scroll the length of its' content.
I am using semantic-ui and have a grid setup as follows within a tab segment:
<div class="ui bottom attached tab segment" data-tab="Overall Stats">
<div class="ui internally celled stackable grid">
<div class="row">
<div class="eight wide column">
<h4 class="ui blue header">Top Goal Scorers
<div class="sub header">(All Age Groups)</div>
</h4>
<div id="showOverallGB"></div>
</div>
<div class="eight wide column">
<h4 class="ui blue header">Most MoM Awards
<div class="sub header">(All Age Groups)</div>
</h4>
<div id="showOverallMoM"></div>
</div>
</div>
</div>
In the showOverall* divs I add dynamically created tables. The issue I have is that the created tables can be wider than the columns they sit in which means the left hand table overlaps the right hand table (when viewing on a non-mobile device such that the grid does NOT stack). Is there a way to invoke the stackable part of the grid if the dynamically added tables are wider than the columns they sit in?
Edit: here's a fiddle - https://jsfiddle.net/eynnqLkk/1/
You'll need to go to the Age Group Stats tab and then play around with the jsfiddle boundaries. You should see something like:
You could add scroll bars to your tables so they won't overlap adding:
#showGB, #showMoM {width:100%; overflow:auto;}
as you can see here: Fiddle
Or if you want to move one behind the other when no room avaliable remove the width 50% of your container with:
.ui.grid > .row > [class*="eight wide"].column {width:auto !Important}
as you can see here: Fiddle
I'm using bootstrap grid system for building a website, i'm not using the row class but the padding between divs is not working!
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
Can anyone help me with that?
In Bootstrap there are 12 columns in a row. You have 4 * 4 = 16, and that's not correct.
It’s based on a 12 column layout and has multiple tiers, one for each media query range.
So you should change your code to:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
See docs here.
To start with - assuming you are wanting a single row- you need to either change these divs to a "3" each or have one less of them - remember that 12 is the magic number for the Bootstrap grid.
Also the reason for containing the cols in a .row is to control the margin on either side. The padding is INSIDE the divs - not between them so the following will give you a row with 3 divs that are positioned adjacent to each other to give a full row and will have left / right padding of 15px inside each div:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
The .row class has a -15px margin on either side so that each of the side divs will aligns with the edge of the parent container div. Remember that you can use container-fluid to expand the parent div across the entire viewport.
So to summarise - the Bootstrap .col-* divs do NOT have padding between them, but rather padding inside them. Unless of course your CSS overrides that.
According to Bootstrap documentation:
Row is mandatory
Every row has 12 columns
You are using 16 columns, change your code to:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
How can I drag an object between two bootstrap columns, with Interact.JS?
See http://codepen.io/drumiriades/pen/dGrygg.
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="boardLeft">
<p>Left</p>
<div class="draggable">
<p id="drag-1"> dragg me</p>
</div>
</div>
</div>
<div class="col-md-8">
<div class="boardRight">
<p>Right</p>
</div>
</div>
</div><!--/ row-->
</div> <!--/ container-->
</body>
I have an object with ID=drag-1 that is draggable on the left column (Class= boardLeft) but I can't drag it to the right column (Class= boardRight). How can I drag it to the right column?
z-index of the .draggable object must be 1 or greater to see the .draggable object on top of the right container.
Additionally, your restrict option is set to restrict the .draggable component to its parent container only. Removing this option allows you to drag it into the right container.
On top of these couple things - you're referencing elements in your JavaScript that don't exist in your layout (#grid-snap, .dropzone, and #yes-drop)
I've updated the CodePen with the elements that do exist, and now it shows that the item is dropped into the right container... but it changes the content. Not sure if that's what you wanted, but that's what your JavaScript is doing.
http://codepen.io/anon/pen/yewLdb
I have website that where the php code generates all the products on the same page.
So far i get something like this.
http://ratecleveland.com/irregular_height_columns.jpg
however i am trying to get something like this.
http://ratecleveland.com/new.jpg
any idea if this can be done in css. or if no, is there a javascript examle.
thank you for the help
jQuery Masonry: http://masonry.desandro.com/
Here's a fiddle, use display:inline-block; with the ?display hack
http://jsfiddle.net/qW3TV/
No javascript is necessary.
Looks like all of the divs are the same width. Why not just create containing column divs around the ones you want to stack?
<div class="col1">
<div class="a"></div>
<div class="e"></div>
<div class="i"></div>
</div>
<div class="col2">
<div class="b"></div>
<div class="f"></div>
<div class="k"></div>
</div>
<div class="col3">
<div class="c"></div>
<div class="g"></div>
<div class="l"></div>
</div>
<div class="col4">
<div class="d"></div>
<div class="h"></div>
<div class="m"></div>
</div>
Float each column left and your interior div's, which appear to already have specified width and height, will fall into place. You can even give the columns the same class, since they will just be floated left containers.