modal on the top and i cant change the width - javascript

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/

Related

bootstrap modal1 is not close until modal2 close

I am trying to get a modal pop-up window from another modal pop-up
window. when i click the link from the first pop-up window, the second
pop-up window is opening, but the first one not getting closed.
I tried but not working properly.
Data target is not work because List item theme JavaScript is conflict.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function showpopup(id)
{
$("#textid").val(id);
$("#myModal").modal('show');
//alert();
}
function forgotpopup()
{
$("#myModal").modal('hide');
$("#ForGot").modal('show');
}
</script>
<article>
<div id="main-wrapper" class="container">
<a class="btn btn-primary" value="" data-toggle="modal" class="btn btn-primary" onclick="showpopup(<?php echo $fetch_package['cID'];?>);" style=" background:#ee8f22 ;">CLICK HERE</a><br>
</div>
</article>
<div class="container">
<div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-dialog">
<!-- Modal content-->
<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">Login</h4></center>
</div>
<div class="modal-body" style="padding:30px 40px;">
<form role="form" method="post">
<div class="form-group">
<label for="usrname" style="font-weight: normal; font-size: 14px;">Username</label>
<input type="text" class="form-control" id="email_id" placeholder="Enter email" name="email_id" required>
</div>
<div class="form-group">
<label for="psw" style="font-weight: normal; font-size: 14px;"> Password </label>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter password" required>
</div>
<div class="form-group pull-left" style="width:100%; border:0px solid ;">
<input type="checkbox" >
<label style="font-weight: normal; font-size: 14px; margin-top:-27px; margin-left:23px;"> Remember me</label>
</div>
<center>
<button type="submit" class="btn" style="margin-top:15px; background:#ee8f22 ;color:#fff; " name="submit">LOGIN</button>
<p> Forgot Password </p>
<p>Not a member? <a href="#" >Sign Up</a></p>
</center>
<input type="hidden" name="txtid" id="textid" value="">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ForGot" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align:center;">Forgot Password</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<h6>Enter your email associated with your account to get link to reset the password.</h6>
<input type="text" required>
</form>
</div>
</div>
</div>
</div>
</div>

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.

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

passing more than one items variable into a Bootstrap modal with jquery

I am trying to figure out how to pass more than one variable into a bootstrap modal. I know how to pass one variable but I can not figure out how to send two variable. Can I add two variable to the same link below.
I would like to add one more Item Like this
<a data-id="<?=$sid?>" class="open-AddsigningId btn btn-primary btn-xs" href="#PaySigning">Pay Signing</a>
This is the jquery script
$(document).on("click", ".open-AddsigningId", function (e) {
e.preventDefault();
var _self = $(this);
var mysignId = _self.data('id');
$("#signId").val(mysignId);
$(_self.attr('href')).modal('show');
});
This is the modal I am passing the items to
<!--Pay Signing-->
<div class="modal fade" id="PaySigning" 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>
<h4 class="modal-title" id="myModalLabel">Pay Signing</h4>
</div>
<div class="modal-body">
<div class="row well">
<form action="formpross.php" id="closeform" method="post" class="form-horizontal" role="form">
<div class="row">
<div class="col-xs-3">
<label for="totalowed" class="control-label">Total Owed:</label>
<input name="totalowed" type="text"id="totalowed" class="form-control input-sm"/>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="paiddate" class="control-label">Paid Date:</label>
<input name="paiddate" type="text"id="datepicker1" class="form-control input-sm" data-toggle="tooltip" data-placement="right" title="Date the signing company paid the invoice" value="<?php echo $paiddate;?>">
</div>
<div class="col-xs-3">
<label for="totalpaid" class="control-label">Total Paid:</label>
<input name="totalpaid" type="text"id="totalpaid" class="form-control input-sm"/>
</div>
<div class="col-xs-3">
<label for="checkn" class="control-label">Check Number:</label>
<input name="checkn" type="text"id="checkn" class="form-control input-sm"data-toggle="tooltip" data-placement="right" title="Check Number of the check from the signing company" value="<?php echo $checkn;?>">
</div>
</div>
<div class="modal-footer">
<input name="id" id="signId" type="hidden" value=""/>
<input name="pid" type="hidden" value="<?php echo $pid;?>"/>
<input name="processtp" type="hidden" value="paysigning"/>
<button id="submit" class="btn btn-primary btn-block btn-xs center">Pay Signing</button>
</div>
</form>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You can use any number of data-* attributes
<a data-id="<?=$sid?>" data-something="<?=$somevalue?>" class="open-AddsigningId btn btn-primary btn-xs" href="#PaySigning">Pay Signing</a>
then
var something= _self.data('something');
$("#something").val(something);

Categories