glyphicon-search not coming inside the form - html

I want the glyphicon-search icon to be on the rightmost side inside the form but it is not coming inside the form.Can anyone tell how this can be done?
Well..cant we override glyhicon-search class to achieve the goal?If yes, then how(Im trying to do that but I am not achieving the desired result especially on shrinking the webpage)?
<div class="bar navbar-inverse navbar-fixed-top">
<div class="container">
<div id="logo">
XYZ
</div>
<div class="col-xs-5 right-inner-addon ">
<form class="form-inline" role="form">
<div class="form-group has-feedback">
<div class="row">
<div class="col-xs-11">
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-search form-control-feedback"></span></div></div></div>
</div>
</form>
</div>
</div>
.right-inner-addon {
padding-top: 8px;
padding-left:30px;
}
.right-inner-addon input {
height: 30px;
padding: 0px 10px;
}
.right-inner-addon i {
position: relative;
right: 0px;
padding: 10px 12px;
pointer-events: none;
}
.form-control{
min-width: 400px;
max-width: 400px;
top: 7px;
}


Apply it as a background-iamge to the input: <input type="text" class="form-control" id="inputSuccess4"> Or gieve the icon element a display:block / inline-block property.

Related

disable or make non clickable form when spinner appears in css/html

I have bootstrap form with spinner. Spinner appears when user submits form. It works fine, spinner appears on top of form, however, I cannot make form to be disabled/not-clickable, like usually it is with overlay.
form {
position: relative;
border: 1px solid red
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
opacity: 0.5;
transform: translate(-50%, -50%);
}
<form method="post">
<div class="overlay" id="loading" >
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status" >
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="form-group">
<label for="num">Enter number <span>?</span></label>
<input id="num" type="text" class="form-control"/>
</div>
<button type="submit" class="btn btn-primary">Check </button>
</form>

I just added one parent div to .overlay div and positioned it.
Hope this helps!
form{
position: relative;
border: 1px solid red;
}
.overlay-container{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post">
<div class="overlay-container">
<div class="overlay" id="loading" >
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status" >
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="num">Enter number <span>?</span></label>
<input id="num" type="text" class="form-control"/>
</div>
<button type="submit" class="btn btn-primary">Check </button>
</form>

Bootstrap container adds padding towards right end of webpage

I am using bootstrap for my application and I observe that it adds 15px padding. I looked up at the possible errors and it doesnt seem as if I am making any of these errors (like putting a container inside a row etc)
This is my code.
<div class="container-fluid">
<header id="topheader">
<div class="row">
<div class="col-md-3">
<h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
</div>
<div class="col-md-9">
<form id="fullform">
<div id="formdiv" class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div style="" class="col-md-3 login">
<label for="email"></label>
<input class="login_input" type="text" name="email" placeholder="Type your email here">
</div>
<div style="" class="col-md-3 login">
<input class="login_input" type="password" name="password" placeholder="Type your password here">
</div>
</div>
</form>
</div>
</div>
</header>
</div>
I am adding my css too :
body html {
padding: 0;
margin: 0;
/*background-color: black;*/
}
.container-fluid {
padding-right:0px;
padding-left:0px;
margin-right:auto;
margin-left:auto;
}
#topheader {
position: relative;
background-color: #563d7c;
box-shadow: 8px 6px 2px black;
}
#logo {
position: relative;
left: 6vw;
/*top: -3vh;*/
color: white;
}
.login {
position: relative;
/*top: 4vh;*/
height: 12vh;
}
.login_input {
position: absolute;
top: 3vh;
}
#formdiv {
left: 5vw;
}
#d1 {
position: relative;
font-size: 5vh;
transform: rotate(40deg);
}
input{
/*background: #ecf0f1;*/
width: 15vw;
padding: 10px;
font-family: "Open Sans";
color: #7f8c8d;
border-style: solid;
border-width: 0;
border-bottom-width: 3px;
border-color: #bdc3c7;
outline: none;
border-radius: 5px 0px 5px 0px;
-webkit-transition: 0.1s ease-in-out;
}
input:focus{
border-color: #3498db;
color: #34495e;
}
#media screen and (max-width: 989px) {
#logo {
left: 35vw;
}
.login {
position: relative;
/*top: 4vh;*/
height: 7vh;
}
.login_input {
top: -1vh;
left: 25vw;
}
input {
width: 50vw;
}
}

