bootstrap grid and columns for 7 fields or more - bootstrapping

I am using below code for fields more then 7 button fields are scattered
<div class="panel-body">
<div class="row">
<div class="col-xs-12 ">
<fieldset class="well well-sm"><legend class="k-widget">main part1</legend><br>
<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">Name1: <field here >...... </div>
same for next 7 or more fields.
I get my fields in scattered manner means not inline, I want my first four field in first row and then next four in second row and on... but using this code appeares scattered.

EDIT:
I attempted to fix the code from what you provided, and it puts 4 forms in a row, then 4 in the next row, etc (on mobile screens the forms will be stacked to fit the screen)
See my example here: https://jsfiddle.net/vvp5rey8/
Here is the code:
<div class="panel-body">
<div class="row">
<div class="col-xs-12 ">
<fieldset class="well well-sm"><legend class="k-widget">main part1</legend> <br>
<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name1: <field here >......
</div>
<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name2: <field here >......
</div>
<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name3: <field here >......
</div>
<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name4: <field here >......
</div>
<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name5: <field here >......
</div>
<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name6: <field here >......
</div>
<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name7: <field here >......
</div>
<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name8: <field here >......
</div>
</div>
</div>
</div>
Is that what you're looking for?

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?

Bringing columns together when working with Bootstraps

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

HTML form without CSRF protection alert (Acunetix)

I use in my form #Html.AntiForgeryToken() and in action I use [ValidateAntiForgeryToken] attribute but when test my site by Acunetix get this error :
HTML form without CSRF protection
html :
<form action="/Car/SearchCar?uniq=-107215139" method="POST" name="form" id="FormCarSearch">
<input name="__RequestVerificationToken" type="hidden" value="NpoBFo4bSCwbm0yZ6dIrpOazM00uX-rKNbru9sfVPGV9cJ8qaDsYaAqsRDDKuy0W0R7gCZSVQu_QN2qD8uTeThan7Ad78GNteLdQN2TKPYJUVD3MrxeeT1YG_i4IYaa6zzENb9CKR1p3zcW9HmDNxA2">
<div class="">
<h4 class="title">
جستجوی خودرو :
</h4>
<div class="row">
<div class="form-group col-sm-6 col-md-2 col-md-push-10 col-sm-push-6 ">
<div class="datepicker-wrap">
<label>از تاریخ </label>
<input name="CarFormDate" autocomplete="off" id="CarFromDate" type="text" class="input-text full-width hasDatepicker" placeholder="از تاریخ ">
</div>
</div>
<div class="form-group col-sm-6 col-md-2 col-md-push-6 DestinationT">
<div class="datepicker-wrap">
<label>تا تاریخ </label>
<input name="CarToDate" autocomplete="off" id="CarToDate" type="text" class="input-text full-width hasDatepicker" placeholder="تا تاریخ ">
</div>
</div>
<div class="form-group col-sm-6 col-md-2 col-md-push-2 col-sm-push-6">
<label> شهر</label>
<div class="selector">
<select class="full-width" name="CarCity" id="CarCity">
<option value="1">کیش</option>
</select><span class="custom-select full-width">کیش</span>
</div>
</div>
<div class="form-group col-sm-6 col-md-2 col-md-pull-2 col-sm-pull-6">
<label>نوع خودرو</label>
<div class="selector">
<select class="full-width" name="CarStyle" id="CarType">
<option value="1">سواری</option>
<option value="2">شاسی بلند</option>
<option value="21">کروک اسپورت</option>
</select><span class="custom-select full-width">سواری</span>
</div>
</div>
<div class="form-group col-sm-6 col-md-2 col-md-pull-6 col-sm-push-6">
<label class="transparent">جستجوی خودرو</label>
<button class="full-width soap-icon-search" type="button" id="SearchCar">جستجوی خودرو</button>
</div>
</div>
</div>
</form>
How to fix this vulnerability:
Check if this form requires CSRF
protection and implement CSRF countermeasures if necessary.
Is there problem in this case?
How can i fix this?
CSRF detection, by very nature, is hard to detect automatically and often requires some form of human verification to check whether the alert is a false positive or not.
There is a really detailed article by Acunetix below regarding CSRF tokens which I would recommend going over - https://www.acunetix.com/websitesecurity/csrf-attacks/
If you need any further details, let me know.

Bootstrap input-group-addon alignment issue in ASP.NET View

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 need to submit my form instantly without using submit button in struts2 with html 5

Since I have save button in the right menu. so when I pressed save in the right menu, it should save the values into the bean without submitting the form.
<form action="personal-info.action" id = "userform" name="userform" method="post">
<div class="clearfix">
<h2>Basic Information</h2>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="form-group clearfix col-sm-12 col-xs-6">
<label>Title</label>
<div>
<s:select list="titleList" listKey="displayKey" onChange="jsFunction()" listValue="displayValue" name="title" id ="title" cssClass="selectpicker show-tick" required="true" />
<!-- <select class="selectpicker show-tick" data-width="auto" name="title" required>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
</select> -->
</div>
</div>
<div class="form-group clearfix col-sm-12 col-xs-6">
<label>Gender</label>
</form>

Resources