I'm using bootstrap to make input elements with prepended text, using code from
https://getbootstrap.com/docs/4.0/components/input-group/#basic-example
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">#</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
The problem is that the inputs are wrongly displayed:
This is how it should be displayed
I already deleted all the contents of my css file to test if the problem was there but it isn't.
I assume that can be fixed with css, but I don't know how.
For that to happen your classes are not calling the CSS anexed to them.
Related
i am experiencing issues with the bootstrap class 'input-group-prepend'.
The prepended #-icon container has a wrong height and the right corners are rounded, although the left corners of the following input field get squared (as expected.
screenshot
<div class="input-group">
<label for="linkdev_id" class="sr-only">ID</label>
<div class="input-group-prepend">
<span class="input-group-text"><img src="./sym/hash.svg" width="20" height="20"></span>
</div>
<input type="text" minlength="6" maxlength="6" name="linkdev_id" id="linkdev_id" class="form-control" placeholder="ABCDEF" style="text-transform:uppercase;">
</div>
Thanks in advance!
tried to remove the label and replacing the svg in it, but no effect
I wonder how to implement Bootstrap4 input group label between two input field. There are "prepend" and "append" styles, but in this case an ... don't know how to name it ... "center" style is needed. Am I missing something?
The corners of the element should not be rounded - this is a visual requirement. We must solve the problem entire using only bs4 pre-defined classes and styles, no local style="..." element is enabled. Know anybody the solution? Thanks!
<div class="form-group col-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Date interval:</span>
</div>
<input type="text" class="form-control" name="dateFrom" placeholder="YYYY-MM-DD" value="2020-05-19">
<span class="input-group-text">-</span>
<input type="text" class="form-control" name="dateTo" placeholder="YYYY-MM-DD" value="2020-06-19">
</div>
</div>
Bootstrap provides border classes.
What is causing the rounded edges is a CSS property called border-radius.
The Bootstrap border classes most relevant to you would be the following:
rounded-left (rounds left side corners)
rounded-0 (Equal to border-radius: 0px; - i.e. no rounded corners)
rounded-right (rounds right side corners)
All you need to do is add those classes to the elements so that it fits your desired needs.
More about Bootstrap border classes here.
Snippet Example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-10">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-left">Date interval:</span>
</div>
<input type="text" class="form-control rounded-0" name="dateFrom" placeholder="YYYY-MM-DD" value="2020-05-19">
<span class="input-group-text rounded-0">-</span>
<input type="text" class="form-control rounded-right" name="dateTo" placeholder="YYYY-MM-DD" value="2020-06-19">
</div>
</div>
Codepen Example here.
Here is how my navbar should look:
As you can see there is a logo, loop icon, clear icon and input field that takes all the space between those two icons (no matter what resolution).
Here is how my navbar looks now:
I have tried several different aproches to fill the empty space with input without breaking responsive features, but I have failed.
How can I make input field fill the entire space between these two icons on every screen?
Here is plunker
Can you replace your form with
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group" style="display:table;">
<span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-search"></span></span>
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-remove"></span></span>
</div>
</div>
</form>
I hope it helps.
I found examples with the prepend add-on but not the default label. How can make it so the label is the same width as the input?
<div class="control-group">
<span class="label label-default">ChangeOrder Attn</span>
<input ng-model="ChangeOrderAttn" class="form-control" type="text">
</div>
Probably not Bootstrap but generally speaking that, the input has form-control and that's why it has width:100% so simply you may apply this to your span or just add display:block, in this case, this will also consume 100% width of it's parent. So, if you create another class and use that, for example (DEMO):
CSS:
.full-width {
display:block;
}
HTML:
<div class="control-group">
<span class="label label-default full-width">ChangeOrder Attn</span>
<input ng-model="ChangeOrderAttn" class="form-control" type="text" />
</div>
Then the span will get 100% width and this way you can optionally use .full-width only when needed. Just modify the behavior by adding another class. You may also add other styles in that class if needed. But, there could be a ready made way in Bootstrap - 3 using it's native class.
If you are using Bootstrap 3, you could set the width for the group and the label like this:
<div class="control-group col-sm-12">
<span class="label label-default col-sm-12">ChangeOrder Attn</span>
<input ng-model="ChangeOrderAttn" class="form-control" type="text">
</div>
It's not exactly what you want, but the closest thing you can do without custom CSS is:
<div class="input-group">
<span class="input-group-addon label-default">ChangeOrder Attn</span>
<input ng-model="ChangeOrderAttn" class="form-control" type="text">
</div>
When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.
It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.
So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
Here is a demo illustrating my point. The code is the following:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
This was indeed a bug and was resolved (check the issue on github for more info).
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
So my code would become:
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.
try putting
<div class="col-lg-1"></div>
around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.