I have an issue where 2/4 div's are not appearing at all in the markup when the page loads in the browser. There isn't any script/CSS involved here at all.
I have tried to isolate my markup by creating a fiddle and then trying but still can't figure out what's wrong. I have run the markup through a HTML lint as well just to be sure.
Here's my markup
<div class="form-group">
<label class="col-sm-2 control-label">Subnet</label>
<div class="col-sm-4">
<select class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Type</label>
<div class="col-sm-4">
<select class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Team</label>
<div class="col-sm-4">
<select class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Machine Type</label>
<div class="col-sm-4">
<select class="form-control"></select>
</div>
</div>
and the fiddle is at - https://jsfiddle.net/zpsygxsq/4/
Can someone take a look and advise?
Use Apporopriate tag and complete that.... Select tag is not autocomplete tag.. it must be closed in html... So use
<select class="form-control"></select>
Instead Of
<select class="form-control" />
Checkout Your Following Snippest With Correction
<div class="form-group">
<label class="col-sm-2 control-label">Subnet</label>
<div class="col-sm-4">
<select class="form-control"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Type</label>
<div class="col-sm-4">
<select class="form-control"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Team</label>
<div class="col-sm-4">
<select class="form-control"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Machine Type</label>
<div class="col-sm-4">
<select class="form-control"></select>
</div>
</div>
Its becasue your self closing the select tags.
proper markup is.
<select class="form-control"></select>
not
<select class="form-control" />
It looks like there is no content /text in your structure that may be the reason.
Related
I'm currently creating a web app using Razor Pages. I scaffolded the "Project" Model by clicking on "Razor Pages using Entity Framework (CRUD)" which automatically created a "Create", "Edit", "Delete", and "Details" page for my model. However, on my "Create" page it displays like this:
Create Fields Displaying Vertically:
I have a many properties, so this page gets very long and requires a lot of scrolling. Is there a way to make the fields display horizontally something like this:
Create Fields Displaying Horizontally:
I saw a few examples of how to edit the HTML file to achieve this, but I'm new to HTML and because of the automatically generated code I don't know what I need to change. Here's a snippet of the code:
<div class="row">
<div class="col-md-4">
<form method="post">
<b>General:</b>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Project.projectID" class="control-label"></label>
<input asp-for="Project.projectID" class="form-control" />
<span asp-validation-for="Project.projectID" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Project.projectName" class="control-label"></label>
<input asp-for="Project.projectName" class="form-control" />
<span asp-validation-for="Project.projectName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Project.projectManager" class="control-label"></label>
<input asp-for="Project.projectManager" class="form-control" />
<span asp-validation-for="Project.projectManager" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Project.projectClient" class="control-label"></label>
<input asp-for="Project.projectClient" class="form-control" />
<span asp-validation-for="Project.projectClient" class="text-danger"></span>
</div>
</form>
</div>
</div>
Any ideas of how to change the code so my input fields display horizontally?
By default the Asp.net core Application using Bootstrap style, so, you could try to change the code as below:
<h4>General:</h4>
<hr />
<div class="row">
<div class="col-md-12">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectID" class="control-label col-md-3"></label>
<input asp-for="Project.projectID" class="form-control col-md-9" />
<span asp-validation-for="Project.projectID" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectName" class="control-label col-md-3"></label>
<input asp-for="Project.projectName" class="form-control col-md-9" />
<span asp-validation-for="Project.projectName" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectManager" class="control-label col-md-3"></label>
<input asp-for="Project.projectManager" class="form-control col-md-9" />
<span asp-validation-for="Project.projectManager" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectClient" class="control-label col-md-3"></label>
<input asp-for="Project.projectClient" class="form-control col-md-9" />
<span asp-validation-for="Project.projectClient" class="text-danger"></span>
</div>
</div>
</div>
</form>
</div>
</div>
Then the output as below:
More detail information about Bootstrap style, check Bootstrap 4 Grid System.
My problem is that first three fields are a little more to the right than the other fields. I don't know how to align those fields with the others.
I have an example on code pen.
Code for one of the problematic fields:
<div class="form-group">
<label for="inputRECE_DES" class="col-sm-2 control-label">Stranka:*</label>
<div class="col-sm-3">
<input type="text" id="inputACCO_NME" name="cACCO_NME" class="form-control" placeholder="#iLocalization._iTTmvc(Context, "#Enter few letters of client or VAT#")" value="#Model.cACCO_NME" />
</div>
<input type="hidden" id="hidden_iACCO_KEY" name="iACCO_KEY" readonly="readonly" value="#Model.iACCO_KEY" />
</div>
It looks like you were just missing a closing form-group DIV tag for your Kontact row, before the clearfix:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal do-not-submit" role="form" id="formJERECEProperties">
<input type="hidden" id="iRECE_KEY" name="iRECE_KEY" value="180001334">
<input type="hidden" id="hidden_cRECE_SRT" name="cRECE_SRT" value="6">
<input type="hidden" name="iENTE_KEY" value="110000007">
<input type="hidden" name="iBUUN_KEY">
<br>
<h3>testing</h3>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Testing</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputRECE_DBO" class="col-sm-2 control-label">Datum izposoje:</label>
<div class="col-sm-2">
<input type="text" class="form-control datepickerFiduro" name="b53b663f-86cb-422c-9b2a-a407990788e5" id="inputRECE_DBO" data-editable="1" data-default="true" value="08.03.2018" name1="dRECE_DBO">
</div>
<label for="inputRECE_DRE" class="col-sm-2 control-label">Datum vračila:</label>
<div class="col-sm-2">
<input type="text" class="form-control datepickerFiduro" name="a41fa57c-4654-4f13-a5eb-c4abb56a5950" id="inputRECE_DRE" data-editable="1" data-default="true" value="09.03.2018" name1="dRECE_DRE">
</div>
</div>
<div class="form-group">
<label for="inputRECE_DES" class="col-sm-2 control-label">Stranka:*</label>
<div class="col-sm-3">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input type="text" id="inputACCO_NME" name="98a4e8a7-55cb-4ab7-b075-7ab426566f5b" class="form-control ui-autocomplete-input" placeholder="Vpišite nekaj črk partnerja ali IDDDV"
value="" autocomplete="off" name1="cACCO_NME">
</div>
<input type="hidden" id="hidden_iACCO_KEY" name="iACCO_KEY" readonly="readonly" value="170000209" tabindex="-1">
</div>
<div class="form-group">
<label for="selectCONT_KEY" class="col-sm-2 control-label">Kontakt:</label>
<div class="col-sm-3">
<select id="selectCONT_KEY" class="form-control">
</select><input type="hidden" id="hidden_iCONT_KEY" name="iCONT_KEY">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group col-sm-12"></div>
<div class="form-group">
<label for="inputRECE_NME" class="col-sm-2 control-label">Ime reverza:</label>
<div class="col-sm-7">
<input type="text" class="form-control" name="ead8d066-2618-4ed2-b03e-84c6cb46da4d" id="inputRECE_NME" value="" name1="cRECE_NME">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Skladišče:</label>
<div class="col-sm-3">
<select id="inputDIVI_KEY" name="iDIVI_KEY" class="form-control">
<option value="140001070">Centralno skladišče</option>
</select>
</div>
<div class="col-sm-7"> </div>
</div>
<div class="form-group">
<label for="inputRECE_TEL" class="col-sm-2 control-label">Telefon:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="4c40d2be-7f87-4faf-a6ba-0ff9b95be11b" id="inputRECE_TEL" value="" name1="cRECE_TEL">
</div>
<label for="inputRECE_MOB" class="col-sm-1 control-label">Mobilni tel.:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="958d73bd-723b-4234-b625-1927e9cab407" id="inputRECE_MOB" value="" name1="cRECE_MOB">
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="inputRECE_EML" class="col-sm-2 control-label">E-pošta:</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="4f653c8e-5613-449c-9b85-6850c8c857d7" id="inputRECE_EML" value="" name1="cRECE_EML">
</div>
<div class="col-sm-5">
</div>
</div>
<div class="form-group">
<label for="inputRECE_NTO" class="col-sm-2 control-label">Opomba:</label>
<div class="col-sm-7">
<textarea class="form-control" id="inputRECE_NTO" name="cRECE_NTO">Prevzel je:
2 kom line
2 kom corner</textarea>
</div>
<div class="col-sm-3">
</div>
</div>
<div class="form-group">
<label for="selectRECE_STA" class="col-sm-2 control-label">Status:</label>
<div class="col-sm-2">
<select id="selectRECE_STA" name="cRECE_STA" class="form-control">
<option value="A" selected="">Osnutek</option>
<option value="B">Izdan</option>
<option value="9">Izbrisan</option>
</select>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</form>
The elements (in your codepen code) have different padding values due to different classes applied to them, which causes the different distance/width. Use a common class for all similar elements and a highly specific CSS selector to overwrite those settings with a common padding setting.
I have problem with responsive design. So i have components:
Here is code:
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
The problem is when i change size of window - i have this ugly destroyed design:
How i can fix it? (only bootstrap if it's possible)
UPDATE
Using advices i've add pull-left to all columns and everything is okay.
But when i little bit ensmall size there are result:
Bit of a guess right now, not sure if you want the form items to reflow or not. What is the expected result? Should each input be on it's own row (i.e. 4 rows of inputs)? Or should the two inputs per row be maintained at all sizes?
Here is an answer to place each input on their own row at the breakpoint.
Remove .pull-left from the first column in each row.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
Here is a solution for maintaining two inputs per row. You need to use a different column class. Currently you're using the medium -md- class. Here I have used the extra small -xs- class. See Bootstrap Grid Options for different column classes.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<div class="container">
<div class="row">
<div class="col-xs-7">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-5">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-7">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-5">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
I think you just need add the "pull-left" to all the column <div> tags like mentioned below:
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5 pull-left">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5 pull-left">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
I and able to get decent result.
I am trying to create a form that looks like this:
What I have come up with looks like this. I either can have the dropdown take up the correct amount of space, but then the text is underneath, or have the text next to the dropdown and everything gets smushed.
I'm not sure what I'm doing wrong. Here is the html:
<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
<div class="col-sm-8">
<div class="form-inline">
<div class="form-group">
<select class="liveSyncSchedule form-control"></select>
</div>
<div class="form-group">{{t "templates.scheduler.seconds"}}</div>
</div>
</div>
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.enabled"}}
</label>
</div>
</div>
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.persisted"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
<div class="col-sm-8">
<select class="misfirePolicy form-control">
<option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
<option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
</select>
</div>
</div>
All help is greatly appreciated!
The layout is messed because form-group class is not handled properly. Try this,
<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
<div class="col-sm-8">
<div class="form-inline">
<select class="liveSyncSchedule form-control"></select>
<span>{{t "templates.scheduler.seconds"}}</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.enabled"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.persisted"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
<div class="col-sm-8">
<select class="misfirePolicy form-control">
<option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
<option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
</select>
</div>
</div>
</form>
Thanks!
Here is a simplified fiddle: https://jsfiddle.net/mz1xgr38/
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Fire every</label>
<div class="col-sm-9">
<div class="row">
<div class="col-md-6">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-md-6">
Seconds
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9 ">
<div class="checkbox">
<label>
<input type="checkbox" />Enabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />Persisted
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Misfire policy</label>
<div class="col-sm-9">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
</form>
I'm experiencing an odd behaviour in Bootstrap where a col-sm-6 is expanding on top of the sibling column above it, which renders the sibling column unclickable.
Please see source code and live demo here: Codepen
Resize the output window to xs size (below 768px) to experience the issue).
The checkbox for 'As above' is unclickable because the phyiscal address 'Address line 1' is expanding above it, creating a sort of barrier.
The issue can be solved by adding 'col-xs-12' in addition to the 'col-sm-6', but Bootstrap should figure this one out by itself without this (as it normally does). Any ideas what is causing this?
EDIT:
One could argue that I should put all my fields in different rows, but for various reasons I'd like to keep everything within one row and let Bootstrap figure out the flow of the items, which normally works fine.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Postal address</h3>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalAddressLine1">Address line 1*</label>
<input type="text" class="form-control" id="inputPostalAddressLine1" required="" data-parsley-required-message="Please enter your postal address.">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalAddressLine2">Address line 2</label>
<input type="text" class="form-control" id="inputPostalAddressLine2">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalState">State*</label>
<select class="form-control" id="inputPostalState" required="" data-parsley-required-message="Please select the state from the dropdown.">
<option value="">Please Select</option>
<option value="nsw">NSW</option>
<option value="nt">NT</option>
<option value="qld">QLD</option>
<option value="sa">SA</option>
<option value="tas">TAS</option>
<option value="vic">VIC</option>
<option value="wa">WA</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalPostcode">Postcode*</label>
<input type="text" class="form-control" id="inputPostalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalSuburb">Suburb*</label>
<input type="text" class="form-control" id="inputPostalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
</div>
</div>
<div class="col-xs-12">
<h3>Physical address</h3>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="checkbox checkbox-default">
<label>
<input type="checkbox" value="" id="use-postal-address" data-parsley-multiple="use-postal-address">
<span class="icon"></span>
<span class="text">As above (use postal address)</span>
</label>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="form-group">
<label for="inputPhysicalAddressLine1">Address line 1*</label>
<input type="text" class="form-control" id="inputPhysicalAddressLine1" required="" data-parsley-required-message="Please enter your physical address.">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalAddressLine2">Address line 2</label>
<input type="text" class="form-control" id="inputPhysicalAddressLine2">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalState">State*</label>
<input type="text" class="form-control" id="inputPhysicalState" value="NSW" disabled="disabled">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalPostcode">Postcode*</label>
<input type="text" class="form-control" id="inputPhysicalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalSuburb">Suburb*</label>
<input type="text" class="form-control" id="inputPhysicalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
</div>
</div>
</div>
</div>
I think you're not clearing your floats properly across media queries.
Add .col-sm-6{overflow:hidden} to see if it solves it, then try to clear your floats whenever possible.
Also, read up on this, it might be helpful