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>
Related
I created a dropdown menu to log in instead of logging in at Login.cshtml but i can't seem to be able to use the model that contains the email password etc. I am not sure how to explain this but here is what i made so far:
I created the dropdown form and placed it in _LoginPartial.cshtml so it shows on the navbar
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Log-In
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="width: 300px" >
<!----------->
<div class="col-lg-12">
<div class="text-center">
<h3><b>Log In</b></h3></div>
<form id="ajax-login-form" method="post" role="form" autocomplete="off">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
</div>
<div class="form-group">
<div class="col-xs-5">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-danger" value="Log In">
</div>
</div>
<div class="col-xs-5" align="Center">
<input type="checkbox" tabindex="3" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a tabindex="5" class="forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
and after this, i thought i can easily just insert #model loginmodel and i can start using that model but i'm met with so many errors. Any advice on how to do this? I am also open to other approaches too
We currently have some hardcoded code:
ng-form class="form-horizontal" name="genderForm">
<div data-fields="">
<div class="form-field-gender control-group form-field" data-field="">
<div class="controls" data-input="">
<label class="radio">
<input type="radio" ng-model="appuser.traits[6]" ng-value= "[42198]" name="field-input-gender" id="field-input-gender-0" required>
<i class="fa fa-male fa-fw"></i> {{genderQuestion.traits[0].value_text}}
</label>
<label class="radio">
<input type="radio" name="field-input-gender" ng-model="appuser.traits[6]" id="field-input-gender-1" ng-value="[42199]" required>
<i class="fa fa-female fa-fw"></i> {{genderQuestion.traits[1].value_text}}
</label>
</div>
<div class="controls">
<div class="text-error" data-error="">
</div>
</div>
</div>
</div>
</ng-form>
Ideally it will be dynamic so it should be something like this:
ng-form class="form-horizontal" name="genderForm">
<div data-fields="">
<div class="form-field-gender control-group form-field" data-field="">
<div class="controls" data-input="">
<label class="radio">
<input type="radio" ng-model="appuser.traits[{{genderQuestion.id}}]" ng-value= "[{{genderQuestion.traits[0].id}}]" name="field-input-gender" id="field-input-gender-0" required>
<i class="fa fa-male fa-fw"></i> {{genderQuestion.traits[0].value_text}}
</label>
<label class="radio">
<input type="radio" name="field-input-gender" ng-model="appuser.traits[6]" id="field-input-gender-1" ng-value="[{{genderQuestion.traits[1].id}}]" required>
<i class="fa fa-female fa-fw"></i> {{genderQuestion.traits[1].value_text}}
</label>
</div>
<div class="controls">
<div class="text-error" data-error="">
</div>
</div>
</div>
</div>
</ng-form>
But something about going from ng-model="appuser.traits[6]" to ng-model="appuser.traits[{{genderQuestion.id}}]" and ng-value="[42199]" to ng-value="[{{genderQuestion.traits[1].id}}]" seems to make it spazz out and not resolve any of the {{}} fields.
Any idea where I'm going wrong? Technically genderQuestion.id = 6 and genderQuestion.traits[1].id = 42199 but in this format it doesn't seem to like those.
Maybe I'm missing like a toString format or something?
2 way data binding with the ngModel directive doesn't need {{ }} again. You can directly refer to the scope object with genderQuestion.id
appuser.traits[genderQuestion.id].
Ta
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'm working on an ASP.NET MVC web application, and I'm using Bootstrap 3.
I have the following markup inside my login view to show username and password:
<fieldset>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user blue"></i>
</span>
<input type="text" class="form-control" placeholder="Username" name="Username" value="#Model.UserName">
</div>
<div class="clearfix"></div><br>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock blue"></i>
</span>
<input type="password" class="form-control" placeholder="Password" name="password">
</div>
<div class="clearfix"></div>
<p class="center col-md-5">
<button type="submit" class="btn btn-primary">Login</button>
</p>
</fieldset>
However, the glyphicon-lock inside the password field is not showing on IE, FF, or Safari:
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