I'm trying to implement a search bar
But i was not able to display the search icon on the search bar.
Here is the code (jsfiddle).
I found the default style overrides my custom style.
HTML
<div id="search_controls">
<input type="text" class="search-box" placeholder="e.g. restaurant name, cuisine" />
</div>
input.ui-input-text, textarea.ui-input-text {
background-image: none;
padding: .4em;
margin: .5em 0;
line-height: 1.4;
font-size: 16px;
display: block;
width: 100%;
outline: 0;
}
CUSTOM STYLE
#search_controls + input.ui-input-text{
background: url('../img/search_icon.png') 98% center no-repeat!important;
height: 26px;
padding: .4em;
margin: .5em;
font-size: 15px;
display: block;
width: 99%!important;
outline: 0;
}
How to address this issue?
probably I know now what you mean...
just remove the + sign in your custom CSS and it works ;-)...
example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
#search_controls input.ui-input-text{
background: url('taifun.png') 98% center no-repeat!important;
height: 26px;
padding: .4em;
margin: .5em;
font-size: 15px;
display: block;
width: 99%!important;
outline: 0;
}
</style>
</head>
<body>
<div data-role="page">
<div id="search_controls">
<input type="text" class="search-box" placeholder="e.g. restaurant name, cuisine" />
</div>
</div><!-- /page -->
</body>
</html>
Use this
<input type="text" class="ui-input-text ui-body-a" name="" id="searchinput1" placeholder=" Search..." value="" data-type="search">
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;
}
Input work fine with padding. For prevent troubles with different border-width, rewrite to set height, and remove vertical padding. In result text align and line-height is broken. How to fix text align in input, and save easy height set?
Screenshot
Link to reproduce
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
}
.container {
padding: 40px;
display: flex;
align-items: center;
gap: 20px;
}
input {
display: block;
font-size: 16px;
line-height: 24px;
color: #000;
border: 1px solid darkgray;
min-width: 180px;
outline: none !important; // for example
}
#input1 {
padding: 7px 12px;
}
#input2 {
height: 40px;
padding-left: 12px;
padding-right: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<input value="Some value" type="text" id="input1" />
<input value="Some value" type="text" id="input2" />
</div>
</body>
</html>
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.
I have coded a small form, it is part of a bigger webpage and I am taking small steps, according to specification.
I am curious if I could have done it better in some way. If I could streamlined the code or used some other command or syntax that is better?
Perhaps there are some redundancies?
Also is there a good way to move the Send button so it is centered in the middle and is there a way to move it closed to the bottom without too much hassle? Or to move the placeholder text close to the left?
I will enclose a link to a pen and you can check out the code there.
https://codepen.io/anon/pen/pYNPrw
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<form action="#">
<h2>xyz xyz</h2>
<div class="input-wrapper">
<label for="name">Name:</label>
<input type="text" name="Name" placeholder="Name...." id="name">
</div>
<div class="input-wrapper">
<label for="email">Epost:</label>
<input type="text" name="Epost" placeholder="Epost...." id="epost">
</div>
<button type="submit">Senden</button>
</form>
</body>
</html>
I have changed your code by adding margin property to adjust position of the button and commenting transform property. but if you could use a style library like bootstrap or material design you can sort out a form way more faster
h2 {
margin: 0;
padding: 0;
margin-bottom: 2.3rem;
}
form {
float: left;
display: inline-block;
padding: .5rem;
height: 205px;
width: 168px;
border: 2px solid black;
font-family: Sans-Serif;
font-size: 12px;
}
.input-wrapper {
margin-bottom: .5rem;
}
label {
width: 50px;
display: inline-block;
text-align: left;
font-family: Sans-Serif;
font-size: 14px;
}
input {
width: 90px;
padding: .5rem;
height: 3px;
border: 2px solid black;
text-align: left;
}
button {
padding: .5rem;
display: block;
width: 55%;
background: lightgrey;
color: black;
border: 2px solid black;
text-align: center;
border-radius: 5px;
font-size: inherit;
/* transform: translate(50%, 50%); */
margin: 60px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<form action="#">
<h2>xyz xyz</h2>
<div class="input-wrapper">
<label for="name">Name:</label>
<input type="text" name="Name" placeholder="Name...." id="name">
</div>
<div class="input-wrapper">
<label for="email">Epost:</label>
<input type="text" name="Epost" placeholder="Epost...." id="epost">
</div>
<button type="submit">Senden</button>
</form>
</body>
</html>
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 ?