Bootstrap immediately expects row after container-fluid class. And you are adding header tag there. Remove header tag and you can add id="topheader" to the div. row class minus 15 px. Try the following:
<div class="container-fluid">
<div class="row" id="topheader">
<div class="col-md-3">
<h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
</div>
<div class="col-md-9">
<form id="fullform">
<div id="formdiv" class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div style="" class="col-md-3 login">
<label for="email"></label>
<input class="login_input" type="text" name="email" placeholder="Type your email here">
</div>
<div style="" class="col-md-3 login">
<input class="login_input" type="password" name="password" placeholder="Type your password here">
</div>
</div>
</form>
</div>
</div>
</div>
If you dont want to remove header tag. Then wrap your container-fluid div into header tag. This will works as well like:
<header id="topheader">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
</div>
<div class="col-md-9">
<form id="fullform">
<div id="formdiv" class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div style="" class="col-md-3 login">
<label for="email"></label>
<input class="login_input" type="text" name="email" placeholder="Type your email here">
</div>
<div style="" class="col-md-3 login">
<input class="login_input" type="password" name="password" placeholder="Type your password here">
</div>
</div>
</form>
</div>
</div>
</div>
</header>

Do you asking for this 15px padding that is property of container-fluid class
In that case just over ride the container-fluid class and put padding-left:0 and padding-right:0;
like this,
.container-fluid{
padding-left:0;
padding-right:0;
}
put it in the other file don't change the bootstrap's css file

Put a button inside the text box

I'm trying to design a form, with a button inside a text-box. I want that button to be inside the text-box. This is how I tried:
<div class="row">
<div class="col-sm-6">
<div class="form-group required">
<label for="PickList_Options" class="col-sm-4 control-label">Options</label>
<div class="col-sm-4 buttonwrapper">
<input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
<button>GO</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="result" id="mydiv"></div>
</div>
</div>
my css:
.buttonwrapper {
display:inline-block;
}
input,
button {
background-color:transparent;
border:0;
}
But, the problem is, the Go button is placed below the text-box. What should I do to place it inside the text-box?
I want that "Go" button to be inside the text-box.

Please try this. Remove the outline for the input in active and focus state, and add a border for the input container.
Edit: Im adding the flex-box implementation as well.
Display inline-block implementation
.input-container{
width: 250px;
border: 1px solid #a9a9a9;
display: inline-block;
}
.input-container input:focus, .input-container input:active {
outline: none;
}
.input-container input {
width: 80%;
border: none;
}
.input-container button {
float: right;
}
<div class="input-container">
<input type="text" class="input-field"/>
<button class="input-button">Ok</button>
</div>
Display flex implementation
.input-container {
display: flex;
width: 250px;
border: 1px solid #a9a9a9;
justify-content: space-between;
}
.input-container input:focus, .input-container input:active {
outline: none;
}
.input-container input {
border: none;
}
<div class="input-container">
<input type="text" class="input-field"/>
<button class="input-button">Ok</button>
</div>

.buttonwrapper {
display: inline-block;
}
input{
background-color: transparent;
border: 2px solid black;
}
button {
margin-left: -50%;
border: none;
background-color: transparent;
}
<div class="row">
<div class="col-sm-6">
<div class="form-group required">
<label for="PickList_Options" class="col-sm-4 control-label">Options</label>
<div class="col-sm-4 buttonwrapper">
<input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
<button>GO</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="result" id="mydiv"></div>
</div>
</div>

You need give position: absolute; to the button & position it inside using top. Add these styles to your button
button {
position: absolute;
top: 6px;
}
Codepen
.buttonwrapper {
display:inline-block;
}
input,
button {
background-color:transparent;
border:0;
}
button {
position: absolute;
top: 6px;
}
<div class="row">
<div class="col-sm-6">
<div class="form-group required">
<label for="PickList_Options" class="col-sm-4 control-label">Options</label>
<div class="col-sm-4 buttonwrapper">
<input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
<button>GO</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="result" id="mydiv"></div>
</div>
</div>

You can use position:absolute feature here,
HTML
<div class="row">
<div class="col-sm-6">
<div class="form-group required">
<label for="PickList_Options" class="col-sm-4 control-label">Options</label>
<div class="col-sm-4 buttonwrapper">
<div class="button-container">
<input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
<button>GO</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="result" id="mydiv"></div>
</div>
</div>
CSS
.button-container button { line-height: 28px; position: absolute; right: 0; top: 0;}
.button-container {position:relative;}
.button-container input {padding-right:40px;}

