We Keep Coding

Bootstrap columns enlarge the more I type in a search bar

When typing in to an input search bar, my Bootstrap div .col-xs-4 enlarges, breaking out of it's container. What's odd is, Developer Tools doesn't seem to show any changes in the code that would affect this.
To replicate this problem, try typing the full name of one of the images in this JSFiddle gallery i.e., "Satcom 2016", and watch the div burst out of it's container. Clearing the input then shows that every div has expanded, not just the visible ones.
JSFiddle
https://jsfiddle.net/vadrfgvv/
jQuery
function rowBreak(input) {
$('.col-flex').hide();
if (input) {
$('.row-flex').replaceWith(function() {
return $(this).html();
});
$('.col-flex').wrapAll('<div class="row">');
}
$('.col-visible').each(function(i, e) {
if (((i + 1) % 3 == 0) && ($(this).siblings().length != 2)) {
var x = $('.col-visible:gt(' + i + ')');
$('<div class="row">').append(x).insertAfter(this.closest('div.row'));
}
});
$('.col-visible').show();
}
rowBreak(0);
$('#search').on('keyup', function() {
$('.col-flex').removeClass('col-visible').hide();
var s = $(this).val().toLowerCase();
$('.col-flex').filter(function() {
return $(this).find('h4').text().toLowerCase().indexOf(s) > -1;
}).show().addClass('col-visible');
rowBreak(s);
});
$('#results').on('click', '.panel-search', function() {
$(this).toggleClass('panel-default').toggleClass('panel-success');
$(this).find('.panel-body').toggleClass('bg-green');
var image = $(this).find('img');
var imageID = image.attr('id');
// alert(image.width());
if ($(this).hasClass('panel-success')) {
image.clone().appendTo('.panel-include').removeClass('img-thumbnail').css('margin-bottom', '20px').attr('id', 'x' + imageID).wrap('<p></p>');
} else {
$('.panel-include').find(('#x' + imageID)).closest('p').remove();
}
if ($('.panel-include > p').length == 0) {
$('.panel-include').find('em').show();
} else {
$('.panel-include').find('em').hide();
}
});
$('.btn-save').on('click', function(e) {
e.preventDefault();
var logos = '';
$('.panel-include').find('p').each(function() {
imageID = $(this).find('img').attr('id');
logos += imageID;
});
if (logos) {
logos = logos.substr(1);
}
$("input[name=ids]").val(logos);
$(this).closest('form').submit();
});
HTML
<div class="container-fluid">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<input class="form-control" id="search" type="text" placeholder="Search...">
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
Your Chosen Content
</h4>
</div>
<div class="panel-body panel-include">
<em class="text-muted">Click on some images to add them here.</em>
</div>
</div>
<form action="#" method="get">
<input type="hidden" name="ids" value="">
<p class="text-right">
<button class="btn btn-primary btn-save" type="submit">
<i class="fa fa-save"></i> Save
</button>
</p>
</form>
</div>
<div class="col-xs-9">
<div id="results">
<div class="row row-flex">
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
AEClim
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AEClim" id="1">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
AEMET
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AEMET" id="2">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
AME
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AME" id="3">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
APMG
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=APMG" id="4">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
ATC Network
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=ATC+Network" id="5">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Meteomet
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=Meteomet" id="6">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
MMC 2016
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=MMC+2016" id="7">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Satcom 2016
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=Satcom+2016" id="8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I initially thought it was the .img-responsive class that was causing problems (maybe the image was enlarging when the div was hidden?), but it seems like the image doesn't actually enlarge with the div, so that rules that out.
I'm not sure where else to start debugging.
Note: I have kept the entirety of the Javascript that affects these page elements in my question/Fiddle, in case it is something there that is causing the problem.

.row {
margin-right: -15px;
margin-left: -15px;
}
This CSS is the cause of your problem. i didn't see exactly how, but your js code nesting a row for every character typed. and with this css in bootstrap.css each nested row grows larger and larger. the images expand too.
what you can do is, overwrite this css in your html file with <style> tag. something like:
<style>
.row{
margin-right:0px;
margin-left:0px;
}
</style>
but you should know this is only a quick fix. a hack. if i was in your place, i'd look for the reason why your code is nesting a row for every character.

