Bootstrap stacking inputs on div resize - javascript

I would like to know how to use Bootstrap responsive columns when resizing a containing div, and not just the viewport size.
I would like the inputs inside the form to stack side by side as I make the modal wider.
Html :
<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-auto">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
<div class="form-group col-auto">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2" >
</div>
<div class="form-group col-auto">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
<div class="form-group col-auto">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</form>
</div>
</div>
</div>
Fiddle : https://jsfiddle.net/p204kwjz/6/
Can I make the inputs continue to stack horizontally as I enlarge the containing div?
The problem is that that the inputs are not "fluid" when I enlarge the div wide enough to fit them all in a row. Also, when the containing div is too small they overflow the div horizontally.
The context here is that the forms will be created dynamically, so I need some kind of smart layouting.

If you want your columns to take up the full width (stack horizontally) in bootstrap use col-md-12 on your form and wrap it in a div with class form-row. Basically bootstrap assumes each row is composed of 12 columns.
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2" >
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</form>
</div>
</div>
</div>
Here is a fiddle.

The form-group and the col-auto classes aren't playing nicely. You can achieve fluid inputs by nesting col-auto inside form-group
fiddle
<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group">
<div class="col-auto">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</div>
</form>
</div>
</div>

You are using bootstrap 4.
In bootstrap 4, if you code for medium, say 2 divs of col-md-6 and use in smaller screen, div takes the full width and stacking happens, ie: both the divs are one above the other.
div {
display: flex;
margin: 0px;
padding 0px;
}
.col-md-6 {
/* Assuming that col-md-6 width is 1000px */
width: 1000px;
}
<div>
<div class="col-md-6" style="background-color:red;">
Sri harsha
</div>
<div class="col-md-6" style="background-color:blue;">
Achyuthuni
</div>
</div>
That is because, unlike Bootstrap 3, Bootstrap 4 is made using flex boxes.
To see how flex works, look into this link
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Related

bootstrap - javascript: modal icheck box not getting unchecked on closing