What you need to do is put both the input field and the button in one container, you set that container to be positioned relatively and you set the button to be positioned absolutely. It's important that the container is positioned relatively, so to make sure the button stays within the input field.
Like so:
.buttonwrapper {
display:inline-block;
position: relative;
}
input,
button {
background-color:transparent;
border:0;
}
button {
position: absolute;
/* Adjust these two to your liking */
top: 6px;
right: 3px;
}
<div class="row">
<div class="col-sm-6">
<div class="form-group required">
<label for="PickList_Options" class="col-sm-4 control-label">Options</label>
<div class="col-sm-4">
<div class="buttonwrapper">
<input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
<button>GO</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="result" id="mydiv"></div>
</div>
</div>

for Simple purpose use this method,
Set fixed width for both text box and button.. for eg: text width is 200px, button will be 40px and add margin-left:-40px(based on your need) so it will be fixed between 160-200px of input text box..
.buttonwrapper {
display:inline-block;
}
input,
button {
background-color:transparent;
border:1 solid black;
}
<div class="row">
<div class="col-sm-6">
<div class="form-group required">
<label for="PickList_Options" class="col-sm-4 control-label">Options</label>
<div class="col-sm-4 buttonwrapper">
<input type="text" style="width:200px" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
<button style="width:40px;margin-left: -43px">GO</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="result" id="mydiv"></div>
</div>
</div>

Twitter Bootstrap does something like this very easily. They call it the Input Group.
If you are looking to do the same without the whole Bootstrap'ness, try this fiddle.
Here's the markup
<span>
<input type="text" value="Some text">
<button onclick="alert('Hello!');">Click</button>
</span>
and the associated CSS
span {
border: 1px solid red;
padding: 2px;
font-size: 0px;
display: inline-block;
background: white;
}
input,
button {
display: inline-block;
margin: 0px;
font-size: 12px;
background: white;
border-style: none;
}

All the above answers are correct. But, there is a very simple way to achieve it. That is as follows:
<div class="col-sm-6">
<div class="form-group required">
<label for="PickList_Options" class="col-sm-4 control-label">Options</label>
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Add</button>
</span>
</div>
</div>
</div>
</div>
This does the trick. No need to write extra css properties. Thank you all for your answers.

.buttonwrapper {
display: inline-block;
}
input{
background-color: transparent;
border: 2px solid black;
}
button {
margin-left: 200px;
border: none;
background-color: transparent;
}
<div class="row">
<div class="col-sm-6">
<div class="form-group required">
<label for="PickList_Options" class="col-sm-4 control-label">Options</label>
<div class="col-sm-4 buttonwrapper">
<input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
<button>GO</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="result" id="mydiv"></div>
</div>
</div>

Change width and height of search box

The search box is too small in terms of width on the bar(used bar instead of navbar in order to customize it).How can I make the search bar broader?Plus, how can I change the height of the search box with respect to the top of the screen?
<div class="bar navbar-inverse navbar-fixed-top">
<div class="container">
<span id="logo">
XYZ
</span>
<span class="col-xs-5 right-inner-addon has-feedback">
<form class="form-inline" role="form">
<div class="form-group has-feedback">
<label class="control-label" for="inputSuccess4"></label>
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</span>
</div>
</div>
.right-inner-addon {
padding-top: 5px;
padding-left:30px;
position: relative;
}
.right-inner-addon input {
width: 500px;
height: 30px;
padding: 0px 5px;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px 6px;
pointer-events: none;
}

In the styling for form-control add width= *insert width here*. That should work

Search icon is not visible in search box

I want to have a clickable search icon inside the search box but the icon is not visible in the search box.The class icon-search does not seem to be working.I used bar instead of navbar for customizing its height and its working fine.Plus,how should I customize the height of the search box?
<div class="bar navbar-inverse navbar-fixed-top">
<div class="container">
<span id="logo">
XYZ
</span>
<span class="col-xs-5 right-inner-addon ">
<i class="icon-search"></i>
<input type="text" class="form-control" />
</span>
</div>
</div>
.right-inner-addon {
padding-top: 6px;
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px 6px;
pointer-events: none;
}
.bar{
min-width: 800px;
background-color: #563d7c;
width:100%;
height:43px;
box-shadow: 0px 3px 25px #888888;
position: fixed;
}

If you are using Bootstrap 3 you can try using the following code: http://jsfiddle.net/D2RLR/5888/
<div class="bar navbar-inverse navbar-fixed-top">
<div class="container">
<span id="logo">
XYZ
</span>
<span class="col-xs-5 right-inner-addon ">
<div class="input-group">
<input type="text" name="search" id="search" class="form-control" placeholder="Test" />
<span class="input-group-addon" for="search">
<i class="glyphicon glyphicon-search"></i>
</span>
</div>
</span>
</div>
</div>