I'm having a problem getting the search box to look like I want.
http://i39.tinypic.com/e8u8gn.jpg
My CSS Code:
#searchform {
position: relative;
padding: 5px;
}
HTML Code:
<body class="home">
<div id="container">
<header id="masthead">
<h1><p>Testing</p></h1></header>
<nav class="nav-buttons" id="primary">
<ul>
<li id="search" style="padding-left:400px;">
<form id="searchform" action="http://www.Google.com/" method="get"><label class="screen- reader-text" for="s">
</label><input id="s" type="text" placeholder="Type your search here" name="s" value=""> </input><input id="searchsubmit" type="submit" value="Search"></input></form></li>
</ul>
</nav>
Check this Fiddle
HTML
<div>
<input type="text">
</div>
CSS
div {
background: #e1e1e1;
padding: 20px;
}
input {
padding: 5px 5px;
width: 300px;
height: 30px;
font-size: 16px;
border: 1px solid #ccc;
padding-right: 50px;
background: #fff url(http://png.findicons.com/files/icons/1389/g5_system/16/toolbar_find.png) no-repeat;
background-position: 330px center;
}
input:focus {
border: 1px solid #ccc;
}
CSS
.hey { border:1px solid #efefef; padding:7px; font:normal 14px Tahoma; }
HTML (change into this)
<input id="s" class="hey" type="text" placeholder="Type your search here" name="s" value=""> </input>
<input id="searchsubmit" type="image" src="search.gif"</input></form></li></input>
Enjoy!
Related
I am currently working on a form for a page in MOSS 2007 and am forced to use a lot of JavaScript in place of CSS3 and jQuery due to government restrictions. I come from the C# world and JavaScript is still somewhat new to me.
My current objective is to replace the contents of a stationary div element with the contents of another that is hidden on the page. I'm coming to my wits end trying resolve this only remaining issue on this page. Currently I'm using a simple (pseudo: doc.getbyid(id).innerhtml = newdiv) to replace the contents of the div, now my two theories are that either 1) the onclick event isn't calling the function, or 2) the replace just isn't working.
(function() {
document.getElementById("currentSlide").innerHtml = document.getElementById("contactSlide").innerHtml;
})();
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHtml = document.getElementById(eIDs[id]).innerHtml;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>
The only other thing I can think to do is to store the inner html in a var and just assigning it as needed. Please help!
There are 2 things why it's not working
change innerHtml to innerHTML
add a load handler so DOM is ready before you target its elements
I also chose to drop the unnecessary document.getElementById() statement and simpy call the nextSlide function with its first item index
window.addEventListener('load', function(e) {
nextSlide(0);
})
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>
Your code is ok, but replace innerHtml with innerHTML, JavaScript is case sensitive.
(function() {
document.getElementById("currentSlide").innerHTML = document.getElementById("contactSlide").innerHTML;
})();
var eIDs [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(var id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}
(function() {
document.getElementById("currentSlide").innerHTML = document.getElementById("contactSlide").innerHTML;
})();
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>
You had an issue with the param in your nextSlide function, you were passing var id, when it should just be id. and your var eIDs was missing an = so your array was never declared in the variable. the gentleman above is still using the incorrect code. Do you have a click handler? can we see it?
The issue was with placement of the script itself; moved to the end of the body and worked like a charm! The little issues such as innerHTML and the equals sign for eids and the var id were just little oversights; of course I had to add the additional handlers for onclick once I got the load to work. It's now working like a charm. Thank you all for being such great help!
I have the following HTML and CSS code and the output.
When I click the input boxes I want my cursor to be exactly just on the left of the placeholder text. But when I click the input the box the cursor shows up at the very start of the the input box.
How can i align the cursor to the placeholder starting character on focus.
Thanks
HTML
<head>
<title>AUMC-Student Portal</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css2/paper.css" rel="stylesheet" media="screen">
<link href="css2/myCSS.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="Login-Form-Container">
<form class="Inner-Portion">
<div>
<input class="form-control" type="text" placeholder="Username" />
</div>
<br>
<div>
<input class="form-control" type="password" placeholder="Password" />
</div>
<br>
<select class="form-control controls">
<option selected>Laptop</option>
<option value="">Mouse</option>
<option value="">Keyboard</option>
<option value="">Monitor</option>
<option value="">Hello World</option>
</select>
<br>
<br>
<button type="button" class="btn btn-default">Forgot</button>
<button type="button" class="btn btn-primary">Login</button>
<form/>
</div>
</body>
</html>
CSS
body {
background-color: #293037;
background-size: 1500px;
}
.Login-Form-Container {
background-color: dodgerblue;
width: 400pt;
height: 310pt;
text-align: center;
margin: 0 auto;
}
.Inner-Portion {
background-color: whitesmoke;
width: 400pt;
height: 300pt;
padding-top: 57pt;
}
.controls , .Inner-Portion div{
margin: 0px auto;
width: 300px;
}
.form-control::-webkit-input-placeholder {
padding: 55px;
}
.Inner-Portion div{
border: solid 1px #DDDDDD;
}
.btn-default , .btn-primary {
width: 150px;
}
OUTPUT
You can use text-indent property.
input.form-control {
box-sizing: border-box;
width: 100%;
text-indent: 30px;
}
jsFiddle
Or just set some padding-left for it.
input.form-control {
box-sizing: border-box;
width: 100%;
padding-left: 30px;
}
jsFiddle
You may add:
input.form-control {
width: 100%;
padding-left: 55px;
}
and remove .form-control::-webkit-input-placeholder.
The snippet:
body {
background-color: #293037;
background-size: 1500px;
}
.Login-Form-Container {
background-color: dodgerblue;
width: 400pt;
height: 310pt;
text-align: center;
margin: 0 auto;
}
.Inner-Portion {
background-color: whitesmoke;
width: 400pt;
height: 300pt;
padding-top: 57pt;
}
.controls , .Inner-Portion div{
margin: 0px auto;
width: 300px;
}
input.form-control {
width: 100%;
padding-left: 55px;
}
.Inner-Portion div{
border: solid 1px #DDDDDD;
}
.btn-default , .btn-primary {
width: 150px;
}
<div class="Login-Form-Container">
<form class="Inner-Portion">
<div>
<input class="form-control" type="text" placeholder="Username" />
</div>
<br>
<div>
<input class="form-control" type="password" placeholder="Password" />
</div>
<br>
<select class="form-control controls">
<option selected>Laptop</option>
<option value="">Mouse</option>
<option value="">Keyboard</option>
<option value="">Monitor</option>
<option value="">Hello World</option>
</select>
<br>
<br>
<button type="button" class="btn btn-default">Forgot</button>
<button type="button" class="btn btn-primary">Login</button>
</form>
</div>
This Code is enough.
input {
padding-left: 10px;
}
you should make the padding to target the input and not the placeholder.
try something like this
.form-signin input[type="email"], .form-signin input[type="password"]{
padding: 14px 16px !important;
margin: auto;
font-size: 17px;
}
Don't apply styles to the placeholder rather make it global to the input the placeholder will apply automatically
.form-control{padding:14px 16px;}
I am new on html development. I have problem with html for handling web UI . Actually I build a small html based application which is for design a form . In this form three main things, one is Elements on left side , second is properties on right side , In centre there have resizable div, I have problem with that div that div is shifting when resizing it in right side . Down side that is perfect when resizing . I share my code please see it and run it .
What I want? : I want when I resize to right size my properties div also shift on right when width is increasing of resizable div. Please anyone help me who have expertise in html .
.element-div {
width:300px;
box-shadow: 1px 1px 1px 1px grey;
height:auto;
border-radius: 10px;
margin-left:20px;
background-color:#fff;
float:left;
padding-bottom:18px;
}
.test {
margin-top:5px;
margin-left : 40px;
width: 180px;
height: auto;
padding:15px;
margin-bottom: 5px;
border: 1px solid burlywood;
}
#drop {
width: 700px;
height: 650px;
margin-bottom: 30px;
border-radius: 10px;
background-color: #fff;
box-shadow: 1px 1px 2px 2px grey;
}
.dropped {
width: 180px;
height: auto;
padding:15px;
border : 1px solid burlywood;
background-color: none;
}
.button-clone {
background-color: coral;
border: solid 1px;
border-color: crimson;
height:50px;
width:100%;
}
.text-clone {
border : solid 1px;
border-color :cornflowerblue;
height : 25px;
width : 100%;
}
.dropdown-clone {
height : 30px;
width : 100%;
background-color: cornflowerblue;
}
.date {
border : solid 1px ;
border-color: darkgoldenrod;
height:25px;
width:100%;
}
.save-form {
background-color:#B35050;
border: solid 1px;
border-color:#861F03;
height:40px;
width:80px;
float : right;
border-radius : 5px;
}
h1 {
font-family: sans-serif;
color :brown;
}
#properties-ui {
float:right;
margin-top:15px;
margin-right:10px;
min-width:180px;
min-height:100px;
background-color: #AFE1E6;
padding-left:20px;
padding-right: 20px;
padding-bottom: 20px;
border-radius: 10px;
font-family: sans-serif;
box-shadow: 1px 1px 1px 1px grey;
}
#header-properties {
background-color: brown;
color:#fff;
font-family: sans-serif;
margin-top: -33px;
text-align:center;
border-radius: 5px;
box-shadow: 1px 1px 1px 1px grey;
}
#delete , #clear, #save{
background-color:#FF7C7C;
border: solid 1px;
border-color:#ff000a;
color : #fff;
height:40px;
width:80px;
font-family: sans-serif;
border-radius : 5px;
}
#SET {
background-color:#3D7007;
color:#fff;
width:45px;
height:30px;
margin-top:5px;
float:right;
border:1px solid white;
border-radius:6px;;
}
.pre-button {
background-color:#496EF3;
color:#fff;
width:55px;
height:25px;
float:right;
border:1px solid white;
border-radius:6px;;
}
<body style="background-color:ivory;">
<div style="border:7px solid cadetblue;padding:10px;border-radius:20px;">
<div>
<h1>FORM TEST<input type="submit" class="save-form" name="saveForm" id="saveForm" value="Submit" style="float:right;color:#fff;" onclick="formsubmit();"></h1>
</div>
<div style="margin-left:50px;margin-bottom:10px;">
<input type="button" style="background-color:#77B337;border:1px #4E9205;"id="save" name="save" value="Save"/>
<input type="button" style="background-color:#7C9AFF;border:1px #637ED8;" id="clear" name="clear" value="Clear" onclick="clearCanvas();" />
<input type="button" id="delete" name="delete" value="Delete" onclick="delete_Element();"/>
<label style="margin-left:15%;">Selected Table:<input type="text" name="tablename" id="tablename" class="text-clone" style="border-color:green;width:15%;margin-left:2%; " readonly /></label>
</div>
<div id="properties-ui">
<div id="header-properties"><p>Properties</p></div>
<input type="text" id="Name" style="margin-bottom:8px;padding:3px;" placeholder="Name"><br>
<input type="checkbox" id="fieldbox" style="height:15px;width:15px;" name="fieldRequired" />
<label style="font-size:14px;">Field Required</label><br><br>
<input type="text" id="Value" style="margin-bottom:8px;padding:3px;" placeholder="Value"><br>
<input type="color" name="colorpicker" id="bg" style="margin-top:5px;width:20px;" value="#fefefe">
<label style="font-size:14px;">Select Color</label><br><br>
<input type="text" id="addoption" name="addoption" style="margin-bottom:8px;padding:3px;width:100px;" placeholder="Add Options">
<input type="button" class="pre-button" name="add" id="add" value="Add" onclick="return addoptions();" /><br><br>
<input type="text" id="deloption" name="deloption" style="margin-bottom:8px;padding:3px;width:100px;" placeholder="Del Options">
<input type="button" class="pre-button" name="Del" id="Del" value="Del" style="background-color:#F95050" onclick="return deloptions();" /><br><br>
<select id="data-column" class="dropdown-clone" style="background-color:rgb(208, 110, 6);margin-bottom:15px;height:25px;color:cornsilk" name="Name"><option value="">Name</option><option value="satinder">Satinder</option></select><br>
<input type="button" name="setproperties" id="SET" value="SET" onclick="return setProperties();"/>
</div>
<div class="element-div">
<h3 style="margin-left:25px;margin-top:10px;color:goldenrod;">ELEMENTS</h3>
<div class="test red square" style="cursor:move;"><input type="text" class="text-clone" name="default" style="cursor:not-allowed"></div>
<div class="test red square" style="cursor:move;"><textarea class="text-clone" name="default" style="cursor:not-allowed" placeholder=" Label here..."></textarea></div>
<div class="test red square" style="cursor:move;"><input type="text" class="date" name="date" style="cursor:not-allowed" id="date" placeholder=" DD-MM-YEAR"></div>
<div class="test red square" style="cursor:move;"><select id="selectbox" class="dropdown-clone" style="cursor:not-allowed" name="1">
<option id="SELECT" value="">SELECT</option>
</select></div>
<div class="test red square" style="cursor:move;" ><input type="button" class="button-clone" value="Button" style="height:50px;cursor:not-allowed;" ></div>
<label style="margin-left : 15%;">Radio Button</label>
<div class="test red square" style="cursor:move;"><input type="radio" style="width:15px; height:15px;cursor:not-allowed;" name="radiobutton" value="default"></div>
<label style="margin-left : 15%;">Checkbox</label>
<div class="test red square" style="cursor:move;"><input type="checkbox" style="width:15px; height:15px;cursor:not-allowed;"></div>
<label style="margin-left : 15%;">Combobox</label>
<div class="test red square" id="combobox" style="cursor:move;"><input type="text" name="example" style="cursor:not-allowed" list="exampleList">
<datalist id="exampleList">
</datalist></div>
</div>
<div id="dd"><div style="margin-left:26%;resize: both;overflow:auto;" id="drop"></div>
</div>
</div>
</body>
I want to hide the form inside the filter section without hiding title.
I tried to add form tag:
$(this).parents('.filter-section form').toggle("slideUp");
But it's not working.
Here is a fiddle
$('.filter-section .filter-toggle').click(function() {
$(this).parents('.filter-section').toggle("slideUp");
});
You can do it by using $(this).next('form').toggle("slideUp"); :
The updated JSFIDDLE.
$('.filter-section .filter-toggle').click(function() {
$(this).next('form').toggle("slideUp");
});
/*filter*/
.filter {
border-radius: 5px;
border: solid 1px #008db0;
padding: 20px;
background: #fff;
}
.filter-section {
border-bottom: solid #000 1px;
padding: 10px 0 10px 0;
}
.filter-title {
font-size: 20px;
font-weight: 900;
}
.filter input[type=checkbox] {
margin-right: 8px;
}
.filter-section:last-child {
border-bottom: 0;
}
.filter-section:first-child {
padding: 0 0 10px 0;
margin-top: -10px;
}
.filter .rating span {
position: absolute;
top: 0px;
right: 70px;
}
.filter .rating span:before {
color: gold;
font-size: 23px;
}
.filter .badge {
background: #008db0;
padding: 2px 2px;
font-weight: normal;
font-size: 12px;
border: solid 2px #fff;
border-radius: 15px;
box-shadow: 2px 0px 1px rgba(0, 0, 0, 0.39);
margin: 0;
}
.filter-section form .badge {
background: #f87e47;
padding: 3px 1px;
margin-right: 6px;
}
.filter .more {
color: #000;
font-weight: normal;
font-size: 15px;
float: right;
margin: 12px 0 0;
}
#amount-min {
border: 0;
color: #f6931f;
font-weight: bold;
}
#amount-max {
border: 0;
color: #f6931f;
font-weight: bold;
text-align: right
}
.ranger input {
width: 78px;
}
.ranger {
display: flex;
}
.ui-slider-handle {
border-radius: 10px;
left: 60%;
}
.ui-slider-range {
background: #ff7400;
}
.filter-toggle {
cursor: pointer;
}
.filter-toggle:after {
float: right;
content: "\f107";
font-family: 'FontAwesome';
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css' />
<script src='https://use.fontawesome.com/0e9115ffee.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js'></script>
<div class="row">
<div class="col-md-2 filter">
<div class="filter-section">
<p class="filter-title">Etoiles</p>
<p class="rating rating-5star"><span></span>
</p>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Budget</p>
<form action="" class="form">
<p class="ranger">
<input type="text" id="amount-min" />
<input type="text" id="amount-max" />
</p>
<div id="slider-range"></div>
</form>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Arrangement</p>
<form id="arrangementfilter" action="">
<input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Logement Petit Dejeuner</br>
<input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Demi Pension</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Pension Complete</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive Soft</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive</br>
</form>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Ville</p>
<form id="cityfilter" action="">
<input type="checkbox" name="city" value="hammamet" /><span class="badge">157</span>Hammamet</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Sousse</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Monastir</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Mahdia</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tabarka</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Gammarth</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tunis</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Djerba</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Touzeur</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Douz</br>
</form>
Plus des villes <span class="badge">13</span>
</div>
</div>
I have a drop down list where a list is selected and entered into an input box. However the drop down list is not align properly with the input box. I present the codes below.
below is the HTML 5 code
<form class="form" action="put.php" method="post" name="access_form">
<li>
<label for="firstname">First Name</label>
<input name="firstname" id="keyword" type="text" placeholder="type first name (required)" required />
<div id="results">
<div class="item">abc</div>
<div class="item">def</div>
<div class="item">hij</div>
</div>
</li>
</form>
below is the css code
.form label {
width:150px;
margin-top: 3px;
display:inline-block;
float:left;
padding:3px;
}
.form input {
height:20px;
width:220px;
padding:5px 8px;
}
#results {
width: 204px;
display: none;
display: absolute;
border: 1px solid #c0c0c0;
}
#results .item {
padding: 3px;
font-family: Helvetica;
border-bottom: 1px solid #c0c0c0;
}
but anytime i run the code i get the following alignment
Now , how do I align the drop down box and the input box to match each other.
If I understand correctly, you want the input to be on the next line, which would lineup with the list below it:
.form label {
display:block;}
or
.form input {
display:block;}
I don't think the <li> tag belongs in your html, so I've removed it from my answer. If you want to align the results with the input field they should be in the same div. I've simplified here and simply put in your input field inside of the #results div. Floating that div to the left will align it's inner content the way I think you want it to.
.form label {
width:150px;
margin-top: 3px;
display:inline-block;
float:left;
padding:3px;
}
.form input {
height:20px;
width:220px;
padding:5px 8px;
}
#results {
width: 204px;
border: 1px solid #c0c0c0;
float: left;
}
#results .item {
padding: 3px;
font-family: Helvetica;
border-bottom: 1px solid #c0c0c0;
}
<form class="form" action="put.php" method="post" name="access_form">
<label for="firstname">First Name</label>
<div id="results">
<input name="firstname" id="keyword" type="text" placeholder="type first name (required)" required />
<div class="item">abc</div>
<div class="item">def</div>
<div class="item">hij</div>
</div>
</form>
I agree with Erik, but for a smoother effect I suggest to comment width and border on #results and change form .item with #results .item
Gianmaria
.form label {
width:150px;
margin-top: 3px;
display:inline-block;
float:left;
padding:3px;
}
.form input {
height:20px;
width:220px;
padding:5px 8px;
}
#results {
/*width: 204px;*/
/*border: 1px solid #c0c0c0;*/
float: left;
}
#results .item {
padding: 3px;
font-family: Helvetica;
border: 1px solid #c0c0c0;
<form class="form" action="put.php" method="post" name="access_form">
<label for="firstname">First Name</label>
<div id="results">
<input name="firstname" id="keyword" type="text" placeholder="type first name (required)" required />
<div class="item">abc</div>
<div class="item">def</div>
<div class="item">hij</div>
</div>
</form>