<div id='searchParent'>
<!--icon to be hovered-->
<i id="search" class="fas fa-search"></i>
<!--icon to be hovered-->
<div id="inputParent">
<!--input to be shown-->
<input type="text" placeholder='Pesquise' autocomplete='off' id="input-bar">
<!--input to be shown-->
</div>
</div>
I´ve been working in this for a really long time, and the best piece of css hover i could get was this:
#search:hover ~ #inputParent #input-bar {
width: 200px;
}
But the problem is that when you hover the input it just drag it way out and you cant just write anything.
The icons are in my local machine but i will prolably put them in there
EDIT: I´m going to show some of my poor css and what i was intending to do.
input {
border: none;
outline: none;
border-bottom: 0.3px solid black;
}
#search {
padding-left: 180px;
display: inline-block;
}
#inputParent {
margin-left: auto;
}
#input-bar {
margin-right: 1vw;
width: 0;
transition: 0.8s ease-in-out;
}
#search:hover ~ #inputParent #input-bar {
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<div id="searchParent">
<i id="search" class="fas fa-search"></i>
<div id="inputParent">
<input type="text" placeholder="Pesquise" autocoplete="off" id="input-bar">
</div>
</div>
</body>
</html>
What i really wanted to do was to when i hovered the input it stay there.
I really dont know why the bar is going from the left to the right, it was suposed to go backwards
Hi If you are able to add a new div to your HTML and add a class to your inputParent this is quite easy. Please see my code:
.dropdown {
position: relative;
display: inline-block;
}
#inputParent {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover #inputParent {
display: block;
}
<div id='searchParent'>
<!--icon to be hovered-->
<div class="dropdown">
<i id="search" class="fas fa-search"></i>Icon
<!--icon to be hovered-->
<div id="inputParent" class="parentc">
<!--input to be shown-->
<input type="text" placeholder='Pesquise' autocomplete='off' id="input-bar">
<!--input to be shown-->
</div>
</div>
</div>
Related
.popup {
position: relative;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
I have above codes in my css file that added in html head <link href="/static/styles.css" rel="stylesheet">
In my html there where many uses of .popupand .popuptext and I wont change above styles.
In the html code is here↓
<div class="popup" style="display: inline"><div class="popuptext" id="tableHeader">
<label>data type</label>
<br>
<input type="checkbox" name="not_null"> NOT NULL
<br>
<input type="checkbox" name="unique"> UNIQUE
<br>
<button class="btn btn-danger" type="submit" name="delete">Delete</button>
</div></div>
All elements above are aligned as center.
But I need centralize the Delete button and the label and other input elements be left aligned.
As I consist change style from html code and stylesheet has other uses, I have tried below↓
<div class="popup" style="display: inline"><div class="popuptext" id="tableHeader">
<label>data type</label>
<br>
<span style="text-align: left;"><input type="checkbox" name="not_null"> NOT NULL</span>
<br>
<span style="text-align: left;"><input type="checkbox" name="unique"> UNIQUE</span>
<br>
<button class="btn btn-danger" type="submit" name="delete">Delete</button>
</div></div>
But input elements remain centralist and not left aligned!
I need input get left aligned only with change style settings in html element attributes.
Leaving the html as it is, you could style the .popuptext children as display:block so that they will take the whole width. Then you can style indipendently its parts:
The <label> element - its content gets centered with text-align: center
The <input> elements - they get aligned to left with text-align: left; but just because we are actually styling their parents
<span>
The <button> element - this required margin: 0 auto meaning that the left
and right margins will be set to the maximum available space in the
row
Everything else in the styles here in the demo is for decoration purpose.
.popup{
border: solid;
width: 10em;
background: lightgray;
}
.popuptext > *{
display: block;
}
.popuptext > span{
text-align: left;
}
.popuptext > label{
text-align: center;
margin-bottom: .5em;
}
.popuptext > button{
margin: .5em auto;
border: none;
background: red;
color: white;
padding: .8em .6em;
border-radius: 5px;
}
<div class="popup">
<div class="popuptext" id="tableHeader">
<label>data type</label>
<span><input type="checkbox" name="not_null"> NOT NULL</span>
<span><input type="checkbox" name="unique"> UNIQUE</span>
<button class="btn btn-danger" type="submit" name="delete">Delete</button>
</div>
</div>
You can restructure your HTML and CSS as such:
.popup .popuptext {
width: 160px;
background-color: #555;
color: #fff;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
}
.popuptext .checkbox-holder {
width: fit-content;
margin: auto;
}
<div class="popup" style="display: inline">
<div class="popuptext" id="tableHeader">
<div style="text-align: center;"><label>data type</label></div>
<div class="checkbox-holder">
<div><input type="checkbox" name="not_null" id="not_null"> <label for="not_null">NOT NULL</label></div>
<div><input type="checkbox" name="unique" id="unique"> <label for="unique">UNIQUE</label></div>
</div>
<div style="text-align:center"><button class="btn btn-danger" type="submit" name="delete">Delete</button>
</div>
</div>
</div>
So I am making a website for class, Ive got one more page to make and its the login page. The thing is, it seems I cant move forms and things in forms around like I can with text boxes. what I want to do is sort of like the steam login page which I will link here. Basically I want box in the middle of the page with a text box for username and password on the left side of the box, then I want a thin line going down the middle of the box separating the two halves and on the right side I want three boxes one for the username and two for the password. The thing is I cant seem to move what I have to the left side of the box yet. https://store.steampowered.com/login/ thats the steam login site itll give you an idea of what i want to do.
Here is what I have so far, I just want to move the grey box down a bit and then put the form that i have now on the left side of the box and write a new form on the right side of the box with a dividing line in the middle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portal 2 Launch site</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<h1> <img src="logo.png" class="center"><h1>
</head>
<body>
<!-- The navigation menu -->
<div class="navbar" style="width 100%">
Home
About
Media
<div class="subnav" style="width:20%">
<button class="subnavbtn" style="width: 100%">OtherGames</button>
<div class="subnav-content">
Half Life
Team Fortress 2
Counter strike: Global Offensive
</div>
</div>
Account
</div>
<center>
<div class="container">
forgot password?
<form>
<div class="input-wrap">
<label>Username:</label><br>
<input type="text">
</div>
<div class="input-wrap">
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button
</div>
<center>
</body>
</html>
body {
background-color: black;
color: black;
opacity: 300;
}
.container {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 420px;
padding: 20px
}
.container1 {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 620px;
padding: 20px
}
.input-wrap1 {
width:620px;
}
form {
display: flex;
flex-direction: column;
width: 200px;
}
.input-wrap {
margin: 5px;
}
input {
background-color: white;
border: 1px solid #4C4B63;
}
.submit{
background: #333;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
cursor: pointer;
}
.submit:hover {
background: green;
color: #eee;
border: 1px solid #eee;
text-shadow:none;
cursor: pointer;
}
I leave you a snippet with the idea you have for the login. You will have to tinker with it to fit your own styles. I leave you a link to a little game to learn flexbox, which I use on the snippet.
.wrapper {
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-color: slategrey;
}
.login {
display: flex;
width: 400px;
height: 300px;
background-color: lightgrey;
padding: 10px;
}
.side {
flex: 1
}
.separator {
flex: 0;
border-left: 1px solid black;
width: 2px;
height: 250px;
margin: auto 16px;
}
.side {
flex: 1;
}
<div class="wrapper">
<div class="login">
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button>
</div>
<div class="separator"></div>
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
<div>
<label>Confirm password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form2" value="Submit">Submit</button>
</div>
</div>
</div>
Problem: JSFiddle
I want to center the whole form and created a class called 'center' with the given attributes. But after adding the center class to the form in JSFiddle, the fontawesome-icons stay on the left and do not move. They should be positioned "inside" the input element left to the text. Therefore, to make place for the icon, I also added a padding on the left.
Can somebody give me the solution to fix this problem that both icons stay on the left because of centering? I really cannot find out why it is not working and it already took so much time :/
Thanks.
.center{
text-align: center;
margin-left: auto;
margin-right: auto;
}
.box {
position: relative;
margin-bottom: 20px;
}
.box .fa {
position: absolute;
top: 10px;
left: 5px;
}
.box input[type="text"],
.box input[type="password"] {
border: 0px;
border-bottom: 1px solid #ccc;
text-decoration: none;
width: 180px;
padding: 10px;
padding-left: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="center">
<form action="/login" method="POST" class="form">
<div class="box">
<i class="fa fa-user" aria-hidden="true"></i>
<input required name="username" type="text" placeholder="user">
</div>
<div class="box">
<i class="fa fa-key" aria-hidden="true"></i>
<input required name="password" type="password" placeholder="pass">
</div>
<div class="box">
<input name="submit" type="submit" value="Login">
</div>
</form>
</div>
The .box elements are divs and therefore naturally have a width of 100% of the parent element.
A simple solution would be to give them a fixed width equal to that of your inputs and centre them using left and right margins of auto:
.center{
text-align: center;
margin-left: auto;
margin-right: auto;
}
.box {
position: relative;
margin: 0 auto 20px;
width: 180px;
}
.box .fa {
position: absolute;
top: 10px;
left: 5px;
}
.box input[type="text"],
.box input[type="password"] {
border: 0px;
border-bottom: 1px solid #ccc;
text-decoration: none;
width: 180px;
padding: 10px;
padding-left: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="center">
<form action="/login" method="POST" class="form">
<div class="box">
<i class="fa fa-user" aria-hidden="true"></i>
<input required name="username" type="text" placeholder="user">
</div>
<div class="box">
<i class="fa fa-key" aria-hidden="true"></i>
<input required name="password" type="password" placeholder="pass">
</div>
<div class="box">
<input name="submit" type="submit" value="Login">
</div>
</form>
</div>
it occurs because
.box .fa {
position: absolute;
top: 10px;
left: 5px;
}
you can use position initial for it.
Regular
Smaller
My bootstrap 3.0 navbar expands when the window gets to mobile sizes. I've included pictures of the two views above and where the issue is.
I am trying to get my navbar to not expand when the screen gets smaller and cover part of my page.
It may have something to do with the search bar and the buttons near it. I managed to get the search form stay the same size when it expanded across the entire screen behind the sidebar before.
Any help would be great.
HTML
`
<a class="navbar-brand" style="margin-left: -20px">GCImage</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-right">
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" align="right" ng-model="nav.keyword" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
</div>
<button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
<i class="fa fa-search"></i>
</button>
<a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a>
</form>
</div>
</div>
`
CSS
.panel-green {
border-color: #5cb85c;
background-color: #5cb85c;
color: #ffffff;
}
.panel-orange {
border-color: #ff7e47;
background-color: #ff7e47;
color: #ffffff;
}
.shadow {
-moz-box-shadow: 1px 1px 2px 3px #ccc;
-webkit-box-shadow: 1px 1px 2px 3px #ccc;
box-shadow: 1px 1px 2px 3px #ccc;
}
.panel-footer {
color: #000000;
}
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.body{
margin-left:175px
}
.navbar .navbar-form{
padding: 0 15px;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.box{
border-radius:0;
}
.navbar-collapse.collapse{
display: block !important;
}
.navbar-nav>li, .navbar-nav{
float: left !important;
}
.navbar-nav.navbar-right:last-child{
margin-right: -15px !important;
}
.navbar-right{
float: right !important;
}
It looks like the icons are wrapping underneath the search bar
I played around with your code a little and came up with a solution, however the icons eventually wrap when the screen gets really small (less than 250px wide)
Try changing this code:
<button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
<i class="fa fa-search"></i>
</button>
<a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a>
To this code:
<div class="icons">
<ul class="icon-list">
<li class="icon">
<button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
<i class="fa fa-search"></i>
</button>
</li>
<li class="icon">
<a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a>
</li>
</ul>
</div>
And add this to your stylesheet:
.icons {
float: right;
}
ul.icon-list {
padding: 0px;
margin: 0px 0px 0px 4px;
}
li.icon {
display: inline;
list-style: none;
}
.form-group {
display: inline-block !important;
}
This solution isn't perfect, and could be improved (make a backup of your old code before trying this)
Just add
.navbar-header{
display: inline-block; or display: inline-block!important;
}
in your stylesheet. I hope this is what you expect. :)
I have the following challenge. When an user is typing somehting in an input field, I want to show a reset button with a position center right of the input.
I am not able to change the html structure of the label, input, button and the error message. And I dont want to use browsers support. Does somebody has a creative idea how to do this? Thanks in advance.
label {
display: block;
}
.btn {
padding: 10px;
background-color: green;
color: #fff;
}
input {
padding: 10px;
}
<div class="shopping-cart-coupon">
<div class="form-group">
<label for="coupon">Coupon</label>
<input name="coupon" type="text" id="coupon">
<a id="" style="" class="btn" href=''>Activate</a>
<span style="display:block;color:red;">Error message</span>
<a class="reset">x</a>
</div>
</div>
Outline
Wrap anything that you want to stay as it is now with an <div style="display: inline-block;position:relative;">. This creates a positioning context in which you can position anything afterwards. Then position your reset button with position: absolute and the offsets you need, inside and relative to the wrapper you created.
Here's a try at it, but I'm uncertain that I understood your scenario.
label {
display: block;
}
.btn {
padding: 10px;
background-color: green;
color: #fff;
}
input {
padding: 10px;
}
.input-wrapper {
position: relative;
display: inline-block;
}
.reset {
position: absolute;
right: 3px;
top: 7px;
}
<div class="shopping-cart-coupon">
<div class="form-group">
<label for="coupon">Coupon</label>
<div class="input-wrapper">
<input name="coupon" type="text" id="coupon">
<a class="reset">x</a>
</div>
<a id="" style="" class="btn" href=''>Activate</a>
<span style="display:block;color:red;">Error message</span>
</div>
</div>
.form-group {
position: relative;
}
label {
display: block;
}
.btn {
padding: 10px;
background-color: green;
color: #fff;
}
input {
padding: 10px;
}
.reset {
margin-left: -20px;
margin-top: 10px;
position: absolute;
}
<div class="shopping-cart-coupon">
<div class="form-group">
<label for="coupon">Coupon</label>
<input name="coupon" type="text" id="coupon">
<a class="reset">x</a>
<a id="" style="" class="btn" href=''>Activate</a>
<span style="display:block;color:red;">Error message</span>
</div>
</div>