html forms with its model not submit

I have three buttons and three forms into their divs(Models) at one page. All divs(Models) with their forms are hidden. First time when page is loaded. One div with its ID and its form is cloned and shown into another div#replace section. Then When I try to submit it. its not submitted the form. why? see code here
here all div(Models) with its form is replace when click on button
<div class="row">
<h1 class="text-center margin-top10 fsize60"></h1>
<section class="text-center replace-section">
<!-- forms are shown here when button is click -->
</section>
$(document).ready(function() {
$("#frm_infradi_result").click().clone().removeClass('hide').addClass('show').prependTo(".replace-section");
$("button[name='btn_infradi_result']").click(function() {
$('.replace-section').empty();
$("#frm_infradi_result").click().clone().removeClass('hide').addClass('show').prependTo(".replace-section");
});
$("button[name='btn_madaris_result']").click(function() {
$('.replace-section').empty();
$("#frm_madaris_result").click().clone().removeClass('hide').addClass('show').prependTo(".replace-section");
});
$("button[name='btn_hifz_result']").click(function() {
$('.replace-section').empty();
$("#frm_hifz_result").click().clone().removeClass('hide').addClass('show').prependTo(".replace-section");
});
$("button[name='btn_nazer_sani']").on('click', function() {
$('#modal_nazer_sani').show();
});
});
<!-- 1 div#frm_infradi_result with its form -->
<div class="col-md-7 col-md-push-3 animated fadeInRight animation-delay-5 hide" id="frm_infradi_result">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h3 class="h2 ur no-margin-padding" style="display: inline;">
انفرادى مکتب نتائج برائے سال 1437ھ
</h3>
<i class="fa fa-users" aria-hidden="true"></i>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form method="post" id="frm_result" action="mailto:itsoftsaeed#gmail.com">
<!-- here is form elements list -->
</form>
</div>
</div>
</div>
</div>
<!-- 2 div#frm_madaris_result with its form -->
<div class="col-md-7 col-md-push-3 animated fadeInRight animation-delay-5 hide" id="frm_madaris_result">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h3 class="h2 ur no-margin-padding" style="display: inline;">
انفرادى مکتب نتائج برائے سال 1437ھ
</h3>
<i class="fa fa-users" aria-hidden="true"></i>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form method="post" id="frm_madaris" action="mailto:itsoftsaeed#gmail.com">
<!-- here is form elements list -->
</form>
</div>
</div>
</div>
</div>
<!-- 3 div#frm_hifz_result with its form -->
<div class="col-md-7 col-md-push-3 animated fadeInRight animation-delay-5 hide" id="frm_hifz_result">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h3 class="h2 ur no-margin-padding" style="display: inline;">
انفرادى مکتب نتائج برائے سال 1437ھ
</h3>
<i class="fa fa-users" aria-hidden="true"></i>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form method="post" id="frm_hifz" action="mailto:itsoftsaeed#gmail.com">
<!-- here is form elements list -->
</form>
</div>
</div>
</div>
</div>

dynamically change template by dragging with angularjs

I have the following setup in my application:
http://plnkr.co/edit/I2RCjYU17SDX65thUUqD?p=preview
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-7">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
Panel 1
</div>
</div>
<div class="panel-body" style="height: 250px;">
Panel 1
</div>
</div>
</div>
<div class="col-xs-5">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
Panel 2
</div>
</div>
<div class="panel-body" style="height: 250px;">
Panel 2
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-7">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
Panel 3
</div>
</div>
<div class="panel-body" style="height: 250px;">
Panel 3
</div>
</div>
</div>
<div class="col-xs-5">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
Panel 4
</div>
</div>
<div class="panel-body" style="height: 250px;">
Panel 4
</div>
</div>
</div>
</div>
What I am trying to do is to be able to re-order the panels by dragging them.
For example, I want to be able to drag panel 1 to the bottom right and have it switch positions with panel 4. I'm relatively new to angularjs and I have no idea how to go about tackling a problem like this.
My initial idea was to create a different template for each possible combination of panels and dynamically include the template off of a variable I set, however this would require having 16 different templates and I feel like there must be a better solution.