I have the following html
<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<form class="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add user</h4>
</div>
<div class="modal-body">
<div class="form-group row profile_field">
<label class="col-lg-3 col-form-label">First Name</label>
<div class="col-lg-9">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveButton">Save</button>
</div>
</form>
</div>
</div>
</div>
Now i have tried to the following to uncheck
using the id of the input
$('passresetcheck').prop('checked',false)
also
$('passresetcheck').attr('checked',false)
using modal id
$("#handleUserModal .modal-body").find('input:radio, input:checkbox').prop('checked', false);
Finally what worked for me, is also to remove the checked class
// this is for the input
$('#passresetcheck').prop('checked', false);
// this is to remove checked class
$("#password_check div").each(function(index,elem){
if (elem.classList.contains("checked")) {
elem.classList.remove("checked");
}
})
My observation what happens to html when we check
This is without any checking
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
after checking it gets converted like this, it adds a class checked in the div inside i-checks
<div class="i-checks reset_password_check" id="password_check">
<label class="">
<div class="icheckbox_square-green checked" style="position: relative;">
<input id="passresetcheck" type="checkbox" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>
</div>
Reset password
</label>
</div>
Always check first if you capture something or not. In your case $('passresetcheck') is undefined.
You need to search by ID using # symbol like here $('#passresetcheck'):
const checkbox = $('#passresetcheck')
checkbox.prop('checked', false)
setTimeout(() => checkbox.prop('checked', true), 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<form class="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add user</h4>
</div>
<div class="modal-body">
<div class="form-group row profile_field">
<label class="col-lg-3 col-form-label">First Name</label>
<div class="col-lg-9">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveButton">Save</button>
</div>
</form>
</div>
</div>
</div>

Cannot use has-error in some input element

I'm trying to validate some inputs available in a modal:
<div id="modal-section" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Manage</h3>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<div class="modal-body">
<div class="modal-message alert" style="display:none"></div>
<form>
<fieldset>
<legend>Details</legend>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label class="control-label">name</label>
<input type="text" class="required form-control black-content">
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
Informations
</legend>
<div id="questions-container">
<div class="card" data-id="1">
<div class="card-body">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="form-group">
<label for="question-name" class="control-label">description *</label>
<input type="text" class="required form-control" data-id="1">
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" id="validate" class="btn btn-primary">save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
</div>
</div>
</div>
When I press the button validate this function will fire:
var missingRequired = false;
$('#modal-section .required').each(function () {
$(this).closest('.form-group').removeClass('has-error');
if ($(this).val() == '' || $(this).val() == undefined) {
$(this).closest('.form-group').addClass('has-error');
missingRequired = true;
}
});
Essentially, this will check all the input that have the required class; only the input name will have the red, the other inputs available in the questions-container will not.
If I look at the HTML I can see that the class has-error is added also to the input available in questions-container but the inputs aren't colored.
The CSS available on the element I have:
theme class:
.white-content .card:not(.card-white) label:not(.btn) {
color: #344675;
}
bootstrap class (commented in the question-container element)
.has-error .form-control-feedback, .has-error .control-label {
color: #ec250d;
}
Why is this happening?
From what i can tell with the information provided, your error CSS rule is not specific enough. Try changing it to:
.card .form-group.has-error label.control-label {
color: #ec250d;
}

modal on the top and i cant change the width

The modal is in the top of webpage and I cant edit the width of the modal
css
.modal-dialog {
width:1000px;
}
head tag code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
The modal code in the html body tag. is there any wrong in my code ?
<div class="modal fade" id="account" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h4 class="modal-title" id="myModalLabel">My Account</h4></center>
</div>
<div class="modal-body">
<div class="container-fluid">
<form method="POST" action="update_account.php">
<div style="height: 10px;"></div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Name:</span>
<input type="text" style="width:350px;" class="form-control" name="mname" value="<?php echo $srow['uname']; ?>">
</div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Username:</span>
<input type="text" style="width:350px;" class="form-control" name="musername" value="<?php echo $srow['username']; ?>">
</div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Password:</span>
<input type="password" style="width:350px;" class="form-control" name="mpassword" value="<?php echo $srow['password']; ?>">
</div>
<hr>
<span>Enter current password to save changes:</span>
<div style="height: 10px;"></div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Password:</span>
<input type="password" style="width:350px;" class="form-control" name="cpassword">
</div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Confirm Password:</span>
<input type="password" style="width:350px;" class="form-control" name="apassword">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Update</button>
</form>
</div>
</div>
</div>
</div>
how can I make it fixed?
If you are using Bootstrap for CSS, you could use the modal-lg and modal-sm classes to change the width of the modal, Eg:
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
Also you can use the !important to force redimention the modal with, like said #geoidesic.
.modal-dialog {
width:1000px !important;
}
More information on Bootstrap Modal
Most of these jquery plugins have default CSS that they use, which may be overriding your own CSS. You can try add !important...
.modal-dialog {
width:1000px !important;
}
Note that using !important is usually not a good idea but it should at least confirm that this is the issue.
The right way to set width for this plugin though is probably to send it as a parameter when you call the modal. See the API documentation for the width parameter:
http://api.jqueryui.com/dialog/

Set Textbox Value in opened Modal using javascript Dynamically

On button click open Model like this
<i class="icon-note"></i>
Modal
<div id="edit-venue" class="modal fade portlet" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<form class="form-horizontal" id="editVenue" method="post">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Edit Venue Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-3"><b>Venue12</b></label>
<div class="control-label col-sm-9 text-left">
<input id="venue" name="venue" class="form-control venue_name" placeholder="Enter venue" type="text">
<span class="error"></span>
<span class="error"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3"><b>Room/Stage</b></label>
<div class="control-label col-sm-9 text-left">
<input id="roomStage" name="roomStage" class="form-control" placeholder="Enter room/stage" type="text">
<span class="error"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn red">Cancel</button>
<button type="button" data-dismiss="modal" class="btn green btn_save">Save</button>
</div>
</div>
</form>
</div>
</div>
When I click on button open modal, I'd like to on click button fill up the data in perticular textbox using javascript dynamically.
on button click i got response like this {"id":67,"value":"venue 1","Xvalue":"venue 1"}
i tried to : $('#venue_name').val(msg.value);
but instead of #venue_name I want to use the closest().
How can I do this?
If I understand your question right, you want to set the value in the input box of model from the message.
You need to use the shown.bs.modal event of the modal.
var msg = {"id":67,"value":"venue 1","Xvalue":"venue 1"};
$('#edit-venue').on('show.bs.modal', function (e) {
$("#venue").val(msg.value);
})
JSFIDDLE : https://jsfiddle.net/01zrxq7y/1/
Boostrap Doc : http://getbootstrap.com/javascript/#modals-events

Elements are floating outside of bootstrap modal

I have a form insite a modal. When the size of the window is small then everything is fine. If I maximise the window then the elements of the form are floating outside of the modal. I have checked all my css styling etc, but nothing seems to conflict. I have also set this up on JSFiddle, and it seems to happen and there aswell, with just JQuery and Bootstrap. Its seems to be something on my code but I cant figure out what. Could you please take a look on it and help me out?
http://jsfiddle.net/dsryycbq/
<div id="editPassword" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editPasswordlbl" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog modal-sm vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="editPasswordlbl">Change Password</h4>
</div>
<div class="modal-body">
<form action="{{url_for('admin')}}" role="form" id="editPasswordForm" method="post">
<input type="hidden" name="formType" value="changePassword">
<div class="form-group">
<label class="col-sm-3 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Repeat Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-default">Confirm</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You need to add the class .form-horizontal to the form element. This makes the .form-group's act as rows. Next to some margin, this adds a clearfix which stops the columns from "floating".

Categories