I have an ASP MVC view that contains only a Textbox that takes a string, and a submit button to submit the value.
I want to add the validation error message with an Icon before it as in the following snippet:
<div class="form-group row">
<label class="col-sm-4 col-form-label">Check User Id</label>
<div class="col-sm-8">
<input asp-for="#Model.userId" type="text" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
<input type="submit" class="btn btn-primary" value="Check" asp-action="Index" asp-controller="UserController" />
<div class="col-sm-8">
<i asp-validation-for="userId" class="fa fa-info-circle"></i>
<span asp-validation-for="userId" class="text-dark"></span>
</div>
</div>
</div>
My Problem now is that the info Icon is always showing, and I want it to show ONLY if there is an error/validation message. Is there a way to achieve that from the view only with no changes to the Business logic?
Related
I have several textboxes within Bootstrap columns that I want to bring closer to one another, but no matter what I do the distance between textboxes stays the same.
How can I
Shorten the distance between the textboxes?
Shorten/make more narrow the column background or bring the textbox closer to the outside of a column
Here is the code that I have
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="bisformdynamiclabel">Box 1</div>
<input class="form-control" type="text" asp-for="myclass.box1" />
<span asp-validation-for="myclass.box1" class="alert-danger"></span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="bisformdynamiclabel">Box 2</div>
<input class="form-control" type="text" asp-for="myclass.box2" />
<span asp-validation-for="myclass.box2" class="alert-danger"></span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="col-lg-1">
<div class="bisformdynamiclabel">Box 3</div>
<input class="form-control" type="text" asp-for="myclass.box3" />
<span asp-validation-for="myclass.box3" class="alert-danger"></span>
</div>
</div>
</div>
Thank you in advance for everyone's help
I've got an issue I cannot seems to figure out. I have a simple form for four text input fields. The spacing looks great on all the browsers except for Chrome on IOS. The spacing between the input fields just seems to be ignored.
I'm using Bootstrap 4. Here's the HTML:
<div class="form-row">
<div class="col-md-2 col-lg-2 col-sm-5 col-6 pt-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="First name">
</div>
<div class="col-md-2 col-lg-2 col-sm-5 col-6 pt-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="Last name">
</div>
<div class="col-md-3 col-lg-3 col-sm-3 col-6 pt-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="E-Mail">
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-6 pt-2">
<input type="tel" class="form-control form-control-sm rounded bg-color-light-gray2" placeholder="Zip Code" name="loanzip" id="loanzip" maxlength="5" value="" />
</div>
<div class="col-md-3 col-lg-3 col-sm-5 col-12 search-results pt-2">
<button type="submit" class="btn btn-success btn-block btn-sm rounded font-size-15">Get Approved <i class="fa fa-thumbs-up" aria-hidden="true"> </i></button>
</div>
So frustrating when it looks Ok everywhere else.
Enclosed is a screen shot from Chrome on IOS.
Thanks for any help!
Tim
Here it is on mobile Safari...
Latest HTML but leaves extra spacing after the button only on IOS Chrome.
<form name="carloan" id="carloan" action="car-loan-application/" method="post">
<div class="row ml-2 mr-2">
<div class="col-6 col-xl-2 mb-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="First Name">
</div>
<div class="col-6 col-xl-2 mb-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="Last Name">
</div>
<div class="col-6 col-xl-2 mb-2">
<input type="email" class="form-control form-control-sm bg-color-light-gray2" placeholder="E-Mail">
</div>
<div class="col-6 col-xl-2 mb-2">
<input type="tel" class="form-control form-control-sm bg-color-light-gray2" placeholder="Zip Code">
</div>
<div class="col-12 col-xl-4 mb-2 search-results">
<button type="submit" class="btn btn-success btn-block btn-sm rounded font-size-15">Get Approved <i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
</div>
</div>
</form>
In your code, I can see your using col-md-3 which is for tablets, you are to use "col-xs (portrait device) or col-sm (landscape device)" depending on the width on IOS device. Or you can just use media queries or bootstrap 4 form-group class for your div (for a proper view). E.g.
<div class="form-group"> input or form button... </div>
In my following ASP.NET MVC Core project view, I want to display input, its corresponding label and submit button Add controls in the same line. but they are displaying in three separate lines, why?. How can I make them display in the same line (please note that the dropdown control is correctly showing its label and submit button Go in the same line). Note: Probably not related - but we know the content of the labels are coming from the data annotations of the corresponding model.
View:
<div class="col-md-9">
<form asp-controller="myControllerName" asp-action="myTestAction" method="post" class="form-horizontal">
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<div class="col-md-9">
<label asp-for="SelectedYear" class="control-label"></label>
<select asp-for="SelectedYear" asp-items="Model.lstYears"></select><button type="submit" class="btn btn-info btn-xs">GO</button>
</div>
</div>
<div class="form-group">
<div class="col-md-9">
<label asp-for="testDesc" class="control-label"></label>
<input asp-for="testDesc" class="form-control"/><button type="submit" class="btn btn-info btn-xs">Add</button>
</div>
</div>
</form>
</div>
Snapshot of Page display from the above View
UPDATE:
After following a suggestion from the user #RatHat I've been able to display the three controls inline. But, still why they are not aligned left like the other three controls for dropdown. New display:
When using a .form-horizontal, you need to specify the number of columns that each element should cover:
<div class="form-group">
<!-- add the number of columns that the label should use -->
<label asp-for="testDesc" class="control-label col-sm-2"></label>
<!-- add the number of columns that the input should use -->
<div class="col-sm-8">
<input asp-for="testDesc" class="form-control">
</div>
<!-- add the number of columns that the Add button should use -->
<div class="col-sm-2">
<button type="submit" class="btn btn-info btn-xs">Add</button>
</div>
</div>
I can't seem to align an input-group-addon correctly in an ASP.NET View.
<form asp-action="Create">
<div class="form-horizontal">
<h4>Category</h4>
<hr />
<div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Hex" class="col-md-2 control-label"></label>
<div class="col-md-10">
<div class="input-group">
<div class="input-group-addon"><i></i></div>
<input asp-for="Hex" class="form-control" value="" />
<span asp-validation-for="Hex" class="text-danger" />
</div>
</div>
</div>
<div class="form-group">
<label asp-for="CompanyId" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="CompanyId" asp-items="Model.Companies" class="form-control">
<option value="">--Please Select--</option>
</select>
</div>
</div>
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
This looks fine in JSFiddle (after adding labels back in). But looks like this when I run the View:
If I swap the input-group-addon and the input the addon floats off to the right.
Could this be something to do with the way a child View is rendered by the _layout view?
Could this be something to do with the way a child View is rendered by the _layout view?
Yup. Especially with renderbody.
I have this in an MVC view
<form id="fileupload" action="#Url.Action("Save")" method="POST" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="form-group">
<label for="datepicker1">Invoice Date</label>
<div class='bfh-datepicker' id='datepickerDiv'>
<input type='text' id="datepicker1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="InvoiceNumberTB">Invoice Number</label>
<input type="text" class="form-control" id="InvoiceNumberTB" />
</div>
<div class="form-group">
<label for="NetAmountTB">Net Amount</label>
<input type="text" id="NetAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="TaxAmountTB">Sales Tax</label>
<input type="text" id="TaxAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceTotalTB">Invoice Total</label>
<input type="text" id="InvoiceTotalTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceDescriptionTB">Description</label>
<input type="text" id="InvoiceDescriptionTB" class="form-control" />
</div>
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Save</button>
</div>
</div>
</div>
But the label for the file upload is not formatting as I would have hoped (at the top of the field as the others) but looks like this
Could someone point me in the correct direction?
Thanks
Wrap the content after the label in a form-control-static div and lose the form-control class on the input:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<div class="form-control-static">
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" />
</span>
</div>
</div>
You want your btn span to display as a block element. Try adding a display: block; style to it, or use a simple bootstrap utility class like .show:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button show">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
Example: http://codepen.io/kspearrin/pen/PqpgYq