I have the below form that uses Bootstrap.
Everything seems to be working fine, until some of the fields have validation errors. When that happens, I make the feedback DIVs visible, which shifts the grid alignment.
I'm not sure what's causing this as my column sizes add up to under 12 per form-row, so they shouldn't be shifting to the next row. Any ideas would be great.
Thanks in advance.
Normal Layout
Shifted Layout (when there are validation errors)
Markup
<div class="account-options account-options-banking-details row" id="divBankingDetails" runat="server">
<hr />
<h1>Banking Details</h1>
<div class="account-options-banking-controls col-xs-10">
<div class="form-row">
<div class="form-group col-xs-5">
<label for="txtBankName">Bank Name</label>
<input type="text" class="form-control inputfield" id="txtBankName" runat="server">
<div class="invalid-feedback" id="divBankNameFeedback" runat="server" visible="false">
Required
</div>
</div>
<div class="form-group col-xs-5">
<label for="txtAccountType">Account Type</label>
<select class="form-control inputfield custom-select" ID="cboAccountType" runat="server">
<option Value="0">Choose...</option>
<option Value="1">Checking</option>
<option Value="2">Savings</option>
</select>
<div class="invalid-feedback" id="divAccountTypeFeedback" runat="server" visible="false">
Required
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-5">
<label for="txtBankAccountNumber">Bank Account Number</label>
<input class="form-control inputfield acct-number" name="BankAccountNumber" id="txtBankAccountNumber" runat="server">
<span toggle=".acct-number" class="fa fa-fw fa-eye field-icon toggle-account-number"></span>
<div class="invalid-feedback" id="divBankAccountNumberFeedback" runat="server" visible="false">
Required
</div>
</div>
<div class="form-group col-xs-5">
<label for="txtReenterBankAccountNumber">Re-enter Bank Account Number</label>
<input type="text" class="form-control inputfield" id="txtReenterBankAccountNumber" runat="server">
<div class="invalid-feedback" id="divReenterBankAccountNumberFeedback" runat="server" visible="false">
Required
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-5">
<label for="txtRoutingNumber">Routing Number</label>
<input type="text" class="form-control inputfield" id="txtRoutingNumber" runat="server">
<div class="invalid-feedback" id="divRoutingNumberFeedback" runat="server" visible="false">
Required
</div>
</div>
</div>
</div>
</div>
You should use .row instead of .form-row. .form-row is for Bootstrap 4
Related
I am trying to achieve this:
But I tried many things still can't. My result is this:
Here is my ASP.NET code:
<div class="row">
<div class="form-group-sm col-sm-4">
<asp:Label runat="server" Text="PD Number"></asp:Label>
</div>
<div class="form-group-sm col-sm-4">
<div class="form-control-inline"><asp:TextBox ID="txtPDNumber1" runat="server" CssClass="form-control input-sm"></asp:TextBox></div>
<div class="form-control-inline"> <asp:TextBox ID="txtPDNumber2" CssClass="form-control input-xs" runat="server"></asp:TextBox></div>
<div class="form-control-inline"> <asp:TextBox ID="txtPDNumber3" runat="server" CssClass="form-control input-sm"></asp:TextBox></div>
</div>
</div>
On top of the page I have:
<style>
.form-control-inline {
position: relative !important;
display: inline !important;
width: 30% !important;
}
</style>
Here is rendered html:
<span>PD Number</span>
</div>
<div class="form-group-sm col-sm-4">
<div class="form-control-inline"><input name="ctl00$MainContent$txtADNumber1" type="text" value="34" id="MainContent_txtAPDNumber1" class="form-control input-sm" /></div>
<div class="form-control-inline"> <input name="ctl00$MainContent$txtAPDNumber2" type="text" id="MainContent_txtPDNumber2" class="form-control input-xs" /></div>
<div class="form-control-inline"> <input name="ctl00$MainContent$txtAPDNumber3" type="text" id="MainContent_txtPDNumber3" class="form-control input-sm" /></div>
</div>
</div>
How do I adjust to make them inline. Also adjust the width of the textbox.
Have you tried using bootstrap grids. Something like this:
<div class="row">
<div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber1"></div>
<div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber2"></div>
<div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber3"></div>
</div>
In Bootstrap 3 and Bootstrap 4, there is a class you can add to a form element called form-inline, which will place your input elements on the same row. It's tough to determine from the provided code, but wrapping your input elements with a form tag and adding the form-inline class you might get your desired output.
Note: When a responsive breakpoint is reached, these elements will go be displayed on their own rows.
https://codepen.io/cowanjt/pen/QMZQjv... This will show you the code inaction.
<div class="container">
<div class="row">
<form class="form-inline">
<input type="text" class="form-control" id="exampleInput1" placeholder="">
<span>-</span>
<input type="text" class="form-control" id="exampleInput2" placeholder="">
<span>-</span>
<input type="text" class="form-control" id="exampleInput3" placeholder="">
</form>
</div>
</div>
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
Okay. I'm trying to recreate this form in particular using as much default bootstrap styling as possible.
The problem I'm having is having the left and right sidelooking like this.
I'm using a Modal class for the dark background.
<div class="panel-footer modal_custom">
<div class="container">
<h2>Talk to us</h2>
<h4>What's on your mind?</h4>
<form action="" role="form">
<div class="form-group col-lg-3">
<label for="form-elem-1"> Name</label>
<input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-2"> Telephone</label>
<input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-3"> Email</label>
<input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-4"> Company</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
</div><br />
<div class="form-group>
<label for="form-elem-4"> Enquiry</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your enquiry" />
</div>
</form>
</div>
</div>
I don't need much help on the color and those smaller things. just on how to position the Enquiry to the right and making it looks as close to the example as possible.
There isn't any css yet that affects much of the code above. And I'm failry new to the fomr function. How would I have the form actually work too.
Is this what you need, now you have add some your styles for button, and background
<div class="panel-footer modal_custom">
<div class="container">
<h2>Talk to us</h2>
<h4>What's on your mind?</h4>
<form action="" role="form">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="form-elem-1"> Name</label>
<input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
</div>
<div class="form-group">
<label for="form-elem-2"> Telephone</label>
<input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
</div>
<div class="form-group">
<label for="form-elem-3"> Email</label>
<input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
</div>
<div class="form-group">
<label for="form-elem-4"> Company</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label class="col-md-3" for="comment">Comment:</label>
<div class="col-md-9">
<textarea class="form-control" rows="13" id="comment"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9098/
Try to re-build that form using responsive Table. Set the table with two columns and get the required design without change in CSS.
so I was trying to create a form panel with Twitter Bootstrap into the center of the page, and hopefully even when the browser is resizing, it still be at the center,
here's what I tried on jsfiddle, the problem is I can't seem to make it center, anyone had ideas? the full code is in below
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">
Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe"
required="" />
</div>
<div class="form-group">
<label for="inputPassword">
Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******"
required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">
Submit</button>
</form>
</div>
</div>
</div>
</div>
the preview:
Please replace
<div class="panel panel-default">
with this
<div class="panel panel-default" style="max-width:400px;margin-left:auto; margin-right:auto;">
You can also use columns to size and center your panel, for example:
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe" required="" />
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******" required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
Try setting the margins in the div's style attribute:
style="margin-left:auto;margin-right:auto;"
Hope it works...
<div class="control-group">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
this is not working for me, I dont wanna use 'form-horizontal' class or a table for this. I have tried with row and row-fluid class but its not working.
You can wrap your code with <div class="form-horizontal">. You don't need to have a form to use form-horizontal.
Example:
<div class="form-horizontal">
<div class="control-group row-fluid form-inline">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
</div>
</div>
You want horizontal form layout. This can be achieved by wrappping your code between a div having class as form-horizontal.
<div class="form-horizontal">
<div class="control-group">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
</div>
To learn more click here