Hi i am trying add a horizontal scroll bar in bootstrap modal. I know horizontal scroll bars are not a good idea but in my case i have dynamic content which can have variable width so i want to make modal body scroll-able horizontally when width exceed modal body's width.
here is what i have tried
<div class="modal-header">
<h3 class="modal-title">Decomposition</h3>
<div class="modal-body">
<div class="scoll-tree">
<div class="list-group" ng-repeat="item in items">
<a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
</div>
</div>
</div>
CSS:
.modal-body {
max-width: 900px;
overflow-x: auto;
}
here is the fiddle what i have tried..
https://jsfiddle.net/4duq2svh/2/
Any help is appreciated.
Thanks in advance.
check https://jsfiddle.net/4duq2svh/3/
HTML
<div class="modal-body">
<div class="scoll-tree">
<div class="list-group" ng-repeat="item in items">
<a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
</div>
</div>
</div>
CSS
.modal-body {
max-width: 100%;
overflow-x: auto;
}
.scoll-tree {
width:5000px;
}
JS
var totalwidth = 190 * $('.list-group').length;
$('.scoll-tree').css('width', totalwidth);
Here I am calculating .scoll-tree width using jQuery to help horizontal scroll bar appear.
Sorry to answer my own question, I solved it by calculating the width of scroll-tree div based on number of list-groups inside, as one single list group is 180px wide the width will be 180 * numberOfItems. here is the code:
$scope.getStyle = function(){
var numberOfItems = $scope.tree.length;
return {
width : 200 * numberOfItems + 'px',
overflowX: 'auto'
}
}
<div class="modal-body" style="overflow-x: auto;">>
<div class="scoll-tree" ng-style="getStyle();">
<div class="list-group" ng-repeat="item in items">
<a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
</div>
</div>
</div>
Related
I am trying to make a simple admin panel. I added a sidebar as layout. I want to keep it fixed. But when I scroll down the page my sidebar also scrolls down. Here is how it looks at the beginning of page:
And when I scroll down the page:
I want to keep it as in picture 1 even the page is scrolled down. The beginning of siderbar is like this:
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar" style="max-height:100%">
Edit: I tried .navbar-nav { position: fixed; left: 0; top: 0; bottom: 0, width: 150px; } and result is:
Try this way
<div class="container-fluid">
<div class="row">
<div class="col-md-3 px-1 bg-dark position-fixed">
...
</div>
<div class="col-md-offset-3 col-md-9 col-sm-12">
<h1>Main Area</h1>
...
</div>
</div>
</div>
I have been having a look at several post here with issues similar than this one, but none of them solve my problem.
Here I post the HTML:
<div id="scroller" class="general_scrollingContainer" layout="column" layout-fill layout-align="top left">
<ul class="dynamic-grid" angular-grid="pics"
ag-grid-width="200"
ag-gutter-size="10"
ag-id="gallery"
refresh-on-img-load="true">
<li class="grid" ng-repeat="product in products">
<a ng-href="{{product.link_shop}}" target="_blank">
<img class="grid-img" ng-src="{{product.url_imagen}}" />
</a>
<div class="img-desc-wrap" layout="column" layout-fill layout-align="top left">
<a class="title" ng-href="{{product.link_shop}}" target="_blank" style="font-size:12px;line-height:16px">
{{product.title}}
</a>
<div class="date"><b>Category</b>: {{product.category_name}}</div>
<div class="object_icons_holder" layout="row" layout-align="space-between stretch">
<div flex layout-align="start center" layout="row">
<ng-md-icon icon="share" size="30" style="fill:#666;margin:-5px 0 0 10px" class="social_icon" aria-label="Share Product"
ng-click="showSocialShare($event, 0)">
<md-tooltip md-direction="top">
Share in Social Networks
</md-tooltip>
</ng-md-icon>
</div>
<div class="shop_price">{{product.price}}</div>
</div>
</div>
</li>
</ul>
</div>
The CSS for the class general_scrollingContainer:
.general_scrollingContainer {
overflow-y: scroll;
padding: 0 10px;
width: 100%;
}
and a Javascript with an event that resize the visible height of the div to adjust it:
$(window).resize(function() {
var $main_container = $(window).height();
$(".general_scrollingContainer").css({
"height": ($main_container - 160) + 'px'
});
});
The main div 'general_scrollingContainer' has a fixed height depending on the window height and inside are the elements which overflow the visible area.
The question is that I'm trying to get the event when scrolled to the bottom and need the real height of the div including the height not visible.
Using $('div.general_scrollingContainer').innerHeight(), displays only the height of the visible area of the DIV, the same value than $('div.general_scrollingContainer').height(), so I do not know how to get the whole height.
Any help?
For the height of your content, get the height of the ul-element inside the div. If you have multiple elements, you could wrap it in another inner-content div and get the height of that.
I'm trying to make a mansonry-like layout but with elements that have responsive sizes. The sizes are limited though, they can only be multiples of the smalles rectangle. The idea is that I can have 1x1, 1x2, 2x2, 2x1 elements that fit the best place possible in the page.
I saw some questions like this before but the answer was always something unuseful like 'use bootstrap'. I tried bootstrap grid, skeleton grid and many other already. None of them can handle elements that overlap columns.
I'm using Mansonry js library now, and I'm almost there. There is only one glitch that I'm not beeing able to solve. Mansonry for some reason doesn't like when I make a 2x2 element. It breaks the gutter (even when I include the exact gutter size in the elements width).
Things to note, I'm using a variable (percetage) element width and a height based on that width.
My test html part:
<div class="container">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Exemplo divisão -->
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item grid-item--width2"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
</div>
</div>
My css:
.container {
margin-left: auto;
margin-right: auto;
width: 90%;
}
.grid-sizer,
.grid-item {
width: 33%;
background-color: #666;
margin-bottom: 0.20%;
margin-top: 0%;
}
.gutter-sizer { width: 0.5%; }
.grid-item:before{
content:"";display:block;padding-top:50%;
}
.grid-item--width2{
width: 66.5%;
background-color: #555;
}
This is getting me: http://s23.postimg.org/knxbt44xn/gutter.png
Hello, myself.
I solved it. I tested: Masonry, Nested, Skeleton, Boostrap, (Doing manually), (some cms plugins)...
Finally, the answer was: Freewall.
https://github.com/kombai/freewall
This plugin solves nesting and gutter both vertically and horizontally. If you set widths and heights in proportion, it just works. Actually according to my tests, it works with anything you set. Has tons of options too. I love it!
<div class="container">
<div id="freewall">
<!-- Exemplo divisão -->
<div class="brick"> </div>
<div class="brick two"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick tall"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
</div>
</div>
My final js:
// jQuery
$(document).ready(function() {
var wall = new freewall("#freewall");
wall.reset({
selector: '.brick',
cellW: 320,
cellH: 160,
fixSize: 0,
gutterX: 5,
gutterY: 5,
onResize: function() {
wall.fitZone();
}
});
$(window).trigger("resize");
});
The css just sets the width to 33% (66% on wide), and height to 50% on normal and 100% on tall (heighs based on width using padding top).
I have some nested DIVs, on my page. Inside the content area, I have a row defined, with two DIVs (left DIV is 3 columns and right DIV is 9 columns). I want the left DIV to be sticky at the top of the page when I scroll. My code is working, however when my div sticks to the top of the browser, for some reason the DIV changes width. I can't explain why.
CSS
#media only screen and (min-width: 40.063em) {
.my-sticky-element.stuck {
position: fixed;
top: 5px;
}
}
JS
var stickyElement = $('.my-sticky-element');
var vTop = stickyElement.offset().top - parseFloat(stickyElement.css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= vTop) {
stickyElement.addClass('stuck');
} else {
stickyElement.removeClass('stuck');
}
});
HTML
<div class="row">
<div class="medium-3 columns">
<div class="my-sticky-element">
<div class="box-body radius bg-white clearfix">
<div class=" filter" style="padding-bottom: .5rem;">
<i class="fa fa-filter fa-2x text-black"></i>
<input id="contactFilter" type="search" placeholder="Filter by Contact Name" style="margin-bottom: .5rem;" />
<i class="fa fa-square-o fa-2x"></i>
</div>
</div>
</div>
</div>
<div class="medium-9 columns">
<div class="box-body no-padding" style="">
<!--- content -->
</div>
</div>
</div>
It seems that .my-sticky-element.stuck causes the div to shrink in width. I have not written the full CSS, however I have observed that before the DIV becomes sticky it is position:relative and after it becomes stuck it is position:fixed.
How can I animate multiple div width using animate, when a div has already a width defined in the css of html.
For example. If I have style="width:30%;" in the html, and I want to animate that div from 0 to 30% how can I do it? And do that in multiple divs with the same class?
To animate a div that has no width defined, to a certain value, I know I can do it like this $('div').animate({ width: 'value' }, milisecs); but I don't want to set the width value on the JS and repeating this line multiple times.
I created this Fiddle that may help better understanding.
Thank you in advance.
Try to use data() like,
HTML
<p>Single</p>
<div class="container">
<div class="fill" data-width="80%">
<span><b>Bar One</b></span>
</div>
</div>
<hr>
<p>Multiple</p>
<div class="container">
<div class="fillmult" data-width="90%">
<span><b>Bar 1</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="50%">
<span><b>Bar 2</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="70%">
<span><b>Bar 3</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="20%">
<span><b>Bar 4</b></span>
</div>
</div>
SCRIPT
$('.container > div').each(function(){ // you can use $('.fill, .fillmult').each
var width=$(this).data('width');
$(this).animate({ width: width }, 1500);
});
Live Demo