Elements are floating outside of bootstrap modal - javascript

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".

Related

Click function is not working in my web application

I have a modal for signup and signin. Inside signup modal when I want to go to signin modal from here and click to signin button then signup modal will hide and signin modal will appear. From same procedure happen to signin modal.
But here these signin or signup button inside the modal haven't work.
I have also used e.preventDefault(); inside the js function but still doesn't work.
I don't find out the script problem since I am not good in JS.
signin modal
<div class="modal fade bs-modal-sm" id="signin_modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="signin_myTab" class="nav nav-tabs">
<center><li id="signin_Modal_tab" class="active">SIGN IN</li></center>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="signin">
<span id="student_signin_error"></span>
<form class="form-horizontal" id="signin_form">
<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
<fieldset>
<!-- Sign In Form -->
<!-- Email input-->
<div class="control-group">
<div class="controls">
<input required="" id="signin_email" name="email" class="col-ld-12 col-md-12 col-sm-12" type="email" placeholder="Email" class="input-medium">
</div>
</div>
<div class="control-group">
<div class="controls">
<input required="" id="signin_password" name="password" class="col-ld-12 col-md-12 col-sm-12" type="password" placeholder="Password" class="input-medium">
</div>
</div>
<!-- Button -->
<div class="control-group">
<div class="controls modal_submit_button">
<button type="button" class="btn btn-success" id="signin_form_submit_button">Sign In</button>
</div>
</div>
<div class="control-group">
<div class="controls modal_submit_button">
Don't have an account ! Click here to
Sign Up
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
Script
$(document).ready(function(){
$('.signup_from_signin_modal').click(function(e) {
e.preventDefault();
$('#signin_Modal').modal('hide');
$('#myModal').modal('show');
});
});
If I called alert() inside that script function it will work.
But $('#signin_Modal').modal('hide'); this function doesn't work.
Anybody Help please ?
Thanks in advance.
You have accidentally in your jQuery selector put signin_Modal ,
instead you should be trying to select signin_modal .
This is just something that happens from time to time in coding, happy hacking :)

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/

Bootstrap stacking inputs on div resize

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.

Re-opening modal after closing one, laravel

When I close my bootstrap modal, the modal opens again, then hide and the background stays darken. I am opening the modal on click on table tr. I also tried to force modal hide but it did not work. Please any help'll work.
<tr class="task-row task-row-{{$v_task->id}}" data-id="{{$v_task->id}}" data-target="#editTaskModal-{{$v_task->id}}">
<div id="editTaskModal-{{$v_task->id}}" class="modal fade editTaskModal" role="dialog" data-id="{{$v_task->id}}">
<input type="hidden" name="_method" value="put">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{$v_task->task_name}}</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<label for="listNameInput" class="col-sm-2">Name:</label>
<div class="col-sm-10">
<input type="text" name="taskNameName" class="form-control" placeholder="Your task name..." id="taskNameInput-{{$v_task->id}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="listPriorityInput" class="col-sm-2">Priority:</label>
<div class="col-sm-10">
<input type="text" name="taskNamePriority" class="form-control" placeholder="Your priority..." id="taskPriorityInput-{{$v_task->id}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="listDeadlineInput" class="col-sm-2">Deadline:</label>
<div class="col-sm-10">
<div class="input-group datetimepicker2">
<input type="datetime" name="taskNameDeadline" class="form-control deadlineInput" placeholder="Deadline..." id="taskDeadlineInput-{{$v_task->id}}">
<div class="input-group-addon calendar-div">
<span class="fa fa-calendar-o"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success updateTaskModalBtn" data-dismiss="modal">Update</button> or
<a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>
</div>
</div>
</div>
</div>
It seems you have an onclick event which triggers when the close link has been click to close the modal.
Referring to this:
<a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>
There's no need to do that since there's an attribute that would close the modal.
So I suggest change your code above and do below and see how it works.
<a data-dismiss="modal">Close</a>
Update
Ok I see your JS code:
$('.editTaskModal').on('hidden.bs.modal', function () {
$('.editTaskModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
})
You should not include these, since what it would do is, if the modal is close/hidden it will hide the modal again. Which doesn't make sense since the modal is already close. That could be the reason why it's messing up the modal reveal/hide.
So remove that and see what happens.
Thanks, I found the problem. I had had my modal in tr and I also had triggered the modal opening on tr click and when I was trying to dismiss the modal the event repeated opening.

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

Categories