ASP.NET MVC Bootstrap form controls not aligned properly - asp.net-mvc

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>

Related

Concatenate asp-validation-for result with an Icon

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?

bootstrap5 way of right aligning two buttons

I am using Bootstrap5 and wondering how to align two buttons to the right in the same column as the "Delete" button. Another problem is no matter which "breakpoint" (md, sm) I use it's not possible to right align these two buttons properly. I am wondering what is the bootstrap way of doing it.
Snippet
<form>
<div class="hx-form-group position-relative">
<label for="el62ba8cb87eb84be2bebc9c2970de0552" class="form-label">Goal #1</label><span class="input-group"><input id="el62ba8cb87eb84be2bebc9c2970de0552" type="text" class="form-control" placeholder="Enter goal #1 text here." _bl_6="">
<button type="button" class="hx-button btn btn-danger" _bl_7="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="hx-form-group position-relative">
<label for="el28a7e89fc62249dd80048d65487a2354" class="form-label">Goal #2</label><span class="input-group"><input id="el28a7e89fc62249dd80048d65487a2354" type="text" class="form-control" placeholder="Enter goal #2 text here." _bl_8="">
<button type="button" class="hx-button btn btn-danger" _bl_9="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="hx-form-group position-relative">
<label for="ele59dd34cf9ed4db2a92de894f47b5946" class="form-label">Goal #3</label><span class="input-group"><input id="ele59dd34cf9ed4db2a92de894f47b5946" type="text" class="form-control" placeholder="Enter goal #3 text here." _bl_10="">
<button type="button" class="hx-button btn btn-danger" _bl_11="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="container text-center">
<div class="row justify-content-end">
<div class="col-4">
<button type="button" class="hx-button btn btn-secondary" _bl_4="" disabled="">
New Goal
</button>
</div>
<div class="col-4">
<button type="submit" class="hx-button btn btn-primary">
Save
</button>
</div>
</div>
</div>
</form>
First of all, you don't need to use row and col as a wrapper of buttons as row cols have different purposes so you can do it like this
[https://codepen.io/kukrati/pen/YzaYEXy]
and make sure you have removed its parent .container class
if you don't want to change your existing layout due to some limitations then you just need to replace .col-lg-4 with .col-auto and then remove the parent .container class

ngMessages and Nested Scopes - Datepicker in an ngForm on a Tab

OP Update
I've figured out the problem and this issue is now closed. Would one day like to find the time to post the solution as an answer here.
I'm having a bit of an issue working with ngMessages inside an ng-form on an Angular Bootstrap tab. Further complicating things, the thing I am validating is a Angular Bootstrap datepicker. So the code is as follows, and as you can see, I've got a datepicker on an ng-form which is on a Tab.
<uib-tab index="5" heading="{{tabs[5].title}}" select="changeCheck($event)">
<ng-form name="{{tabs[5].form}}">
<div class="col-md-9">
...
<div class="col-md-6">
<h4>Add Followup</h4>
<div class="form-group">
<label for="addFollowupDate" class="control-label">Date:</label>
<div class="input-group">
<input type="text" id="addFollowupDate"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-required="true"
ng-model="newFollowup.date"
is-open="addFollowupPopup.opened"
datepicker-options="dateOptions"
close-text="Close"
alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openAddFollowupPopup()"><i class="fa fa-calendar"></i></button>
</span>
<div class="help-block" ng-messages="followupsForm.newFollowup.date.$error" ng-if="followupsForm.newFollowup.date.$invalid && followupsForm.newFollowup.date.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
</div>
I've assigned that form to the scope using the following line:
$scope.followupsForm = $('ng-form[name="followupsForm"]').data('$formController');
And I have successfully set the control to touched on a submit which does make the border go red:
if ($scope.followupsForm.$invalid) {
angular.forEach($scope.followupsForm.$error, function (formErrorField) {
angular.forEach(formErrorField, function (errorField) {
errorField.$setTouched(); // by setting to touched, the relevant message will display if the field is invalid.
});
});
}
But the ng-message for required does not display.
Any ideas why? Could be a tough one with nested scopes etc. (of the tab and the picker).

How can I use Bootstrap button addons in my MVC view

I'm having difficulty getting Bootstrap's button addons to work in my MVC view. I'm using the latest NuGet version of ASP.NET MVC (5.1 rc1) and Bootstrap (3.03).
I have the following in my view (now that I've pared it back to just hand-coded HTML rather than using Html.EditorFor(), in an attempt to getting it to work):
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true)
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
This generates the following HTML:
<form action="xxx" method="post">
<input name="__RequestVerificationToken" type="hidden" value="T3k..." />
<div class="form-horizontal">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
</form>
The problem is that, when this is displayed in the browser (Chrome 32 / IE 11), there's a big gap between the input box and the button. Like this:
If I reduce the size of the div surrounding the input-group div to col-lg-3 or smaller, it's fine. But anything larger than that leaves a gap.
It's as though there's a maximum size on the input - and indeed, all my inputs do seem to be smaller their container div...
What could be causing this?
The default Site.css stylesheet that comes with a new MVC 5 project has a rule that limits the max-width of inputs. What you're getting is the result of the control spanning the full available width like it's supposed to, but then the input, itself, is being constrained to a defined width. Just comment out that piece of the stylesheet and everything will work as it should.
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
It's a pretty egregious shortcut the team seems to have taken in order to quickly build the sample site.

How to handle Twitter Bootstrap fields with Thymeleaf Spring and less code

I need some advice how is a recommended way to handle Twitter Bootstrap fields with Thymeleaf. I know that recommendations are not so easy, so I wrote my thoughts about it and hope you can comment it. At the end there a some concrete questions.
First I tried a fragment which shows what is needed to generate
<div th:fragment="textfield">
<div class="control-group"
th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName
</label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
which can be used with
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag">
<label class="control-label replace">Benutzer-Id</label>
<div class="controls replace">
<input type="text" value=""/>
</div>
</div>
or in short
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag"/>
It's not very flexible about the input, so you need for a checkbox an own fragment.
Next I choose the layout-approach:
<div layout:fragment="bsfield">
<div class="control-group" th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName </label>
<div class="controls">
<span layout:fragment="bsinput" th:remove="tag">
<input type="text" class="replace" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</span>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
Which is very flexible because I can define my input directly.
I can use it shortly with
<div layout:include="templates::bsfield" th:with="fId='firstName'" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
or more prototype style
<div class="control-group" layout:include="templates::bsfield" th:with="fId='lastName'" th:remove="tag">
<label class="control-label" th:remove="all">Last Name</label>
<div class="controls" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
</div>
Both variants has still a lot of boilerplate. So I think about the following solution inspired by Playframework helper.
<input type="text" th:bsfield="firstName" th:disabled="${disabled}"/>
and writing a Processor which creates
<div class="control-group"
th:classappend="${#fields.hasErrors('${fId}')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.${fId}}+':'">
FirstName </label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{${fId}}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('${fId}')}"
th:errors="*{${fId}}"></span>
</div>
</div>
and replace ${fId} with the value of bsfield in this example "firstname". After that Thymeleaf should recompute it (setRecomputeProcessorsImmediately (true);) For the prototype I think it's necessary to write a JS-Solution.
I'm unsure if this is really clever or a misuse of Processors. Furthermore I'm unsure how much time a beginner need to write such a processor. Are 4 hours realistic or more a few days?
Would appreciate if someone can give me a hint.
In the meantime I did it. As a beginner you must calculate 4-8 hours, without JUnit tests (it looks difficult to test processors) and DTD and editor-support. The most problems I had was that it's difficult to reuse an existing node after changing attributes. Here it's better to clone it.
Next time I think I can do it in 1 or 2 hours.
The experience is very good, you have clean and short code. With the JS-File you don't lose the prototyping experience.

Resources