No clue how I can do this, since BS 4 doesn't support glyphicons. Do I set it up as a background or do I apply different positioning to a font-awesome icon?
This is my code so far:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="form-group col-md-4">
<input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->
I want to use this font-awesome icon. And I've tried adding it as a background-image too, as in:
.form-control {
background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
background-position: right center 5px;
}
But that doesn't do anything. The only way I can think of is to add font-awesome icon and then set the positioning to absolute, right? But I'm not sure if that's the 'clean' and correct way to do it? Do I need to take a different approach to this? Someone help! Thank you!
Bootstrap 5 Beta - (update 2021)
<div class="input-group">
<input class="form-control border-end-0 border rounded-pill" type="text" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary bg-white border-start-0 border rounded-pill ms-n3" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
Demo
Bootstrap 4 (original answer)
Why not use an input-group?
<div class="input-group col-md-4">
<input class="form-control py-2" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
And, you can make it appear inside the input using the border utils...
<div class="input-group col-md-4">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
Or, using a input-group-text w/o the gray background so the icon appears inside the input...
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
</span>
</div>
Alternately, you can use the grid (row>col-) with no gutter spacing:
<div class="row no-gutters">
<div class="col">
<input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
</div>
<div class="col-auto">
<button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
Or, prepend the icon like this...
<div class="input-group">
<span class="input-group-prepend">
<div class="input-group-text bg-transparent border-right-0">
<i class="fa fa-search"></i>
</div>
</span>
<input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input" />
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
Search
</button>
</span>
</div>
Demo of all Bootstrap 4 icon input options
Example with validation icons
I made another variant with dropdown menu (perhaps for advanced search etc)..
Here is how it looks like:
<div class="input-group my-4 col-6 mx-auto">
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Type something..." id="example-search-input">
<span class="input-group-append">
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split border border-left-0 border-right-0 rounded-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<button class="btn btn-outline-primary rounded-right" type="button">
<i class="fas fa-search"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</span>
</div>
Note: It appears green in the screenshot because my site main theme is green.
Here is an input box with a search icon on the right.
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
</div>
</div>
Here is an input box with a search icon on the left.
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
</div>
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
</div>
Here's a fairly simple way to achieve it by enclosing both the magnifying glass icon and the input field inside a div with relative positioning.
Absolute positioning is applied to the icon, which takes it out of the normal document layout flow. The icon is then positioned inside the input. Left padding is applied to the input so that the user's input appears to the right of the icon.
Note that this example places the magnifying glass icon on the left instead of the right. This is recommended when using <input type="search"> as Chrome adds an X button in the right side of the searchbox. If we placed the icon there it would overlay the X button and look fugly.
Here is the needed Bootstrap markup.
<div class="position-relative">
<i class="fa fa-search position-absolute"></i>
<input class="form-control" type="search">
</div>
...and a couple CSS classes for the things which I couldn't do with Bootstrap classes:
i {
font-size: 1rem;
color: #333;
top: .75rem;
left: .75rem
}
input {
padding-left: 2.5rem;
}
You may have to fiddle with the values for top, left, and padding-left.
in ASPX bootstrap v4.0.0, no beta (dl 21-01-2018)
<div class="input-group">
<asp:TextBox ID="txt_Product" runat="server" CssClass="form-control" placeholder="Product"></asp:TextBox>
<div class="input-group-append">
<asp:LinkButton ID="LinkButton3" runat="server" CssClass="btn btn-outline-primary">
<i class="ICON-copyright"></i>
</asp:LinkButton>
</div>
It is also possible with position-absolute in Bootstrap 5:
<form class="d-flex flex-row position-relative">
<input type="search" class="form-control" id="example-search-input">
<button class="btn btn-outline-success border-0 position-absolute end-0" type="submit">
<i class="fa fa-search"></i> Search
</button>
</form>
With Bootstrap 5 and bootstrap-icons library:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search"
aria-describedby="button-addon">
<button class="btn btn-outline-secondary" type="button" id="button-addon"><i class="bi bi-search"></i></button>
</div>
you can also do in this way using input-group
<div class="input-group">
<input class="form-control"
placeholder="I can help you to find anything you want!">
<div class="input-group-addon" ><i class="fa fa-search"></i></div>
</div>
codeply
Related
I have run into an issue I hope you can help solve.
I have a button group which when the browser expanded 100% wraps around the label. What is the best method to stop this happening. As I do not want the button group wrapping the label.
see html below.
<div class="form-group">
<label for="selectme" class="form-control-label">add and remove me</label>
<div class="btn-group btn-group-sm" role="group">
<input name="selectme" id="selectme" placeholder="add and remove me" class="form-control" type="text">
<button onclick="addItem()" type="button" class="btn btn-success btn-sm">
<i class="fa fa-plus-circle"></i> Add
</button>
<button onclick="removeItem()" type="button" class="btn btn-secondary btn-sm">
<i class="fa fa-minus-circle"></i> Remove
</button>
</div>
<ul class="list-group" id="my-list">
</ul>
</div>
Does simply adding <br> after your input solve your issue? like this:
<div class="form-group">
<label for="selectme" class="form-control-label">add and remove me</label>
<div class="btn-group btn-group-sm" role="group">
<input name="selectme" id="selectme" placeholder="add and remove me" class="form-control" type="text"><br>
<button onclick="addItem()" type="button" class="btn btn-success btn-sm">
<i class="fa fa-plus-circle"></i> Add
</button>
<button onclick="removeItem()" type="button" class="btn btn-secondary btn-sm">
<i class="fa fa-minus-circle"></i> Remove
</button>
</div>
<ul class="list-group" id="my-list">
</ul>
</div>
I am trying to make a looking like Wordpress cms (backend part) thing. It is possible to add multiple, exactly the same, header elements where a user can write inside and safe. Creating/adding all works. Dragging, dropping and sorting also works (jquery-ui). I already made all exactly the same heading elements have an diffrent ID using var "index"). The problem is that I cant get the id of the heading element I clicked. I need this so I ONLY change color, font-size and text-color to the one I clicked, and not to all of them... I think all my code is getting very messy and need to ask you guys because I am stuck :(
Like the code is right now, it works perfectly for just 1 of the draggable objects. I want it to work for mutliple.
Here is my code:
<script>
var index = 0;
$(function() {
$("#sortable").sortable({
revert: false,
});
$(".draggableElement").draggable({
connectToSortable: "#sortable",
revert: "invalid",
//helper: "clone"
helper: function(){
$("#removeDiv").remove();
var element = '\
<div id="containerHeader_'+index+'" class="bg-light w-100 mb-3 h-auto">\
<div class="border-bottom p-2 d-flex">\
<button id="firstHeader" onclick="headingOne()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H1</button>\
<button id="secondHeader" onclick="headingTwo()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H2</button>\
<button id="thirdHeader" onclick="headingThree()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H3</button>\
<button id="fourthHeader" onclick="headingFour()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H4</button>\
<button id="fifthHeader" onclick="headingFive()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H5</button>\
<button id="sixtHeader" onclick="headingSix()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H6</button>\
</div>\
<input id="headingInput" class="form-control border-0 shadow-none testen-class large-input" placeholder="Heading"></input>\
</div>';
index ++;
return element;
}
});
});
{# $(document).ready(function() {
$("#firstHeader").click(function() {
alert("clik");
});
}); #}
function headingOne() {
$("#headingInput").css('font-size', '3rem');
$(".font-weight-500").css('color', 'black');
$("#firstHeader").css('color', '#0069d9');
//console.log("containerHeader_"+index);
//$("containerHeader_"+index).find("#firstHeader").css('color', '#0069d9');
}
//function headingTwo, three, four ... Exactly the same
</script>
The blue buttons in the left top are draggable, after the drag they transform into the "Heading" part with H1 H2 H3 etc. I dragged 2 Heading elements into the page. Only the first one is always working... Hope this edit helps to make it more clear.
Here is the image:
This is my HTML, of the draggable buttons.
<div class="border-top d-flex justify-content-between flex-wrap pt-3 px-3">
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Header">
<i class="fas fa-heading fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Text">
<i class="fas fa-align-left fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Image">
<i class="far fa-image fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Audio">
<i class="fas fa-volume-up fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Link">
<i class="fas fa-link fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Video">
<i class="fas fa-video fa-2x fa-fw"></i>
</div>
</div>
</div>
//Sortable
<div class="container bg-secondary input-group p-3">
<div class="container gray input-group w-100" id="testContainer">
<div class="w-100">
<input class="form-control shadow-none large-input remove-border mb-3" placeholder="Titel"></input>
</div>
<div class="w-100">
<input class="form-control shadow-none remove-border mb-3" placeholder="Subtitel"></input>
</div>
<div class="w-100">
<textarea class="form-control shadow-none remove-border mb-3" placeholder="Samenvatting"></textarea>
</div>
<div class="w-100">
<input type="text" data-role="tagsinput"/>
</div>
</div>
<div id="sortable" class="py-3 w-100">
<div id="removeDiv" class="text-center text-white">Drag in here</div>
</div>
</div>
you need to convert button id to class.
<button id="firstHeader"
to
<button class="firstHeader"
and script becomes
$(".firstHeader").click(function() {
alert($(this).parents(".bg-light").attr("id"));
});
I am using slick slider and its methods 'slickPrev' and 'slickNext' inside bootstrap modal to slide some content manually.One slide has a form and everything works perfect until form input gains focus and then I am unable to go back to previous slide using the button that triggers 'slickPrev' method.
The problem occurs only on mobile browsers, so far chrome for android.
I've tried to reproduce the problem outside of the modal but it seems the problem occurs only inside of it as you can see in this jsfiddle: https://jsfiddle.net/3x4bum5h/1/ where
$('body').on('click','.back-to-content',function(){
$('.wl-items-swipe').slick('slickPrev');
$('body').find('.modal-footer .btn-group').html('<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button><button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>');
});
only makes the input lose focus otherwise it works as it should when no focus on input.
Ok I've found a solution.To make it work I had to remove the buttons that trigger slides from the footer and put them inside the slides.
Here is the working fiddle: https://jsfiddle.net/yjex03gf/
<div class="wl-content">
<p id="some-content">Lorem ipsum dolor sit amet.</p>
<div class="btn-group">
<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
<button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>
</div>
</div>
<div class="wl-form">
<form id="w-items-form">
<div class="form-group">
<label for="email" style="font-weight:bold;font-size:14px">Email</label>
<input type="text" class="form-control wl-email" placeholder="Email"/>
</div>
<div class="form-group">
<label for="phone" style="font-weight:bold;font-size:14px">Phone<span style="color:red">*</span></label>
<input type="tel" class="form-control wl-phone" max="15" placeholder="Phone number"/>
</div>
<div class="form-group text-center">
<button type="button" class="btn btn-wl-submit" style="font-size:14px;">Send <i class="fa fa-send"></i></button>
</div>
</form>
<div class="btn-group">
<button type="button" class="btn btn-default back-to-content" style="border-right: 2px solid #ececec;"><i class="fa fa-arrow-left"></i> Back</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
</div>
</div>
<style>
.modal{
display:block!important;
z-index:-1;
}
.modal-open .modal{
z-index:1080;
}
</style>
I have a huge issue with my ui-sortable.
If i have a small list (as the one in the example on their website: jquery sortable)
Then there is no Issue.
However if the list gets big long enough and the user would have to scroll to see the total list then when ever i try to drag an element it automaticly scrolls to the bottom and i have a hard time getting it up again.
Every time i attempt to scroll up it scrolls down seconds later. So my question is has anyone tried this before and know a fix for it? ( i know there wasnt much code however if you really need code to solve this problem il gladly provide what i have)
The element im dragging:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="sortable" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px; display: block" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted" translate="TERMS.MODULE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="{{ 'ACADEMY.EDIT.MODULES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i><span translate="ACADEMY.EDIT.MODULES.CHANGE_MODULE"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;" translate="TERMS.COURSE">
</button>
<span class="text text-muted" translate="TERMS.COURSE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="{{ 'ACADEMY.EDIT.COURSES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i><span translate="ACADEMY.EDIT.COURSES.EDIT"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>
This snippet of code I am using as template:
<div class="input-group input-group-sm date-time-with-arrows" style="width:100%">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="prevDay()"> <i class="fa fa-angle-left "></i></button>
</span>
<div id="input" class="input-group input-group-sm nested-group" ng-model="model">
<input class="form-control input-sm" ng-disabled="disabled" type="text" ng-attr-placeholder="{{configuration.noSelectionLabel}}" />
<span class="input-group-btn after-date-input">
<button class="btn btn-default pick-cal" ng-disabled="isDisabled" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
<span class="input-group-btn after-date-input">
<button class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button>
</span>
</div>
Note functions in tags button prevDay() and nextDay(). When I change date in input and press enter, prevDay() function is called and I have no idea why.
If you don't specificy a type="button" for a <button>, it will default as a submit button.
The button with function prevDay() on it is the first one, which will be used when you hit enter.
Just add type="button" to your <button>s and it will work.
I almost got insane for this just a couple of days ago...
The reason is that angular submits form on click of every button that is not of type="button".
If you change to <button type="button" class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button> it should work.