Change width and height of search box - html

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

Related

I want to use background image in my Angular login.Component.ts but that does not show

This is my html Div in which i want to use background image
<div class="bg-img">
<div class="container">
<form [formGroup]="loginForm" class="form-horizontal" (ngSubmit)="onSubmit()">
<div class="panel panel-primary pb-3">
<div class="panel-heading">
<h3 class="panel-title">Instrutors Login Form</h3>
</div>
<div class="pane-body">
<div class="form-group ">
<label class="col-sm-2 control-label" for="username">User Name:</label>
<div class="col-md-8">
<input type="text" id="username" formControlName="username" class="form-control" ng-model="mymdl">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="password">Password:</label>
<div class="col-md-8">
<input type="password" id="password" formControlName="password" class="form-control">
</div>
</div>
<div class="panel-footer">
<button type="submit">login</button> <p> <a routerLink="/register">Signup</a></p>
</div>
</div>
</div>
</form>
</div>
This is my login.component.css file im using reference of class"bg-img" here to use image in background
.bg-img{
background-image: url('/src/assets/images/img1.jpg');
}

Your HTML is not valid:
This is how it starts:
<div class="bg-img">
<div class="container">
<form [formGroup]="loginForm" class="form-horizontal" (ngSubmit)="onSubmit()">
And this is how it finishes:
</div>
</form>
</div>
Start by fixing that first. Also make sure none of the nested children have background colors set. You won't be able to see the full image of the outermost container if the inner ones have a set background.

Try this from: https://www.w3schools.com/howto/howto_css_image_text.asp
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="../../../assets/images/DebraFacebook.jpg" alt="DebraFacebook" style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>

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>

glyphicon-search not coming inside the form

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.

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>