How to achieve the outer div layout which have many inner div? - javascript

All the inner widgets are rendering with ng-repeat of angularjs. So number of widgets are dynamic and size of widgets are dynamic.
I want to achieve the below layout for my dashboard
But I am always getting the below layout
Is it possible to design dynamic layout like the image 1 layout using html,css and javascript?
I am sharing jsfiddle link:
fiddle
<div ng-app="myApp">
<div class="container" ng-controller="TodoCtrl" style="overflow-y: scroll;">
<div class="" ng-repeat="widget in widgetList" ng-class="widget.class" draggable="true">{{widget.name}}</div>
</div>
</div>
Please help regarding this issue.

Related

How to dynamically size distinct row columns in React to be the same

I have a table structure which is made out of distinct blocks which cannot be brought into the same block, such as this - only much larger.
The structure of this ideally needs to stay the same.
<div class="dynamicList">
<div class="header">
<div class="item">col1</div>
<div class="item">col2</div>
</div>
<div class="row">
<div class="item">Learn JavaScript</div>
<div class="item">test message</div>
</div>
<div class="row">
<div class="item">Build something awesome</div>
<div class="item">medium message</div>
</div>
</div>
I want a way to be able to dynamically size the columns in the row to auto fit to the text so that the largest text column width is used for all the others of the same column. On the top is how it looks, at the bottom is how I want it to look.
I was hoping I could get away with just using CSS for this, however I feel I might need some JavaScript too. I am using React, so thought about using useRef hook, but didn't know how well this would perform with a really large table.
What is the best way to calculate this width and then use it across all columns of the same index?
Here is a JS fiddle showing the problem.
https://jsfiddle.net/og8kz3hp/65/

Jquery - pagination for images inside div's

I created simple image gallery and I'm looking for script or solution to make pagination for my images inside div's.
At first, it's my code.
CODEPEN.IO
My structure of gallery looks like this:
<div class="container">
<div class="main-gallery">
<div class="a-gallery">
<div class="intem-gallery">
<div class="image-gallery">
IMAGE
</div>
</div>
</div>
</div>
</div>
I found THIS jquery pagination script but it's works on different structure, like this.
<div class="parent">
<div class="child">
IMAGE
</div>
</div>
So can this script handle it with my case or maybe someone have better solution because I need to keep eg. 4 images per site. I would like to have something that will work with my structure.
look at this jQuery Pagination plugin or this one10+ jQuery Pagination Plugins. ist very easy to use. i hope it hepls

How do I put a couple of elements inside template?

I need to create templates in handlebars for an html page and the whole html should go inside of templates. For e.g. I have:
<div class= "something-pull-left-something">
<div class="someclass">
<li a href= ''>Some more info and some more divs and spans and html code</li>
</div>
</div>
and I should create a big template for the first div ''something-pull-left-something'' and smaller templates inside of it for the other items and I cant quite understand how this should happen.
Divide it up into parts as it makes sense. Try to avoid having one huge template. Instead, make one template that includes a number of other templates. You may run into performance issues but worry about that later -- it is likely not an issue.
Make main template which contains header, body and footer.
Add partials to the main template.
If you wants to use Bootstrap then you can go through this http://getbootstrap.com/components
or you can use bootstrap class
<div class="container">
<div class="col-md-12">
//code
</div>
<div class="col-md-12">
<div class="col-md-6">
//code
</div>
<div class="col-md-6">
//code
</div>
</div>
</div>

Alternative to Masonry horizontal or Flex direction CSS?

I'm looking to a way to design my website a bit like this one that is inspirating to me : https://flink.to/
My research is more about the way the articles are showing up in a mosaic of squares of two different sizes.
I tried :
Masonry horizontal (http://isotope.metafizzy.co/layout-modes/masonryhorizontal.html) but it doesn't really work in responsive as we can't assign a width and a height in percentage... I'm looking for a solution to display squares in that way.
CSS with Flex direction, but It's not as powerful as it could be : if I have three rows of squares and a very-first-big square, more-little squares don't fill the empty space above the big one.
How could I replicate this in the best way ?
I have found Pure CSS and CSS Skeleton to be really simple and easy to use libraries for responsive grids in CSS.
Here is an example of a similar layout using pure.css
In Pure CSS grids are laid out like this:
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
And in CSS Skeleton like this:
<div class="container">
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>

How to add white space between two divs of 6 columns each in foundation 4?

I am developing a website in Zurb Foundation 4 and SASS.
My code looks like:
<div class="row">
<div class="large-6 columns redbg"> content goes here... </div>
<div class="large-6 columns greenbg"></div>
</div>
Both of inner divs has background. I have a column gutter of 30px.I want this gutter to be white. The possible solution for it to add parent divs for both of inner divs and apply columns and large-6 class to it and this way code will look like:
<div class="row">
<div class="large-6 columns">
<div class="redbg"> content goes here... </div>
</div>
<div class="large-6 columns">
<div class="greenbg"> content goes here... </div>
</div>
</div>
But by applying this solution I have to create two divs for only the sake of design. Can anyone please guide how to do it or a better approach.
Also I wonder how to collapse a column from just one side (left or right)?
It would be much easier to use CSS - by using the background-clip property, which as its name suggests, allows you to clip the painting area of an elements background.
Since the gutter width in foundation is within the padding box, you can use the content-box value.
Here is a simple example: http://jsfiddle.net/CA669/950/embedded/result/
Can you make the row have a white background? That way the gutter will be white.
The other way I can think of is how you are currently doing it. I've had to do similar solutions.

Categories