Could someone please help me with this, I'm trying to create the following:
With the below code:
<header>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</header>
<body>
<div class="d-flex flex-row mb-3" style="padding-left: 11rem;">
<div class="p-2"> <input type="text" class="form-control" placeholder="¿Que Buscas?"> </div>
<div class="p-2"> <input type="text" class="form-control" placeholder="Ciudad"> </div>
<div class="p-2"> <button type="button" class="btn bg-danger text-white">Buscar</button> </div>
</div>
</body>
I´ve ben trying to create this by using BootStrap´s classes.
Here is an example that you can use as a basis.
You can try to play with the borders of your 2 inputs. (border-left / border-right). You should also modify the border-radius of these two inputs.
With this, it will form a single input.
As for putting icons or buttons in the input, you can use the relative/absolute positions.
Now it's up to you to modify it (like modifying the shadow boxes, input focus, adding your other icons, ...) and to adapt it according to your needs.
<!DOCTYPE html>
<html lang="en">
<header>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style lang="scss">
.buscando {
border-right-color: white;
border-radius: 0.25rem 0px 0px 0.25rem;
margin-right: -2px
}
.ciudad {
border-left-color: white;
border-radius: 0px 0.25rem 0.25rem 0px;
margin-left: -5px
}
button {
top: 0;
right: 0;
}
</style>
</header>
<body>
<div class="d-flex justify-content-center m-2">
<div>
<input
type="text"
class="form-control buscando shadow-none focus-none"
placeholder="¿Que Buscas?"
/>
</div>
<div class='position-relative'>
<input
type="text"
class="form-control ciudad shadow-none "
placeholder="Ciudad"
>
</input>
<button
type="button"
class="btn bg-danger text-white position-absolute"
>
Buscar
</button>
</div>
</body>
</html>
Related
I have a form with various input controls set up like this:
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Email" class="text-danger"></span>
</small>
</div>
And I have a SCSS file that changes the border width on active and focus:
.form-control:focus,
.form-control:focus:active {
border-width: $input-focus-width !important;
}
Currently I'm getting this result:
How can I set the border with of the input-group-text element when the input control is active?
You can handle the element immediately placed after .form-control with the following selector:
.form-control:focus + .input-group-append .input-group-text
In your case:
.form-control:focus,
.form-control:focus:active,
.form-control:focus + .input-group-append .input-group-text {
border-width: 2px !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope">icon</span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Email" class="text-danger"></span>
</small>
</div>
You can use the adjacent sibling combinator to select the .input-group-append div then the descendant selector to grab the div with the .input-group-text class as below. Bootstrap styles the border with a slightly darker gray so I've put an outline property on there too so you can definitley see it working.
.form-control:focus,
.form-control:focus:active {
border-width: 3px !important;
}
.form-control:is(:focus, :focus:active)+.input-group-append .input-group-text {
border-width: 3px !important;
outline: 3px solid blue;
/* added this because the border is styled a light gray colour and not so easy to see*/
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Email" class="text-danger"></span>
</small>
</div>
I have an issue where the ng-scope css class is causing issues with my UI.
Essentially I want my toDoListRow div to have a height of 70%.
But this will not apply unless I define the ng-scope class to have a height of 100%, the issue with that is it then causes unexpected behaviour further down the line whenever a new scope is applied.
I have tried setting the ng-scope to have a min height instead of just height, but this still means my toDoListRow has no height at all.
See first image for what it should look like.
Second image is what it looks like when I don't apply any height to the ng-scope class or use min-height:100%.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To Do App</title>
<script src="angular/angular.min.js"></script>
<script src="app.module.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app/assets/css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>
<body>
<div ng-controller="homePageCtrl">
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
<p>0 Open Tasks</p>
</div>
</div>
<div class="row toDoListRow">
<div class="row newItem" ng-show="toDoList.length > 1" ng-repeat="item in toDoList">
<div class="col-2">
<button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
</div>
<div class="col-8">
<h4>{{item.project}}</h4>
<p>{{item.task}}.</p>
</div>
<div class="col-2">
<button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
</div>
</div>
</div>
<div class="row addItemRow">
<div class="col-12 text-center">
<button type="button" class="btn btn addItem" data-toggle="modal" data-target="#newItemModal">
<i class="fas fa-plus-circle fa-3x"></i>
</button>
<div class="modal fade" id="newItemModal" tabindex="-1" role="dialog" aria-labelledby="newItemModal"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title col-11 text-center" id="newItemModal">Add new item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form ng-submit="addNewToDoTask()">
<div class="form-group">
<label for="projectInput"><strong>Project</strong></label>
<input type="text" class="form-control" id="projectInput"
ng-model="projectInput" placeholder="Enter the name of the project">
</div>
<div class="form-group">
<label for="taskInput"><strong>Task</strong></label>
<input type="text" class="form-control" id="taskInput" ng-model="taskInput"
placeholder="Enter your task details">
</div>
<button type="submit" class="btn modalSubmitButton">Add</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>
styles.css
html,
body {
height: 100%;
width: 100%;
}
.row {
margin: 0;
}
.ng-scope {
min-height: 100%;
}
.header {
background-color: rgb(35, 35, 80);
color: white;
height: 20%;
width: 100%;
text-align: center;
padding-top: 2.5rem;
}
h1 {
font-family: 'Acme', sans-serif;
margin: 0;
}
.toDoListRow {
height: 70%;
width: 100%;
background-color: rgb(252, 70, 100);
}
.newItem {
width: 100%;
margin-top: 2rem;
}
.addItemRow {
height: 10%;
background-color: rgb(252, 70, 100);
}
button {
display: inline-block;
}
.modal-title {
text-align: center;
color: white;
}
.modal-header {
background-color: rgb(35, 35, 80);
}
.modal-body {
background-color: rgb(252, 70, 100);
}
.modalSubmitButton {
background-color: rgb(35, 35, 80);
color: white;
}
Don't use the ng-scope class for that purpose.
Instead define your own classes:
̶.̶n̶g̶-̶s̶c̶o̶p̶e̶ ̶{̶
.toDoList {
height: 100%;
}
.toDoListRow {
height: 70%;
width: 100%;
background-color: rgb(252, 70, 100);
}
And use it in the template:
<div ng-controller="homePageCtrl" class="toDoList">
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
<p>0 Open Tasks</p>
</div>
</div>
<div class="row toDoListRow">
<div class="row newItem" ng-repeat="item in toDoList"
ng-show="toDoList.length > 1" >
<div class="col-2">
<button class="itemComplete btn">
<i class="far fa-check-circle fa-2x"></i>
</button>
</div>
This will make your CSS and HTML easier to understand, debug, test, and maintain.
New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view, ng-include and ng-if all create new child scopes, so the problem often shows up when these directives are involved.1
I am using bootstrap 4 input-group as shown below. I have changed the border-width to 10px. It seems like the border width in the middle is doubling up:
Is it possible to make the middle border as wide as the side borders?
.input-text {
border-width: 10px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centered-query">
<div class="row justify-content-center">
<div class="col-lg-9 col-12">
<div class="input-group">
<input type="text" class="form-control input-text">
<input type="text" class="form-control input-text">
<div class="input-group-append">
<button type="submit" class="btn">Go</button>
</div>
</div>
</div>
</div>
</div>
Override the left/right border for the first and second input
.input-text {
border-width: 10px !important;
}
.input-text.first {
border-right-width: 5px !important;
}
.input-text.second {
border-left-width: 5px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centered-query">
<div class="row justify-content-center">
<div class="col-lg-9 col-12">
<div class="input-group">
<input type="text" class="form-control input-text first">
<input type="text" class="form-control input-text second">
<div class="input-group-append">
<button type="submit" class="btn">Go</button>
</div>
</div>
</div>
</div>
</div>
I have a bootstrap 4 input text box. I want make it stop growing after sm break point, so that it won't expand to the full screen width.
Use col-md-* in wrap div of input...
the sm takes all screen and from md and up it takes width as you set in col-md-*
See fiddle:https://jsfiddle.net/s9q4d681/3/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div>
</div>
</div>
.row {
margin-top: 20px;
}
.col {
background: #f8f9fa;
border: solid 1px #ddd;
padding: 5px 10px;
}
.col-sm-6 {
background: #f8f9fa;
border: solid 1px #ddd;
padding: 10px;
}
input{
max-width: 340px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
Col-6
</div>
<div class="col">
Col-6
</div>
</div>
<div class="row">
<div class="col-sm-6">
<form action="">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</form>
</div>
</div>
</div>
You can simply restrict input field width using max-width CSS property.
How to put a awesome icon font inside the bootstrap input type text aligned at left and with some margin-right relative to the placeholder text using bootstrap? Im doing like this: https://jsfiddle.net/tbeay2vd/1/ and using the bootstrap class "input-group-addon" it works but I would like to have a input text like:
Do you know how to do that using bootstrap?
Html:
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- How to do this input text below using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i> Search..
</div>
</div>
</div>
</div>
Try this:
$('input').on('focus', function () {
$(this).parent().addClass('active');
});
.example {
margin-top:30px;
border:1px solid gray;
border-radius:4px;
padding:15px;
}
.example >i {
margin-right:10px;
}
.search-input {
border: none;
width: 90%;
}
.search-input:focus{
outline: none;
}
.example.active {
border-color: #80bdff;
}
.search-box .input-group-addon {
background: none;
}
.search-box input {
border-left: none;
}
.search-box.active .input-group-addon {
border-color: #80bdff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group search-box">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- Hpw to do this layout using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i>
<input type="text" class="search-input" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>
.input-group >.fa{
position: absolute;
z-index: 10;
top: 37%;
left: 20px;
}
.input-group .form-control{
padding-left: 40px;
height: 60px;
border: black solid 1px;
position: relative;
border-radius: 5px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<i class="fa fa-search"></i>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>