I'm trying to use Packery to build a dashboard with draggable widgets (using Draggabilly for dragging). The widgets have their width determined by Bootstrap classes, as to be responsive over various screen sizes. I'm also using jQuery to grab elements and stuff.
CodePen Link
HTML Snippet
<div class='container'>
<div class='row' id='dashboard-root'>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Some content</br></br>
</div>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Some other content<br>
</div>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Even more content<br><br><br><br>
</div>
<div class='dashboard-item col-xs-12 col-sm-12 col-md-8 col-lg-6'>
Some wide content is super wide, even wider than you even thought possible, like this is so crazy wide you wouldn't believe it.
</div>
</div>
</div>
CSS Snippet
.dashboard-item{
border-style: solid ;
}
.container{
border-style: dashed ;
}
JavaScript Snippet
var $root = $('#dashboard-root') ;
$root.packery({
itemSelector: '.dashboard-item'
});
$root.find('.dashboard-item').each(function(i, itemElem){
var draggie = new Draggabilly(itemElem) ;
$root.packery('bindDraggabillyEvents', draggie);
});
As it stands, the widgets are draggable, but I need them to snap to some sort of grid. Currently, they can be placed anywhere, which makes positioning weird.
I'm trying to figure out how to make them snap to Bootstrap's grid columns. Ideally, I'd want the elements to snap to the nearest col-*-1, I think. Not sure what to do with the height though.
I tried playing with setting the columnWidth to a selector for a dummy element, but I couldn't get it to work.
Related
I have two columns, left column is main feed and right column is sidebar.
I want to scroll each columns separately.
In this case left pain scroll works well.
However right pain scroll doesn't works.
Contents in right panel are dynamically generated by javascript,
so it's sometimes getting longer than screen.
<div class="container" style="padding-top: 60px;" >
<div class="row">
<div class="col-6 col-md-6 col-sm-6 col-xs-6">
Main Feed
</div>
<div class="col-6 col-md-6 col-sm-6 col-xs-6"
style="overflow-y: auto;display: block;position:fixed;right:10px;">
sidebar content this contents is generated dynamically by javascript
</div>
</div>
</div>
<div class="col-6 col-md-6 col-sm-6 col-xs-6"
style="overflow-y: auto;
display: block;
max-height:100vh;
right:10px;
position: fixed;">
</div>
Check https://codepen.io/ashishkrtewari/pen/BaaJXWy
I just added some generated content and max-height of 100vh. Without a max height you will not see the scrollbar as there is nothing restricting the height to reveal a scrollbar.
Please check
I saw a possible solution to this HERE, but I'm hoping I can do this without adding a third-party plugin to my evergrowing list of included libraries.
I have a simple Bootstrap 4 layout, a main col-8 section, a secon col-4 sidebar, and underneath a footer:
<div class="container-fluid">
<div class="row row-eq-height m-0 p-0 h-100">
<div class="col-12 col-lg-7 col-xl-8 order-2 order-lg-1 py-3">MAIN CONTENT</div>
<div class="col-12 col-lg-5 offset-lg-7 col-xl-4 offset-xl-8 order-1 order-lg-2 p-0 fixed-side">SIDEBAR</div>
</div>
</div>
<footer class="container-fluid container-footer pt-4 pb-1"></footer>
What I want to do is allow the user to scroll through the MAIN Column, while the FIXED-SIDE sidebar stays fixed (class fixed-side sets position:fixed, top: inherit, z-index: 0). When the footer comes into view, I want to offset the top value by however many pixels the footer is seen.
I have tested in developer tools that this would probably be the easiest way to manipulate the top value of the FIXED-SIDE sidebar. I just do not know how to target the "in-window" height of an element.
I'm looking to accomplish this in javascript or jQuery, instead of importing a new script and calling that script.
Consider using position: sticky; - it could help to achieve your 'fixed position' sidebar, but still allow scrolling in your main <div>.
https://css-tricks.com/position-sticky-2/
I use bootstrap 3.3.7 for its grid and responsiveness in my web app (Flask App). It works pretty well with all the plotly subplots I created except for a single plot. When the browser is in full-page or if I resize a little bit, I don't have any problem :
However, if I resize too much the plot exceeds the section height and generates a white space.
I have tried to add a margin-right, a padding-right, to change the class of the div col-lg-6 col-md-6 col-sm-6 into col-lg-6 col-md-6 col-sm-6 col-xs-6 (the chart become very very small), to change the margin inside the javascript code that produces the plot...
And as you can see the subplots in the below the GREEKS title are well displayed whatever the resize applied...
Here is the html code for this section :
<section id="payoff" class="background-img">
<!-- Table code here -->
<div class="container-fluid" id="results">
<div class="row" style="padding-top: 0px; padding-bottom: 30px;">
<div class="col-lg-6 col-md-6 col-sm-6" style="padding-top:40px;">
<div class="plotly-graph-div" id="plot-payoff"></div>
</div>
</div>
</div>
</section>
Any help would be really appreciated! Thanks a lot
In bootstrap nav we can show the menu in collapsing format.
Similary I want to show div in the collasing format. e.g if it is is mobile view then only show the top div and hide all the div in collapse mode . I am aware of the below supports in bootstrap responsive
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
If it is not supported please all share the idea how it can be implemented.
nirajkumar, have a look at this Fiddle.
You can use the .hidden-xsBootstrap class to do what you want here.
Using version 3.3.4.
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-1 col-lg-3 col-lg-offset-1 text-center block2 hidden-xs">
Div #1
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-2 col-lg-3 col-lg-offset-4 text-center block2">
Div #2
</div>
This is listed in the official Bootstrap docs. Here's the link:
http://getbootstrap.com/css/#responsive-utilities-classes
I've only just started learning so please stick with me and I'll try provide as much info as I can.
Using Bootstrap 3 I have been attempting to adjust a number of content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.
I have been using this jquery library > https://github.com/mattbanks/jQuery.equalHeights > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)
I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columns but this doesn't seem to work when I adjust it for multiple rows.
Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.
<div class = "container">
<div class="row">
<div id="equalheight">
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
</div>
</div>
Above is my html, the second content area has the large amount of copy
<script>
$('#equalheight div').equalHeights();
</script>
<script>
$(window).resize(function(){
$('#equalheight div').equalHeights();
});
$(window).resize();
</script>
Above is my Javascript, calling the before mentioned library.
Thanks for any help / advice
You can try using CSS negative margins (no jQuery needed)..
.demo{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}
#equalheight {
overflow: hidden;
}
http://bootply.com/92230
EDIT - another option
Here is another example using CSS3 flexbox spec: http://www.bootply.com/126437
Bootstrap team developped a CSS class .row-eq-height which is exactly what you need. See here for more.
Just add this class on your current row like this:
<div class="row row-eq-height">
your columns
</div>
Warning: You have to add a new div.row.row-eq-height each 12 columns
You can use this plugin. It works pretty good.