I have a bootstrap collapsible panel set up to expand and collapse a search bar. This works fine with no styling but when styling is added, it has a mind of its own. It looks like the styling is getting In the way of the collapsing transition. Then it just stops working.
Here is the code with the styling attached to this. I want this to be clickable on an a href link.
#search-dropdown-div {
width: 100%;
padding: 10px;
display: inline-block;
background-color: transparent;
}
#center {
margin: 0 auto;
width: 1000px;
position: relative;
}
#center form {
position: relative;
}
#center form input[type="search"] {
width: 100% !important;
padding: 16px !important;
border-radius: 10px;
border-style: none;
font-size: 20px;
letter-spacing: 1px;
}
#center form input[type="submit"] {
background-color: #3A83F3;
width: 100px;
padding: 16px;
margin-left: -100px;
border-style: none;
border-radius: 5px;
color: white;
position: absolute;
top: 4px;
right: 4px;
float: right;
letter-spacing: 1px;
}
#center form input[type="submit"]:hover {
background-color: #0D5C9E;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Bootstrap Collapse Training</title>
</head>
<body>
<a class="mag-search" data-toggle="collapse" href="#search-dropdown-div"><i class="fa fa-search" aria-hidden="true"></i>Search</a>
<div id="search-dropdown-div" class="collapse">
<div id="center">
<form role="search">
<input class="fontAwesome" type="submit" value="Search  " />
<input class="fontAwesome" type="search" placeholder=" Search our website..." />
</form>
</div>
</div>
</body>
From what I tested with your code, I think it's the display: inline-block of #search-dropdown-div that causes problem.
Can you tell me if it works if you remove this line ?
Related
I just started learning HTML and CSS none of the fixes google has suggested have managed to align my contact box to the center of the page. I have tried justify-content, align-items, align-content, and display flex in combination with the stuff above. My page either stays the same or the box aligns itself to the upper left.
I have had a lot of trouble with the things I have built in html so far never aligning center. I would just like to understand why this is happening.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
<link rel="stylesheet" href="./CSS/Style.CSS" />
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
transform: translate(-50%.-50%);
position: absolute;
}
form{
margin: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
I guess you just have a typo here:
transform: translate(-50%.-50%);
It should look like this:
transform: translate(-50%,-50%);
please replace "margin : 35px" with "padding : 35px" in form class and use below 4 lines in contact-box class to center your form:
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
attaching the corrected code for your reference, hope it helps!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
form{
padding: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
</style>
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
You should try to put the code below in your CSS file. When you start writing, upper left is the starting point, that's where your content is going.
html {
text-align: center;
}
I'm currently cloning a site and in the "enter email" input, the text wont align and sticks to the bottom of the input, and i'd prefer it to be in the middle on the left. How can i fix this? any help appreciated <3
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;500;700&display=swap");
:root {
--primary-text: #111111;
--secondary-text: #91908f;
--background: #fffefc;
--btn-primary: #e16259;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--b);
font-family: "Inter", sans-serif;
}
/* NAV */
header img {
float: left;
max-width: 100%;
height: 50px;
margin: 15px 60px;
}
header nav {
float: right;
margin-top: 30px;
padding-right: 20px;
}
header nav a,
header nav .vertical-line {
padding-right: 15px;
text-decoration: none;
color: #111111;
font-weight: 500;
}
header nav a:hover {
text-decoration: underline;
}
/* Hero Section */
.hero {
padding-top: 120px;
}
.hero-img {
display: flex;
justify-content: center;
max-width: 100%;
height: 200px;
}
h1 {
font-size: 70px;
text-align: center;
padding-top: 15px;
}
h4 {
text-align: center;
font-weight: 200;
font-size: 20px;
color: #91908f;
}
form {
display: flex;
justify-content: center;
}
input {
text-align: left;
width: 280px;
margin-top: 30px;
padding-top: 18px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
input::placeholder {
margin-bottom: 20px;
}
form button {
width: 80px;
padding: 0px;
text-align: center;
margin-top: 30px;
color: #fffefc;
}
form label {
margin-top: 5px;
padding-left: 20px;
}
form .btn-primary {
display: inline-block;
background-color: #e16259;
border: 1px solid #af4d46;
text-align: center;
border-radius: 6px;
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notion</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
</head>
<body>
<header>
<img src="img/logo.png" alt="Notion Logo">
<nav>
Product
Download
Resources
Pricing
Careers
<span class="vertical-line">|</span>
Sign Up
Log In
</nav>
</header>
<div class="hero">
<div class="hero-img">
<img src="img/hero.webp" alt="Illustration of 3 people using laptop computers on seperate desks with different expressions">
</div>
<h1>All-in-one workspace</h1>
<h4>One tool for your whole team. Write, plan, and get organized.</h4>
<form action="">
<input type="text" placeholder="Email">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
<p>For teams & individuals - web, mobile, Mac, Windows</p>
</div>
</body>
</html>
In input selector you can change the padding-top: 18px to padding: 10px, as below. Then remove that input::placeholder.
input {
width: 280px;
margin-top: 30px;
padding: 10px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
<form action="">
<input type="text" placeholder="Email">
</form>
You can remove padding of input and adjust by using height and line height
.ip {
height: 30px;
line-height: 30px;
padding: 2px 8px;
}
<input type="text" class="ip" />
Define height for the input class and for input::placeholder remove margin-bottom: 20px; and set margin to auto and also add some left-padding.
input {
text-align: left;
width: 280px;
height: 40px;/*add height for your input*/
margin-top: 30px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
input::placeholder {
margin: auto;/*set margin to auto*/
padding-left: 10px;/*add some left-padding*/
}
<form action="">
<input type="text" placeholder="Email">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
Instead of scratching your head around custom CSS, you can use third party CSS libraries like Bootstrap or Semantic-UI which provide a variety of feature rich CSS components and will eventually reduce your work.
This login is made with boostrap 4, actually it was a preset which I customized. Im new into boostrap and css and didn't understood how to make it responsive. The top cuts off and is not scrollable when resizing the window. It doesn't scale down.
The Login page:
.login-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 340px;
}
.login-form form {
margin-bottom: 15px;
background: #101010;
padding: 30px;
width: 100%;
}
.login-form h2 {
margin: 20px 0 35px;
}
.form-control, .btn {
min-height: 38px;
}
.btn {
font-size: 15px;
font-weight: bold;
}
.clearfix{
margin-bottom: 30px;
color: white;
}
.text-center{
color: white;
font-family: Montserrat;
font-weight: 200;
}
.btn{
border-radius: 0;
padding: 10px;
}
.form-control{
border: 0;
border-radius: 0;
background: #191919;
color: white;
padding: 25px 20px;
}
.pull-right{
color: #fff;
}
.btn-primary{
font-family: Montserrat;
font-weight: 200;
color:#fff;
background-color:#5852eb;
border: 0;
padding: 12px;
}
.btn-primary:hover{
color:#fff;
background-color:#3c3986;
border: 0;
}
.btn-primary:focus,.btn-primary.focus{
outline: none;
box-shadow:none !important;
}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;
background-color:#5852eb;
}
.btn-outline-primary{
color:#5852eb;
background-color:transparent;
background-image:none;
border-color:#5852eb
}
.btn-outline-primary:hover{
color:#5852eb;
background-color:#5852eb;
border-color:#5852eb;
}
.btn:focus {
outline: none !important;
}
input[type="text"], textarea {
outline: none;
box-shadow:none !important;
}
input[type="password"], textarea {
outline: none;
box-shadow:none !important;
}
input[type="email"], textarea {
outline: none;
box-shadow:none !important;
}
.g-recaptcha {
margin-bottom: 10px;
transform:scale(0.93);
transform-origin:0 0;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hash.ms | Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body style="background-color:#0D0D0D; ">
<div class="login-form ">
<form action="Login.html" method="post">
<h2 class="text-center">LOGIN</h2>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="2FA code" required="required">
</div>
<div class="clearfix">
<label class="pull-left checkbox-inline"><input type="checkbox"> Remember me</label>
Forgot Password?
</div>
<div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-theme="dark"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Log in</button>
</div>
</form>
<p class="text-center">Create an Account</p>
</div>
</body>
</html>
The top just cuts off, I can't scroll either.
You can user a div .container and insert your form there, bootstrap have his own classes to make responsive your content (.col-xl-4 .col-md-4 .col-sm-4) you can read more about this here bootstrap responsive-breakpoints
Verify your CDN, this is a CDN for bootstrap 4
Bootstrap CDN
I strongly recommend you to read about the GRID SYSYEM:
https://getbootstrap.com/docs/4.5/layout/grid/
And also you could add like a card:
https://getbootstrap.com/docs/4.5/components/card/
Obviously, you have to use you same css file.
My html form arpitpkh.pythonanywhere.com works fine on pc but not responsive on mobile phones(I'am using iphone7) even though i've added the <meta> tag.
Here's my html code for 'home.html'
What's wrong with my code?? What should i change in my code?
body {
background-image: url("/static/grey.jpg");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
text-align: center;
margin-top: 250px;
font-size: 70px;
color: coral;
}
.input2:hover {
background-color: coral;
color: white;
}
.input1 {
position: absolute;
top: 60%;
left: 37%;
width: 250px;
height: 30px;
}
.input2 {
position: absolute;
top: 59.4%;
left: 59%;
width: 87px;
height: 35px;
background-color: #ddd;
border: none;
color: black;
padding: 10px 5px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
transition: 0.3s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="main.js"></script>
</head>
<body>
<p>
<form action='/weather' method="post">
<h1>City Name:</h1><input class="input1" type="text" name="city_name"> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</p>
</body>
</html>
You're using absolute positioning and defining sizes in px which stays the same on all screen sizes, making your design unresponsive.
You need to use responsive units like ems and media queries.
Check out this article on responsive design principles and this quick tutorial.
So I have four inputs and a button. I tried editing them with CSS but I can't seem to get them to separate. They are all together. No matter what numbers I try to change. Here's my code for both files. Sorry if I get something totally wrong i'm a noob.
nav ul input{
margin: 0px 0px 10px 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
#signInBtn{
margin: 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
<header>
<nav>
<ul>
<?php
echo "<form action='includes/signup.inc.php' method='POST'>
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
<input id='usrInput' type='text' name='uid' placeholder='Username'>
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
<button id='signInBtn' type='submit'>Sign Up</button>
</form>";
?>
</ul>
</nav>
</header>
Try button,input {display:block} and the ul needs min. of one li
In your css your are using position absolute for all the input. That's why all input come all together.
nav ul input {
position: relative;
display: block;
}
#signInBtn {
position: relative;
}
just change it to something position relative or what suitable for you.
nav ul input{
/* delete position */
/* add */
display: block;
margin: 0 auto;
float: none;
}
/* do the same*/
#signInBtn{
/* delete position */
/* add */d
display: block;
margin: 0 auto;
float: none;
}
!you don't have to keep the margin 0 and float: none but i think its a good start before figureing out where you want everything
You are using position absolute, causing the overlap issue
and also you having wrong closing tag so I corrected your code, Please see demo below and tell me if you need anything else.
.wrapper {
margin: 0 auto;
}
.input_block {
text-align: center;
margin-top: 10px;
}
input {
padding: 20px;
width: 200px;
color: black;
border: solid;
font-size: 15px;
}
#signInBtn {
padding: 20px
width: 200px;
color: black;
border: solid;
font-size: 30px;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<form action='includes/signup.inc.php' method='POST'>
<div class="input_block">
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
</div>
<div class="input_block">
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
</div>
<div class="input_block">
<input id='usrInput' type='text' name='uid' placeholder='Username'>
</div>
<div class="input_block">
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
</div>
<div class="input_block">
<button id='signInBtn' type='submit'>Sign Up</button>
</div>
</form>
</div>
</body>
</html>