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
Related
i try to design a popup window in my aspx page. The problem is the page is reloaded and the popup not shown!
here is the code
aspx
<asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager>
<asp:Label ID="popuplbl" runat="server"></asp:Label>
<cc1:ModalPopupExtender ID="mpe" PopupControlID="panel1" TargetControlID="popuplbl" CancelControlID="cancelbtn" runat="server"></cc1:ModalPopupExtender>
<asp:Panel ID="panet1" class="modal fade in" runat="server">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" type="button" data-dismiss="modal"></button>
<h4 class="modal-title">New Study Design</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h4>Some Input</h4>
<p><input class="col-md-12 form-control" type="text"> </p>
<p><input class="col-md-12 form-control" type="text"> </p>
</div>
</div>
</div>
<div class="modal-footer">
<button id="cancelbtn" class="btn default" type="button" data-dismiss="modal">Cancel</button>
<button class="btn blue" type="button">Add</button>
</div>
</div>
</div>
</asp:Panel>
<button runat="server" id="AddNew_StudyDesign" class="btn sbold green" title="Add New Study Design" style="width:200px" onserverclick="AddNew_StudyDesign_Click" >
Add New Study Design <i class="fa fa-plus"></i>
</button>
c#
protected void AddNew_StudyDesign_Click(object sender, System.EventArgs e)
{
mpe.Show();
}
I try using "ToolkitScriptManager" but it is not known!
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<cc1:ToolkitScriptManager ID="ScriptManager1" runat="server" />
I can see one issue,
Replace PopupControlID attribute in ModalPopupExtender ,
PopupControlID="panel1"
To
PopupControlID="panet1"
Panel ID is panet1, not panel1.
Additionally, Panel should have display style none (style="display:none;"), but you can keep as per your requirements.
I need to create a report using Report viewer. unfortunately, I haven't worked on Report viewer before. My SQL query accepts 3 parameters to fetch the data from SQL server. Query would be:
Select col1,col2,col3 from table1 where area='ddlselectedarea' and start_date='01-01-2016' and end_date='31-01-2016'
My UI would be:
<section id="content" class="has-btn-bar-btm-fixed"><!-- content -->
<form runat="server" class="form-horizontal custom-form row">
<div class="cost-transfer-block"><!-- cost-transfer-block -->
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-lg-10">
<h2>Dump by item</h2>
<div class="col-md-6">
<div class="form-group">
<asp:label runat="server" Text="From Site" ID="lblFromSite" class="control-label col-sm-3 col-md-3 col-lg-3" ></asp:label>
<div class="col-sm-9">
<div class="input-group">
<select class="form-control">
<asp:DropDownList ID="DdlFromsite" runat="server" ></asp:DropDownList>
</select>
<span class="input-group-addon"> </span>
</div>
</div>
</div>
</div>
<div class="col-md-6 cst-brd-left">
<div class="form-group">
<asp:label runat="server" Text="From Date" ID="lblFromDate" class="control-label col-sm-3 col-md-3 col-lg-3" ></asp:label>
<div class="col-sm-9 transferdate">
<div class="input-group date">
<input type="date" class="form-control" id="" placeholder="Select Date" >
<span class="input-group-addon"><img src="images/icon-add-on-2-date.png" alt="" /></span>
</div>
</div>
</div>
<div class="form-group">
<asp:label runat="server" Text="To Date" ID="lblToDate" class="control-label col-sm-3 col-md-3 col-lg-3" >To Date</asp:label>
<div class="col-sm-9 transferdate">
<div class="input-group date">
<input type="date" class="form-control" id="" placeholder="Select Date" >
<span class="input-group-addon"><img src="images/icon-add-on-2-date.png" alt="" /></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2">
</div>
</div>
</div>
</div>
<!-- /cost-transfer-block -->
<%--<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<rsweb:ReportViewer ID="ReportViewer1" runat="server"></rsweb:ReportViewer>--%>
<div class="gray-btn-row clearfix">
<div class="btns-group">
<asp:button runat="server" Text="Enter" ID="btnEnter" class="btn btn-dark-blue"></asp:button>
</div>
</div>
</form>
</section>
Please guide me in designing a report using the reportviewer
The report viewer is a totally new component which needed to be designed using Report viewer or report viewer wizard. You can add any of them from the Add new items pane and bind a data table to that component.
I hope this helps others
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a panel with three buttons in the panel body. I want one button to be where it currently is (left) and I want the other two buttons to be on the far right.
The buttons currently are all aligned to the left. Below is the code I have written. I have tried numerous things including pull-right and adding button groups and clearfix, but they remain left most.
I have also tried this post: Left align and right align within div in Bootstrap
I am using bootstrapmin for both CSS and JS.
Here is the code:
<div class="row">
<div class="form-inline">
<div class="col-sm-5" style="width: 100%;">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Click 'Run' to complete the report.</div>
<div class="panel-body" style="background-color: lightgray;">
<div class="form-group">
<asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click"
class="btn btn-primary btn-sm"/>
<div class="btn-group">
<span class="pull-right">
<asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm" />
<asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm" />
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body" style="background-color: lightgray;">
<div>
<asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click" class="btn btn-primary btn-sm" />
<asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm myFloat_Right" />
<asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm myFloat_Right" />
</div>
</div>
and in your cs file add the following:
.myFloat_Right {
float: right;
}
worked for me.
You were on the right track. The only thing you had to do was to use the bootstrap classes accordingly. If you pay attention, you'll see they work as a map. 1. build a container, 2. build a row, 3. build a column size, 4. build the element, 5. locate it. In this case, you had to wrap the left button in a left column, and the right btn-group in a right container with pull-left and pull-right. Mind you, in your #media responsive code you have to nullify the pull-right so that they don't look funny in a smartphone. I am assuming you are building a responsive design otherwise you wouldn't use Bootstrap. ;)
Here is a codepen for your solution
enter link description here
p.s. Avoid inline styles like the plague. Specially where you have a col-sm-5 but you are forcing a width to 100%. Doesn't make any sense to do that. Use col-xs-12 if you want a 100% width
Try this
<div class="row">
<div class="form-inline">
<div class="col-sm-5" style="width: 100%;">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Click 'Run' to complete the report.</div>
<div class="panel-body" style="background-color: lightgray;">
<div class="pull-left">
<asp:Button ID="btnRun" runat="server" Text="Run"
class="btn btn-primary btn-sm" />
</div>
<div class="pull-right">
<asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm" />
<asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is what I'm trying to achieve here. The user clicks on a button and the bootstrap modal popup appears. The user enters the event id value in the text box of the modal popup and I want information regarding the event to be displayed on the other fields in the modal popup.
I wrote a function under txtEventId_TextChanged event and I was able to get the value entered in the event id textbox. I was able to pass that value to the database and retrieve it's corresponding values from database as well.
My problem now is that I'm not able to display those data in the modal popup.
Here is the HTML Code :
<!-- Maintainenance Modal -->
<div class="modal fade" id="maintenanceModal" role="dialog" tabindex = -1 aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<!-- Maintaineance Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Maintain Event</h4>
</div>
<div class="row">
<div class="col-xs-2">
<div class ="form-group">
<label for="eventID" id="lblEventId">EventID</label>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<asp:TextBox ID="txtEventId" runat="server" CssClass="form-control dialogtextbox" AutoPostBack="false" OnTextChanged="txtEventId_TextChanged"></asp:TextBox>
</div>
</div>
</div>
<asp:HiddenField ID="HiddenField1" runat="server" />
<div class="modal-body">
<div class="EventsIcons">
<div class ="form-group">
<label for="MaintainDropDown" id="MaintainEventLabel">Select The Event Type </label>
<select id="MaintainDropDown" runat="server" class="btn btn-default dropdown-toggle eventdropdown" data-toggle="dropdown" aria-expanded="true">
<option value="WorkAnniversary">WORKANNIVERSARY</option>
<option value="Birthday">BIRTHDAY</option>
<option value="Community">COMMUNITY</option>
<option value="FoodSafety">FOOD SAFETY</option>
<option value="Health&Safety">HEALTH & SAFETY</option>
<option value="Holiday">HOLIDAY</option>
<option value="Maintenance">MAINTENANCE</option>
<option value="QualityAudit">QUALITY AUDIT</option>
<option value="SocialEvent">SOCIAL EVENT</option>
<option value="Stat-Holiday">STAT-HOLIDAY</option>
<option value="Sustainability">SUSTAINABILITY</option>
<option value="TownHall">TOWN HALL</option>
<option value="Visitor">VISITOR</option>
<option value="Wellness">WELLNESS</option>
</select>
</div>
</div>
<div class="Description">
<label for="description" id="MaintainDescription">Description</label>
<textarea class="form-control" rows="5" id="maintainTxtDescription" name="eventdescription" runat="server"></textarea>
</div>
<div class="row">
<div class="col-xs-2">
<div class="form-group">
<label id="Label3">Start Time</label>
</div>
</div>
<div class='col-xs-6'>
<div class="form-group">
<div class='input-group date' id="maintainStartDate">
<asp:TextBox ID="maintainTxtStartDate" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<div class="input-group date" id="startTime">
<asp:TextBox ID="maintainTxtStartTime" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<div class="form-group">
<label id="Label4">End Time</label>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="input-group date" id="endDate">
<asp:TextBox ID="maintainTxtEndDate" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<div class="input-group date" id="endTime">
<asp:TextBox ID="maintainTxtEndTime" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1 col-xs-6">
<div class="form-group">
<asp:CheckBox ID="maintainChkBoxAllDayEvents" runat="server" CssClass="checkbox" Text="All Day Event" OnClick="document.getElementById('maintainTxtStartTime').disabled = this.checked;document.getElementById('maintainTxtEndTime').disabled = this.checked;" />
</div>
</div>
<div class="col-xs-offset-1 col-xs-4">
<div class="form-group">
<asp:Button ID="btnMaintainSubmit" runat="server" Text="SUBMIT"
CssClass="btn btn-group-justified btn-success" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
And here is my code behind code.
protected void txtEventId_TextChanged(object sender, EventArgs e)
{
BusinessLogicLayer BL = new BusinessLogicLayer();
EventId = Convert.ToInt32(txtEventId.Text);
try
{
DataTable dt = BL.BLGetEventDetails(EventId);
foreach (DataRow row in dt.Rows)
{
StartDate = row["StartDate"].ToString();
EndDate = row["EndDate"].ToString();
StartTime = row["StartTime"].ToString();
EndTime = row["EndTime"].ToString();
EventDescription = row["EventDescription"].ToString();
EventType = row["EventType"].ToString();
if (StartDate.Equals(""))
{
MessageBox.Show("EventId Does Not Exists");
maintainTxtStartDate.Text = "";
maintainTxtStartTime.Text = "";
maintainTxtEndDate.Text = "";
maintainTxtEndTime.Text = "";
MaintainDropDown.Disabled = true;
}
else
{
maintainTxtStartDate.Text = StartDate;
maintainTxtStartTime.Text = StartTime;
maintainTxtEndDate.Text = EndDate;
maintainTxtEndTime.Text = EndTime;
MaintainDropDown.Value = EventType;
maintainTxtDescription.InnerText = EventDescription;
}
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message, "txtEventId_TextChanged", MessageBoxButtons.OK, MessageBoxIcon.Error);
}
}
If I specify AutoPostBack="true" for txtEventId then the popup disappears from the screen after I input the value and hit enter. If I set the AutoPostBack = "false" then it is not populating the values as the control is not going to txtEventId_TextChanged function. I do not want to set AutoPostBack="true" because during postback the whole page will reload and the modal popup will disappear. I tried setting scriptmanager and updatepanel for it but since I have already an another existing scriptmanager and updatepanel added in the Default.aspx page, I'm not able to add a new one to it.
Please let me know what I'm doing wrong and how to rectify this. Your guidance is highly appreciated.
You have two options:
RegisterStartupScript
Use the RegisterStartupScript at the end of your method to send JS code to the client, you will send the call to your modal like this
ScriptManager.RegisterStartupScript(this, typeof(Page), "callModal",
"$('#maintenanceModal').modal();", true);
This is the easiest way to accomplish what you want
PageMethods
You can use the PageMethods to return a JSON with the values you want to display, this way you don't need to do a Postback, and you will get the info you want. See the requirements and how to use PageMethods
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...