I'm trying to use a modal popup extender.
But I have a problem when using it inside an userControl.
I put the drag property true, and PopupDragHandleControlID but I can't drag the popup.
It seams that this problem happens only when I use the popup modal extender inside the userControl.
If I use it inside an aspx page, then it is OK.
Please can you help me how to deal with this problem?
Here is the code that I use in my user control:
<asp:LinkButton ID="lnk" runat="server" Text="Rezervo"></asp:LinkButton>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="lnk"
PopupControlID="pnlBooking" Drag="true" PopupDragHandleControlID="PopupHeader">
</ajax:ModalPopupExtender>
<div id="pnlBooking" style="display: none;" class="popupConfirmation">
<div class="popup_Container">
<div class="popup_Titlebar" id="PopupHeader">
<div class="TitlebarLeft">
Rezervo</div>
<div class="TitlebarRight">
</div>
</div>
<div class="popup_Body">
</div>
<div class="popup_Buttons">
<input id="btnOkay" value="Done" type="button" />
<input id="btnCancel" value="Cancel" type="button" />
</div>
</div>
</div>
Related
I have a bootstrap panel-collapse as follows
<div class="panel-heading">
Business/Financial Information <a data-toggle="collapse" href="#BusFinInfo"><span class="glyphicon glyphicon-collapse-down"></span></a>
</div>
<div id="BusFinInfo" class="panel-collapse collapse">
and an ajax calendar extender as follows
<div class="input-group">
<asp:TextBox ID='txtTermNotifctnDate' runat='server' CssClass='form-control'></asp:TextBox>
<span class="input-group-addon" id="inputCalenderTermNotifctnDate">
<asp:LinkButton ID="lnkBtnTermNotifctnDate" runat="server"><i class="icon-Calendar"></i></asp:LinkButton>
</span>
<ajaxtoolkit:CalendarExtender ID="ceTermNotifctnDate" runat="server" TargetControlID="txtTermNotifctnDate"
PopupButtonID="lnkBtnExecutionDate" PopupPosition="BottomLeft" Format="MM/dd/yyyy"></ajaxtoolkit:CalendarExtender>
</div>
The problem is that when I click on the calendar control, the panel collapses.
Simple mistake that I overlooked. PopupButtonID was wrong and didn't match the link button.
I have built a form in HTML 5 that is in a modal window and wrapped in Bootstrap and the layout is perfect. I have the need to use another modal window, however instead of the form being built in HTML 5 I need to place and iframe in the modal and display and asp form. I have wrapped everything identically in Bootstrap, but for some reason the label next to my form control displays on top and not next to. I'm stumped, I have played with CSS for two days now trying to figure out why. Thoughts?
HTML CODE FOR FORM THAT LAYS OUT PERFECT
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width:100%">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Observation Form</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" action=javascript:createNewObservation() method="post" id="observationForm">
<fieldset>
<!-- Form Name -->
<!-- Enter Building -->
<div class="form-group">
<label class="col-md-3 control-label">Building</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<select id="formBuilding" name="formBuilding" class="form-control selectpicker" required></select>
</div>
</div>
</div>
IMAGE FOR PERFECT LAYOUT
ASP CODE WRAPPED IN IFRAME THAT IS DISPLAYING IN MODAL
<form id="form1" runat="server" class="well form-horizontal">
<fieldset>
<legend>File Upload Form</legend>
<div class="form-group">
<label class="col-md-3 control-label">Choose File</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<asp:FileUpload class="form-control" ID="FileUpload1" runat="server" style="width:50%" />
</div>
</div>
</div>
<asp:HiddenField ID="site" runat="server" />
<asp:HiddenField ID="dateobserved" runat="server" />
<asp:HiddenField ID="guid" runat="server" />
<asp:HiddenField ID="username" runat="server" />
<asp:Button class="btn btn-primary pull-right" ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload" />
</fieldset>
</form>
IMAGE FOR INCORRECT LAYOUT
To me it seems like you need to set a width to the iframe 'cause the modal size isn't changing. Try set width to 100% for the iframe
For some reason, I cannot bind to an asp:Dropdownlist inside a Modal, and I can't figure out what I am missing. If I move the dropdownlist outside of the Modal, that data binds perfectly, but inside the Modal, the dropdownlist is always blank. Can someone please tell me what I am missing here:
Here is the Modal:
<div id="copyEmployeeModal" class="md-modal colored-header md-effect-9 prmiary">
<div class="md-content">
<div class="modal-header">
<button type="button" data-dismiss="modal3" aria-hidden="true" class="close md-close" onclick="return CloseModal();"><i class="icon s7-close"></i></button>
<h3 class="modal-title">
<asp:Label ID="lblcopyEmployeeModalTitle" runat="server" Text="Copy Employee Permissions"></asp:Label>
</h3>
</div>
<div class="modal-body form" style="padding: 0px!important;">
<asp:DropDownList ID="ddlNonGroupEmployees" runat="server" CssClass="form-control" AutoPostBack="true"></asp:DropDownList>
</div>
</div>
</div>
Here is the code to bind the dropdownlist:
ddlNonGroupEmployees.DataSource = GetNonGroupEmployees();
ddlNonGroupEmployees.DataTextField = "DisplayName";
ddlNonGroupEmployees.DataValueField = "EmployeeId";
ddlNonGroupEmployees.DataBind();
I know the above code has data, and as I said if I move the dropdownlist out of the modal and place it on the page, the data binds to the dropdownlist with no issues. Can anyone tell me what I am missing here?
Any assistance is greatly appreciated!
I have a webform in ASP.NET with VB.NET, it's made with Bootstrap, but when i put 3 elements (a dropdownlist with selectpicker class, a textbox and a button)in class="form-inline" on PC looks good but in phone no:
Form-inline on PC
But in phone it's look like this:
Form-inline on Phone
Here is my .aspx:
<div class="panel panel-default">
<div class="panel-heading">Directorio Telefónico</div>
<div class="panel-body">
<div class="form-group">
<div class="form-inline col-lg-offset-3 col-sm-offset-3">
<asp:DropDownList ID="ddlBuscar" CssClass="selectpicker" runat="server">
<asp:ListItem Value="">Seleccione elemento</asp:ListItem>
<asp:ListItem Value="departamento">Departamento</asp:ListItem>
<asp:ListItem Value="ubicacion">Ubicación</asp:ListItem>
<asp:ListItem Value="extension">Num. extensión</asp:ListItem>
<asp:ListItem Value="usuario">Nombre usuario</asp:ListItem>
<asp:ListItem Value="apellidop">Apellido p. usuario</asp:ListItem>
<asp:ListItem Value="apellidom">Apellido m. usuario</asp:ListItem>
<asp:ListItem Value="linea">Tipo de línea</asp:ListItem>
</asp:DropDownList>
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<asp:TextBox ID="txtBuscar" placeholder="Ingrese búsqueda" CssClass="form-control " runat="server" ClientIDMode="Static" onkeypress="return EnterEvent(event)"></asp:TextBox>
</div>
<asp:LinkButton ID="loading" CssClass="btn btn-default" runat="server" OnClientClick="waitingDialog.show('Procesando búsqueda, espere...', {onHide: function Carga(){ var objO = document.getElementByid('<%=loading.ClientID %>'); objO.click();}})" Text="<i aria-hidden='true' class='glyphicon glyphicon-search'></i> Buscar"></asp:LinkButton>
</div>
</div>
Thank you for your help
Please read the documentation on Bootstrap's inline form:
Add .form-inline to your form (which doesn't have to be a ) for
left-aligned and inline-block controls. This only applies to forms
within viewports that are at least 768px wide.
You can add some margin to the form-controls to make them stack nicer on mobile.
Trying to make a login form inside a Bootstrap 3 Modal, but the login button doesn't do any postback.
The most weird thing is that i have used Bootstrap Modal before in similar situations with no problems.
Here's my code:
<div id="modalLogin" class="modal fade" 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">Login</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label for="tbLoginEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-9">
<asp:TextBox ID="tbLoginEmail" TextMode="Email" CssClass="form-control" runat="server" placeholder="Email" />
</div>
<div class="col-sm-1 error-message">
<asp:RequiredFieldValidator ID="rfvLoginEmail" ErrorMessage="*" ControlToValidate="tbLoginEmail" runat="server" Display="Dynamic" />
</div>
</div>
<div class="form-group">
<label for="tbLoginPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-9">
<asp:TextBox ID="tbLoginPassword" TextMode="Password" CssClass="form-control" runat="server" placeholder="Password" />
</div>
<div class="col-sm-1 error-message">
<asp:RequiredFieldValidator ID="rfvLoginPassword" ErrorMessage="*" ControlToValidate="tbLoginPassword" runat="server" Display="Dynamic" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btLogin" Text="Login" CssClass="btn btn-standard" runat="server" OnClick="btLogin_Click" />
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
C# Code:
protected void btLogin_Click(object sender, EventArgs e)
{
///validate user credentials in membership
if (Membership.ValidateUser(tbLoginEmail.Text, tbLoginPassword.Text))
{
///login user to application
FormsAuthentication.SetAuthCookie(tbLoginEmail.Text, true);
///redirect to catalog page (TODO: redirect user to profile page)
Response.RedirectToRoute("catalog-page");
}
else
{
lbResult.Text = "error";
}
}
I'm using ASP.NET Web Forms 4.5 and the Modal is in the MasterPage.
I've found out my problem! i'm using validation controls not only in the login form, but in the register form as well. Since both the forms are in the master page if one of them is empty any button in the page will no be submitted.
To resolve my issue (i know, a rookie mistake), i added a validation group to each form - Login and Register.
Sorry for any inconvenience...