You can use a external dependency (Angular-dragdrop) within Angularjs. Give each canvas a sequence and reorder by sequence when you drag a canvas in an other place.
Here you find more information: http://codef0rmer.github.io/angular-dragdrop/#/

Adding javascript transition to boostrap accordion

I have an accordion to hide blog posts in a webpage. I have a downwards arrow which I want to rotate to an upwards arrow when a blog post (accordion section) has been opened. These should be independent of other arrows attached to other posts obviously.
I am using bootstrap framework as a base. I tried following the instructions here http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_togglebtn&stacked=h , along with what I already know/have used to try to add rotation. My problem is that, as I'm not using a button (the whole blog post is clickable to expand and collapse it), I can't work out what I need to put in the javascript where the question marks are.
(adding a data-target attribute to the tag breaks the expandability of the post).
$(" ??? ").on("hide.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
$(" ??? ").on("show.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
expand-image.text-center.glyphicon.glyphicon-chevron-down.turn-arrow {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<a class="blog" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 25th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body" >
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes
This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
<a class="blog collapsed" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 26th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes. This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
</div>

You can attach the eventHandler on any Element, that is one of the parent Elements of .collapse. This is because the Event is triggered on the .collapse Element and bubbles all the way uppward. You can read more about event bubbling here.
You could, for example, attach the eventHandler to every Element with class "blog" as I did to solve your problem.
Relevant jsFiddle
$(".blog").each(function () {
$(this).on("hide.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
$(this).on("show.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
});
Note the .each at the beginning. This attaches a different eventHandler to every Element matching the selector.
Now you can search the icon to be rotated in this Element --> $(this).find(
This will only find the one arrow inside the clicked blog element.
A very detailed explanation can also be found in this post.

How to show a modal window with text and img clicking on a thumbnail img

I just started using Bootstrap 3. I made a thumbnail grid with images related to different projects. I would like that when clicking on an image a modal window open. In the modal I need to report image coming from thumbnail and some text explaining the project content.
Any idea, suggestion of how to do it?

Adding modals in Bootstrap is very easy, and there are examples in the Bootstrap documentation: http://getbootstrap.com/javascript/#modals.
I suggest trying out some of the examples and seeing how far you can get, and then if you get stuck you can ask for specifics.

I' coding as follow
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Renovations"><img src="//placehold.it/600x400/444/F8F8F8" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Renovations</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Academic Institutions"><img src="//placehold.it/600x400/454545/FFF" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Academic Institutions</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Interiors"><img src="//placehold.it/600x400/555/F2F2F2" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Interiors</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="New Construction"><img src="//placehold.it/600x400/555/FFF" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">New Construction</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Site Planning"><img src="//placehold.it/600x400/555/EEE" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Site Planning</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Churches"><img src="//placehold.it/600x400/666/F4F4F4" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Churches</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
</div>
<!--/row-->
</div>
<!--/container-->
</pre>
and js script as follow
/* copy loaded thumbnails into carousel */
$('.panel .img-responsive').on('load', function() {
}).each(function(i) {
if(this.complete) {
var item = $('<div class="item"></div>');
var itemDiv = $(this).parent('a');
var title = $(this).parent('a').attr("title");
item.attr("title",title);
$(itemDiv.html()).appendTo(item);
item.appendTo('#modalCarousel .carousel-inner');
if (i==0){ // set first item active
item.addClass('active');
}
}
});
/* activate the carousel */
$('#modalCarousel').carousel({interval:false});
/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
$('.modal-title').html($(this).find('.active').attr("title"));
})
/* when clicking a thumbnail */
$('.panel-thumbnail>a').click(function(e){
e.preventDefault();
var idx = $(this).parents('.panel').parent().index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
return false;
});
So I send image from thumbnail to a modal window with a carousel. What I would like is to add some text to each of the image displayed in the modal.
Thanks for some help.