Develop Reference

How to fill the empty spaces in the grid in HTML?

As I am displaying the notes on my note taking app, which is a grid, if I have a short note then there is empty space left. How can fill it up by pushing the cards below to go up and stick to card on the top. I am using bootstrap's grid layout for displaying the cards:- See here
I also have the screenshot of how the cards are looking currently.
You can see that there is a gap between the cards and I want to fill it up
Also here is the template of a single card
let cardTemplate = `<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">${title.value}</h5>
<p class="card-text">
${content.value}
</p>
Show More
Delete
Edit
</div>
</div>
</div>`;
and i am putting this card in a div whenever a button is clicked
<!--displaying notes-->
<div class="row"></div>
I have not done any css on the div since I like the looks as it is.
Thanks for reading my query!

I think what you're looking for is masonry. It's a grid property that allows that exact behavior that you are looking for. It can be done with grid-template-rows:masonry;. Here is a link that would tell you exactly how you can do it.

Try adding class h-100 inside<div class="card h-100">** or h-50 or h-25,which makes an element or div as tall with height utilities. it is readily available in bootstrap.
refer this link for getting more information about pre-defined sizes classes in bootstrap

ngShow not working with multiElement

I have the following rendered HTML:
<div class="tutorial-dot ng-hide" ng-show-start="currentStep">
<div class="dot"></div>
</div>
<div class="tutorial-modal" ng-show-end="">
As you can see, the ng-show-start element is hidden but the ng-show-end element is not. They should both have the same ngShow directive instance applied to them since it supports multiElement but the ngShow directive is not working properly on the ng-show-end element.

I was able to get this to work by removing the ng-hide class on the first div. I added some text just to see if the show was working. currentStep is not initialized so it will start hiding the the divs. When you click the button it will flip the value of currentStep to true with the ng-click.
<div class="tutorial-dot" ng-show-start="currentStep">
<div class="dot">Hello, this will show when the current step is true.</div>
</div>
<div class="tutorial-modal" ng-show-end>
This is the end
</div>
Here is a link to a codepen that demonstrates this working. If there are more questions about this fork my codepen and show the issue you are having. http://codepen.io/mkl/pen/PpMvzZ?#

set Z index not working. button behind a container (HTML - CSS)

I using Metro css (windows 8 style) and have a problem.
I have container with alerts (the blue in the picture) ,
and above , there is 'IT -CENTER ' , If I click there it open a button.
the problem that the button behind the container..
I try to set the Z index of the container to -1 , and it's not help.
the dropdownlist with the button(IT-CENTER):
IT-CENTER
<li style="z-index:3">התנתק</li>
</ul>
</div>
and the container(blue one):
<div id="alerts-container" style="z-index:-1">
<div id="toast-example1" class="toast toasttext02 fade in">
<button type="button" class="close" data-dismiss="alert"></button>
<div class="pull-left">
<div class="toast-object icon-info-4"></div>
</div>
<div class="toast-body" style="text-align:right">
(it's without the closing tags..)
what should I do?
thanks!!

You must set position:relative if you are setting z-index - it is very important thing and can lead to your bug
If the 1 method doesn't help you should try to set z-indexes to the possible parents of that button (can say for sure I don't see your code)

overflow: hidden;
to parent DIV worked for me

Fill empty space between two DIV elements

I am sorry that I am so bad at explanation.
I am using responsive grid from http://www.responsivegridsystem.com/ and using 3 column style.
What I want to achieve is pretty much shown in the image. The order by which DIV elements are generated is labeled. The problem here is that after 1 , 2 , 3 are generated 4 should go to the place arrows point. I dont mind even 6 going there, but the place should be filled.
Div elements are generated using Database
<div class="section group">
<div class='col span_2_of_6 classifyGroup' style="height:50px;">
<h3 class='classifyHeading'>BEVERAGES</h3>
</div>
<div class='col span_2_of_6 classifyGroup' style="height:75px;">
<h3 class='classifyHeading'>salads</h3>
</div>
<div class="section group">
I have uploaded the site to here

You are using floating elements, that's not designed for result you are expecting.
On modern browsers, you should use CSS multiple-columns like here:
jsFiddle
See article on CSS trick
See supported browsers: http://caniuse.com/#search=columns
To support older browsers as IE8/9, you should use isotope jQuery plugin: http://isotope.metafizzy.co/

add -webkit-column-count: 3; to parent section container
change you div's class span_2_of_6 to span_1_of_1
add width:100%;margin-left:0 important; to class .col

Twitter Bootstrap expanding text using the "Collapse" plugin

Has anyone figured out how to use twitter bootstrap collapse plugin where some text is shown (say, 100 characters) and you click a button to expand the text to show the rest of it?
Here's a JSFiddle that demonstrates the following issues I'm having:
The hidden text is shown on a new line. Would be preferable if sentences wouldn't be visually disrupted.
the icon-plus-sign indicator's display isn't toggled (doesn't go away on showing hidden text and re-appear vice versa).
Fully working HTML:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<div class="" data-toggle="collapse" data-target="#div1" >
<span><b>Div1:</b> This is a sentence at the end of the first 100 characters that gets truncated </span>
<i class='icon-plus-sign'></i>
</div>
<div id="div1" class="collapse" >such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div1</b>).</div>
<div class="" data-toggle="collapse" data-target="#div2" >
<span><b>Div2:</b>This is a sentence at the end of the first 100 characters that gets truncated </span>
<i class='icon-plus-sign'></i>
</div>
<div id="div2" class="collapse" >such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div2</b>).</div>

I got this to work by adding the following JavaScript:
$("div").on("hide", function() {
$(this).prev("div").find("i").attr("class","icon-plus-sign");
$(this).css("display","");
$(this).css("height","5px");
});
$("div").on("show", function() {
$(this).prev("div").find("i").attr("class","icon-minus-sign");
$(this).css("display","inline");
$(this).css("height","5px");
});
And the following CSS:
div[data-toggle="collapse"] {
float: left;
}
Example fiddle is here.
Sidenote
I personally would not use the Bootstrap collapse plugin for this. I would use a dedicated plugin like JQuery Expander in combination with Bootstrap icons.
A different example fiddle is here.

I agree with the other post that the collapse plugin is not meant for this. It is actually quite easy to write something that handles this nicely. For example, by wrapping the hidden text in <span class="truncated">:
<p>
This is the visible part <span class="truncated">this is the hidden part.</span>
</p>
Then hide it, append the hide/show icon, and toggle state:
$('.truncated').hide() // Hide the text initially
.after('<i class="icon-plus-sign"></i>') // Create toggle button
.next().on('click', function(){ // Attach behavior
$(this).toggleClass('icon-minus-sign') // Swap the icon
.prev().toggle(); // Hide/show the text
});
This takes advantage of the priority of the icon-minus-sign class over the icon-plus-sign one, but you can add in a toggle for both if it makes you feel safer.
Demo: http://jsfiddle.net/VNdmZ/4/