I am designing the form using Bootstrap. I wanted to remove the space between send inquiry to and company name.
I am getting the output as
Send inquiry to: companyname
countryname
I want the result as
Send Inquiry to:companyname
countryname
Code:
<div class="formmain">
<fieldset class="scheduler-border">
<legend class="scheduler-border">INQUIRY DETAILS</legend>
<div class="row">
<div class="form-group">
<%--<label class="control-label input-label" for="Send Inquiry">Send inquiry to:</label>--%>
<%-- <label class="control-label col-sm-2" for="Send Inquiry">Send inquiry to:</label>--%>
<%--<h3>Send inquiry to:</h3>--%>
<label class="control-label col-sm-2" for="usr">Send inquiry to:</label>
<div class="col-sm-10">
<asp:Label ID="lbCompanyname" runat="server" Text=""></asp:Label>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-sm-2 col-sm-offset-2">
<asp:Label ID="lbcountry" runat="server" Text=""></asp:Label>
</div>
</div>
</div>
</fieldset>
</div>
I know this is a basic question. I am new to Bootstrap. I tried by putting Padding Property but it didn't work for me.
Try this:
<label class="control-label col-sm-2" for="usr">Send inquiry to:</label>
<div style="display:inline-block; vertical-align:top">
<asp:Label ID="lbCompanyname" runat="server" Text=""></asp:Label><br />
<asp:Label ID="lbcountry" runat="server" Text=""></asp:Label>
</div>
Related
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
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
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.