I'm trying to create a simple search bar animation, more specifically, when hovering over the bar, the search history pops up. However, when I try .search-bar-input:hover + .search-history, code doesn't work. I'm new to html, so it's possible it's a basic bug - but I can't find an answer anywhere
<div class="search-bar">
<form class="search-form" autocomplete="off">
<input type="text" class="search-bar-input" name="search-request" placeholder="Type here..." required minlength="4" maxlength="32">
</form>
<div class="search-history">
search history
</div>
</div>
.search-bar-input
{
text-align: center;
height: 50px;
width: 150px;
margin: auto;
}
.search-bar-input:hover
{
border: solid 2px lightgrey;
outline: none;
}
.search-history
{
display: none;
height: 50px;
width: 150px;
background-color: rgb(226, 226, 226);
}
.search-bar-input:hover + .search-history
{
display: block;
}
.search-history:hover
{
display: block;
}
Have you tried displaying the website using different web browsers with the same result? Are you using an older web browser?
You need to add your code when you are hovering the form, not the input field
.search-bar-input {
text-align: center;
height: 50px;
width: 150px;
margin: auto;
}
.search-bar-input:hover {
border: solid 2px lightgrey;
outline: none;
}
.search-history {
display: none;
height: 50px;
width: 150px;
background-color: rgb(226, 226, 226);
}
.search-form:hover+.search-history {
display: block;
/* color: red; */
}
.search-history:hover {
display: block;
}
<div class="search-bar">
<form class="search-form" autocomplete="off">
<input type="text" class="search-bar-input" name="search-request" placeholder="Type here..." required minlength="4" maxlength="32">
</form>
<div class="search-history">
search history
</div>
</div>
You can do something like this:
.search-bar-input
{
text-align: center;
height: 50px;
width: 150px;
margin: auto;
}
.search-bar-input:hover
{
border: solid 2px lightgrey;
outline: none;
}
.search-history
{
display: none;
height: 50px;
width: 150px;
background-color: rgb(226, 226, 226);
}
.search-bar:hover .search-history
{
display: block;
}
<div class="search-bar">
<form class="search-form" autocomplete="off">
<input type="text" class="search-bar-input" name="search-request" placeholder="Type here..." required minlength="4" maxlength="32">
</form>
<div class="search-history">
search history
</div>
</div>
It will affect .search-history when you hover .search-bar
Related
I have a form coded like this I want to make it responsive in both mobile and tablet version or responsive regardless:
</div>
<div class="contact_form">
<form
class="form"
action="https://sheetdb.io/api/v1/it1l3r9npizts"
method="post"
id="sheetdb-form"
>
<label for="name">Name:</label>
<input
type="text"
id="name"
name="data[name]"
placeholder="Your name"
/>
<label for="email">Email:</label>
<input
type="email"
id="email"
name="data[email]"
placeholder="Your email"
/>
<label for="message">Message:</label>
<textarea
id="message"
placeholder="Your message"
rows="6"
name="data[message]"
></textarea>
<div class="center">
<input type="submit" value="Send Message" />
</div>
</form>
</div>
with these styles in css:
.contact_section {
width: 100%;
height: 100%;
}
.contact_form {
display: flex;
align-items: center;
flex-direction: column;
}
.contact_form label {
margin: 15px 0;
}
.contact_form label {
font-size: 20px;
font-weight: 400;
}
.contact_form input,
textarea {
width: 100%;
padding: 10px;
outline: none;
resize: none;
border: none;
border-bottom: 1px solid var(--contrast-color);
}
input[type="text"]:focus,
textarea:focus {
border-bottom: 2px solid var(--main-color);
}
textarea::-webkit-scrollbar {
width: 4px;
}
textarea::-webkit-scrollbar-thumb {
background-color: var(--contrast-color);
}
.center {
text-align: center;
width: 602px;
font-size: 20px;
}
input[type="submit"] {
margin-top: 30px;
width: 100%;
max-width: 200px;
background-color: var(--netural-color);
font-size: 17px;
color: var(--contrast-color);
font-weight: 400;
cursor: pointer;
}
I have been trying to make it responsive cause my form doesn't shrink down and there isn't any padding on the left and right when the screen keeps getting
smaller:
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.contact_form input textarea {
width: 70%;
margin-top: 0;
.home-section {
height: 100vh;
}
section {
height: 100%;
width: 100%;
}
}
Based on your code I suspect the .center and it's fixed width is setting the width of your form. Just remove that width or make it responsive.
.center {
text-align: center;
width: 602px;
font-size: 20px;
}
<form>
<div class="center">
<input type="submit" value="Send Message" />
</div>
</form>
Trying to figure out how to align some buttons to some input fields and it's tricky as hell. I couldn't figure it out.
I've found a lot of things online:
Align button to input with float?
Align button with input forms with labels
Make form button/text field same height in all browsers?
I know I will get a lot of minuses but I just can't get my head around this and I need help.
I've lost a whole day modifying values and I have no clue on how to position things in CSS. I can't understand it.
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: block;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
display: grid;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<div id="logo"><img url="logo.png"></div>
<div class="big-box">
<div class="box-head">
<div class="title">
<h1>Configuration Page</h1>
</div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class="textbox">
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id="button" type="submit" value="Enter">
<div class="textbox">
<input type="number" placeholder="Brightness" name="getBrightness" value="">
</div>
<input id="button" type="submit" value="Enter">
</form>
</div>
EDIT: This is how I've fixed it:
I've changed from class to ID: #textbox;
I've put #textbox and #button inside div: #box-box;
I've added display: flex; to #box-box and display: grid; to
both #textbox and #button.
Added margin-left: 25px; to #button;
Here is the result.
Thanks #Flavio Caruso for the inspiration.
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url">
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
#logo {
width: 94%;
height: 50px;
background: url(logo.png) left no-repeat;
background-size:contain;
margin: 30px auto;
}
**#box-box {
display:flex;
}**
#textbox {
**display: grid;**
width: 70%;
overflow: hidden;
font-size: 20px;
padding 10px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
#textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
**display: grid;**
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 10px 0;
**margin-left: 25px;**
margin-top: 30px;
}
There is a few changes you have to do, you must insert the input button inside the div class 'textbox' and add a display:flex, then you ajust the css from button to inline-block and float right.
like that:
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: flex;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
margin: 5px 5px;
}
#button {
display: inline-block;
float: right;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
<input id ="button" type="submit" value="Enter">
</div>
<div class = "textbox" >
<input type="number" placeholder="Brightness" name="getBrightness" value="">
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
I'm styling a form for a site and I need it to look like this -
My coded version, so far, looks like this -
The name & email sections for some reason won't size properly and there seems to be padding or margin properties somewhere which I can't seem to override. Here's my code as it stands -
form {
height: 200px;
width: 400px;
margin-right: 50px;
}
.name {
float: left;
}
input[type=text],
input[type=email] {
background: #F0F0F0;
font-size: 10px;
width: 100%;
height: 20px;
}
input[type=subject] {
background: #F0F0F0;
font-size: 10px;
width: 100%;
height: 20px;
}
textarea {
resize: vertical;
font-size: 10px;
width: 100%;
background: #F0F0F0;
height: 100px;
}
input[type=submit] {
background: #00bfff;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 10px;
font-weight: 700;
width: 100%;
}
<div class="six columns">
<form>
<fieldset>
<div class="name">
<input type="text" required placeholder="NAME">
</div>
<div class="name">
<input type="email" required placeholder="EMAIL">
</div>
<div>
<input type="subject" placeholder="SUBJECT">
</div>
<div>
<textarea placeholder="MESSAGE..."></textarea>
</div>
</fieldset>
<input type="submit" value="SUBMIT">
</form>
</div>
UPDATE - Latest version.
I made a bunch of tweaks and kind of last track as I went, so I hope you're able to read through this and figure it out. If not, please feel free to ask questions!
form {
height: 200px;
width: 400px;
margin-right: 50px;
}
fieldset {
border: none;
padding: 0;
margin: 0;
display: flex;
}
div.row {
display: flex;
width: 100%;
}
div.row input {
margin-left: 5px;
}
div.row input:first-child {
margin-left: 0;
}
input[type=text],
input[type=email] {
background: #E8E8E8;
font-size: 10px;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 0;
margin-bottom: 5px;
padding: 6px 12px;
}
textarea {
resize: none;
font-size: 10px;
background: #E8E8E8;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 6px 12px;
margin-bottom: 5px;
}
input[type=submit] {
background: #1ba4dd;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 10px;
font-weight: 700;
width: 100%;
padding: 8px 0;
}
input[type=submit]:hover {
background: #00bfff;
}
<div class="six columns">
<form>
<fieldset>
<div class="row">
<input name="name" type="text" required placeholder="NAME">
<input name="email" type="email" required placeholder="EMAIL">
</div>
<input name="subject" type="text" placeholder="SUBJECT">
<textarea rows="8" placeholder="MESSAGE..."></textarea>
</fieldset>
<input type="submit" value="SUBMIT">
</form>
</div>
Extra margin from a paragraph tag is forcing a button downwards. I am trying to understand why.
Here's one answer I tried looking to find an answer from : is it a bug? margins of P element go outside the containig div, however the answer quotes "collapsing margins" but I don't understand why that would be a correct answer, as margins don't seem to be collapsing in this case but expanding.
I understand the problem can be fixed by giving the paragraph tag a margin of 0, but I want to know why the margin is bleeding, and (if is due to margin collapse), a more verbose explanation from the other answer..
.body {
height: 100%;
}
.error {
color: red;
}
#chatbox {
width: 500px;
height: 500px;
background-color: #93ff95;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 350px;
background-color: white;
padding: 5px;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: none;
}
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<span class="error">Invalid Username</span>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
There isn't a problem with the margin of the p-tag.
Your #messagesArea height is too high. You can fix it by decreasing it to height: 338px; as shown in the example below:
.body {
height: 100%;
}
.error {
color: red;
}
#chatbox {
width: 500px;
height: 500px;
background-color: #93ff95;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 338px;
background-color: white;
padding: 5px;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: none;
}
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<span class="error">Invalid Username</span>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
The "login the enter chat" button is supposed to fit inside the messageBox div, but is (visually) way bigger than messageBox. I even made padding and margin 0 but it did not change anything.
What is the culprit here (besides myself)?
#chatbox {
width: 500px;
height: 500px;
background-color: lime;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 350px;
background-color: white;
padding: 5px;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: 0;
}
<h1>Chat with Customer Service</h1>
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
The p element inside your #messagesArea has a margin values.
The #messagesArea has padding.
Remove these two and you are done :)
#messagesArea {
padding: 0;
}
#messagesArea p {
margin: 0;
}
Here is a working example:
#chatbox {
width: 500px;
height: 500px;
background-color: lime;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 350px;
background-color: white;
padding: 0;
}
#messagesArea p {
margin: 0;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: 0;
}
<h1>Chat with Customer Service</h1>
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
Note - if you do need these margin/padding values - make sure you set the container (#chatbox) with the correct height value. In your case - it should be 512px - it will include the padding of the #messageArea and the border of the #messageBox).