I'm creating a prestashop 1.7.2.1 module. Prestashop comes with bootstrap 4 support.
I'm trying to use the from validation example from https://v4-alpha.getbootstrap.com/components/forms/#validation with the following code:
<div class="container">
<form>
<div class="form-group row has-success">
<label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" placeholder="name#example.com">
<div class="form-control-feedback">Success! You've done it.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group row has-warning">
<label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="name#example.com">
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group row has-danger">
<label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-danger" id="inputHorizontalDnger" placeholder="name#example.com">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
</form>
</div>
using Pingendo 4 (bootstrap 4 desktop app editor) it works properly.
but when I add this code to my prestashop module all the inputs contains the validation icons repeated all through the input's width.
any ideas ?
PrestaShop's bootstrap CSS for these icons is being overriden by PrestaShop's own CSS.
When disabling the background property, it works fine.
You can modify the CSS and change background property to background-color.
Related
As you can see in the picture below, the input tag aligns properly with its label. But the dropdown is not horizontally in the same line as its label; it's a bit upward vertically. Same is true for the checkbox. I would like to see them exactly in the same line as their labels. I'm using ASP.NET Core that comes with latest version of Bootstrap by default. Issue probably is not related to ASP.NET, but just in case, following is the Form in ASP.NET where tag helpers are used. NOTE: The model property Test1 in my ASP.NET model is of type bool and therefore the ASP.NET render <input asp-for="Test1" class="form-control" style="zoom:0.5;" /> as a checkbox. But that, I think, is not relevant here.
<form asp-controller="myController" asp-action="myAction" method="post" class="form-horizontal">
<div class="form-group">
<label asp-for="ProjectTitle" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ProjectTitle" class="form-control" />
<span asp-validation-for="ProjectTitle" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="SelectedProjStatus" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="SelectedProjStatus" asp-items="Model.lstProjStatuses"></select>
</div>
</div>
<div class="form-group">
<label asp-for="Test1" class="col-md-2 control-label"></label>
<div class="col-md-1">
<input asp-for="Test1" class="form-control" style="zoom:0.5;" />
<span asp-validation-for="Test1" class="text-danger"></span>
</div>
</div>
</form>
I'd like to accomplish a horizontal form with rows of multiple left aligned form controls per row. The final layout should look like this
First of all I want the icon show up NEXT to the name of the user on the right side of the user's name just like in the image showed above.
I use GWT along with bootstrap3.3.2. I read a lot about mix of horizontal forms
with inline forms or using horizontal forms along with rows of form controls. The last approach I like most.
I prepared a bootply which shows my first problem (I'll create a second bootply and stackoverflow post for additional problems). http://www.bootply.com/hheckner/GiPzaqWHlT
As you can see there, the icon does not align well (vertically) to the name of the user. Furthermore I'd like to show up the icon NEXT to the user's name, so if the user name is longer the image should move to the right and vice versa. Using the grid does not help here (I think at least). The icon should show up immediately next to the user name?
How can I accomplish this?
To get icon showing next to some text you just need to have span right after text, but still inside your <p> element.
I made somewhat similar form to the one you provided in screenshot using only Bootstrap Grid. There are probably multiple solutions, that could be better in terms of lines of code, but when you get used to grid system this should be quite fast method.
I have to warn you I used <h4></h4> for all text, and no special element for some text, so you should fix it accordingly. Also Bootstrap's form-inline class works only when viewport is bigger then 768px - you might not see working example on JSFiddle as you would want, but when you see it on screen bigger then 768px, it should be just fine.
<div style="text-align:left;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h4>Owner</h4>
</div>
<div class="col-md-8">
<h4>Hannes Heckner <span class="glyphicon glyphicon-pencil"></span></h4>
</div>
</div>
<form class="form-inline">
<div class="row">
<div class="col-md-4">
<h4>Scheduled for</h4>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-1">
<h4>Begin:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="beginDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="10:30">
</div>
(Duration: <div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="30">
</div> min)
</div>
</div>
<div class="row">
<div class="col-md-1">
<h4>End:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="endDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="endTime" placeholder="11:30">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4>Location</h4>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" class="form-control" id="location">
</div>
</div>
</div>
</form>
</div>
</div>
JSFiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/
I need to have 3 form input fields in a row with their respective labels on the top. When the row wraps I want the labels to go with the corresponding input and stay on top. I can get the labels to appear to the left of the input fields just fine. Just not on top of the input. How can this be achieved
Working with colums should do the trick. Try something like this
<div class="row">
<div class="col-xs-3">
<label>Label 1</label>
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<label>Label 2</label>
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-3">
<label>Label 3</label>
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
The trick is to use col-md-4 because Bootstrap is built on a 12 col grid system. That way on small and extra small devices the coloumns automatically collapse down to a single row. Here's my pen.
http://www.bootply.com/Eb85k7lOAx
<div class="container">
<div class="row">
<div class="col-md-4">
<label>One</label>
<input class="form-control" placeholder=".col-md-4" type="text">
</div>
<div class="col-md-4">
<label>Two</label>
<input class="form-control" placeholder=".col-md-4" type="text">
</div>
<div class="col-md-4">
<label>Three</label>
<input class="form-control" placeholder=".col-md-4" type="text">
</div>
</div>
</div>
I am trying to create a search form, something like below..
http://tinypic.com/r/2py0scy/8
I am new to front end development and confused if an in-line form or a input group should be used?
The issue with inline forms is I am unable to size the input box (width) so any pointer there would also be really helpful.
Thanks!
Code Update
from home.HTML
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
from the layouts - application.html.erb
<div class="container">
<%= yield %>
</div>
To play with the width in Bootstrap, see the grid system and the use the columns:
For instance, if you want a form on the right and the width at the 50% of the container, you can do:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
This is div on the left
</div>
<div class="col-xs-12 col-md-6">
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
</div>
</div>
</div>
The previous code, is designed to change the behavior on small devices.
You can use both depending on what you're trying to accomplish. Bootstrap is well-documented, did you read their documentation regarding forms ? http://getbootstrap.com/css/#forms
By default input items are 100% width in bootstrap (e.g. they fill the containing element they are in). For instance:
<input type="text" class="form-control" placeholder="Text input">
would result in a 100% width input field and
<style>
.smallwidth {max-width: 200px;}
</style>
<div class='smallwidth'><input type="text" class="form-control" placeholder="Text input"></div>
would result in a 200px width input field, because it is restricted by the outer div I put around it.
I wish to have labels right-aligned next to its input box (with a space in between). However, labels are still left-aligned. According to Boostrap3 documentation and this question, the form-horizontal class should be used, but still result is not right.
The django template code below does generate fields in a two-column fashion, but with left-aligned labels:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.code|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-2 input-md">
{{ form.name|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.company|bootstrap_horizontal }}
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
I guess I'm missing something. Thanks in advance for your help.
EDITED:
Output HTML in jsfiddle.
Image of actual output included as well in this link. As you can see, Code & Company are left-aligned.
I think your text is right-aligned but the effect is not visible due to the nesting of your grid classes.
Try something like:
<form class="form-horizontal container" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Code</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<label for="inputPassword1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Company</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
When you nest your grid classes (col--) a child get a percentage of the width of its parent. When you nest a col-lg-6 in a col-lg-6 its with will be 25% of the viewport 50% of 50%.
In the case you want to input next to each other with a float left (your col-- classes add this float) they can't be in different input-groups. The .from-group has a clearfix which undo the float left. So try something like:
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company 2</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>