http://jsfiddle.net/D2RLR/122/
I need to achieve the following:
contain the inputs within the the parent ordered-list/definition-list
have right edge of the arrow buttons sit flush against the right edge of each text input (thereby partly covering the inputs. I will later hide these and use jQuery to display on hover)
HTML
<div class="container">
<div class="row-fluid">
<div class="span4">
<form id="" class="well sidebar-nav">
<dl>
<dt><input type="text" class="counter nospace" name="myList_name" id="myList_name"/></dt>
<dd>
<ol>
<li><input type="text" name="myList_item_1" class="counter box" id="myList_item_1" /><div id="myList_chart_1" class="chart"><a class="btn" href="#">↑</a><a class="btn" href="#">↓</a></div></li>
<li><input type="text" name="myList_item_2" class="counter box" id="myList_item_2" /><div id="myList_chart_2" class="chart"><a class="btn" href="#" style="z-index:0">↑</a><a class="btn" href="#">↓</a></div></li>
<li><input type="text" name="myList_item_3" class="counter box" id="myList_item_3" /><div id="myList_chart_3" class="chart"><a class="btn" href="#">↑</a><a class="btn" href="#">↓</a></div></li>
<li><input type="text" name="myList_item_4" class="counter box" id="myList_item_4" /><div id="myList_chart_4" class="chart"><a class="btn" href="#">↑</a><a class="btn" href="#">↓</a></div></li>
<li><input type="text" name="myList_item_5" class="counter box" id="myList_item_5" /><div id="myList_chart_5" class="chart"><a class="btn" href="#">↑</a><a class="btn" href="#">↓</a></div></li>
</ol>
</dd>
</dl>
</form>
</div>
</div>
</div>
CSS
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.sidebar-nav {
padding: 9px 0;
}
.nav {
list-style: decimal;
}
.counter {
width: 100%;
}
dt {
margin-left: 34px;
}
form dl dd ol {
position: relative;
}
.box {
position: absolute;
top: 0;
}
#myList_item_1, #myList_chart_1 { top: 0; }
#myList_item_2, #myList_chart_2 { top: 36px; }
#myList_item_3, #myList_chart_3 { top: 72px; }
#myList_item_4, #myList_chart_4 { top: 108px; }
#myList_item_5, #myList_chart_5 { top: 144px; }
ol li {
margin-bottom: 18px;
z-index: 0;
}
.chart {
width: 58px;
position: absolute;
top: 0;
z-index: 1;
margin-left: 100%;
margin-right: 0;
}
Okay - I'm almost there:
http://jsfiddle.net/D2RLR/151/
It was pretty much as simple as applying right: 0; to the .chart class.
The only thing I'm still struggling with is aligning the buttons against the inputs.
Related
I'm creating a Sign in/up form. If the login form is displayed then there is a button below Sign up and if you click it then the login form fades and the Sign up form fades in. Then once the Sign up form is displayed clicking Sign in would make the login form be displayed.
However, it only works one time. My client sent me a website template they purchased and wanted me to modify. There are custom CSS files thousands of lines long and it came with it's own version of Bootstrap (CSS and JavaScript) and I'm not sure how they may have modified it. I'm hoping the problem is me and not the template because that would be a nightmare.
Here is my login form/dynamic pill:
<!-- SIGN IN/UP FORM -->
<div class="form-custom text-center container bg-white">
<img src="images/logo.png" alt="">
<!-- TAB CONTENT -->
<div class="tab-content">
<div id="signin" class="tab-pane fade in active">
<!--SIGN IN-->
<form action="" method="post" class="mb-3">
<div class="container px-4">
<input class="form-style" type="email" name="email" placeholder="Email">
<input class="form-style" type="password" name="password" placeholder="Password">
</div>
</form>
<!--SIGN IN-->
</div>
<div id="signup" class="tab-pane fade">
<!--SIGN UP-->
<form action="" method="post" class="mb-3">
<div class="container px-4">
<input class="form-style" type="text" name="first_name" placeholder="First Name">
<input class="form-style" type="text" name="last_name" placeholder="Last Name">
<input class="form-style" type="email" name="email" placeholder="Email">
<input class="form-style" type="password" name="password" placeholder="Password">
</div>
</form>
<!--SIGN UP-->
</div>
</div>
<!-- TAB CONTENT -->
<ul class="nav nav-pills">
<div class="container">
<div class="d-flex flex-row justify-content-center">
<li class="active">
<button data-toggle="pill" href="#signin" class="btn btn-sign">Sign in</button>
</li>
<li>
<button data-toggle="pill" href="#signup" class="btn btn-sign">Sign up</button>
</li>
</div>
</div>
</ul>
</div>
<!-- SIGN IN/UP FORM -->
And then my own style classes compiled from Sass:
.form-custom {
position: absolute;
top: 35vh;
left: calc(90vw - 475px);
width: 475px;
z-index: 5000;
}
#media (max-width: 575.98px) {
.form-custom {
width: 420px;
left: calc(90vw - 420px);
}
}
#media (max-width: 500px) {
.form-custom {
width: 375px;
left: calc(90vw - 375px);
}
}
#media (max-width: 400px) {
.form-custom {
width: 275px;
left: calc(90vw - 275px);
}
}
.form-style {
display: block;
width: 100%;
border-top: 0px;
border-right: 0px;
border-left: 0px;
font-size: 1rem;
}
.form-style:focus {
outline-color: transparent;
}
.btn-sign {
display: inline;
margin: 0px 20px 0px 20px;
border-radius: 0px;
width: 180px;
}
#media (max-width: 575.98px) {
.btn-sign {
width: 162px;
}
}
#media (max-width: 500px) {
.btn-sign {
width: 126px;
}
}
#media (max-width: 400px) {
.btn-sign {
width: 90px;
}
}
Any help would be much appreciated. If additional details are needed please let me know. Thanks.
I commented out the container and flex div's and that fixed the problem.
<ul class="nav nav-pills">
<li class="active">
<button data-toggle="pill" href="#signin" class="btn btn-sign">Sign in</button>
</li>
<li>
<button data-toggle="pill" href="#signup" class="btn btn-sign">Sign up</button>
</li>
</ul>
I'd like something like the JQuery Mobile Flip Toggle Switch, but just that, then I don't want to load all the JQuery Mobile library into my project.
Do you know how to do a nice CSS toggle buttons (more of 2 buttons) like these? I didn't find anything.
Thanks in advance!
PS: I don't care about compability with IE.
Did something quickly. Hope it will help you.
ul.tab {
list-style-type:none;
margin: 0;
padding:0;
border-radius: 5px;
}
ul.tab li {
float: left;
padding: 0;
}
ul.tab li label {
background: white;
padding: 6px;
border: 1px solid #ccc;
display: inline-block;
}
ul.tab li input[type="radio"] {
opacity: 0;
width:1px;
height:1px;
}
ul.tab li input[type="radio"]:checked ~ label {
background: red;
color: white;
}
<ul class="tab">
<li>
<input id="tab1" checked="checked" type="radio" name="tab" />
<label for="tab1">Basic</label>
</li>
<li>
<input id="tab2" type="radio" name="tab" />
<label for="tab2">Options</label>
</li>
<li>
<input id="tab3" type="radio" name="tab" />
<label for="tab3">Methods</label>
</li>
<li>
<input id="tab4" type="radio" name="tab" />
<label for="tab4">Events</label>
</li>
</ul>
I'm trying to make this CSS be flexible and use in an HTML table and be able to only change the element in focus without using JavaScript -- but because of the selectors, it is only changing the first element. I'm not the best CSS developer.
I understand that using the "for=" and repeating the ids of the checkboxes we are rendering invalid HTML, but I was wondering if there was a way around it. I tried to give each parent span a unique id and generate separate classes for them, as well as the labels. but that seemed like it could be an unnecessary amount of work.
Previously I had no use to include these in a table, except now I do.
Is there an easy/flexible approach to making this possible?
See my example here.
CSS
.checkbox-on-off {
position: relative;
display: inline-block;
width: 35px;
padding-right: 2px;
overflow: hidden;
vertical-align: middle;
margin-top: 10px;
}
.checkbox-on-off input[type=checkbox] {
position: absolute;
opacity: 0;
}
.checkbox-on-off input[type=checkbox]:checked+label {
background-color: lightblue;
}
.checkbox-on-off label {
display: inline-block;
border: 1px solid transparent;
height: 15px;
width: 100%;
background: #b8b8b8;
cursor: pointer;
border-radius: 20px;
}
.checkbox-on-off input[type=checkbox]:checked+label .checked {
display: inline-block;
margin-top: 3px;
margin-left: 6px;
background: no-repeat url('img/www-hitchhiker-vflAhaHWR.png') -421px -78px;
background-size: auto;
width: 10px;
height: 10px;
}
.checkbox-on-off label .checked {
display: none;
}
.checkbox-on-off input[type=checkbox]:checked+label .unchecked {
display: none;
}
.checkbox-on-off label .unchecked {
display: inline-block;
float: right;
padding-right: 3px;
}
.checkbox-on-off input[type=checkbox]:checked+label .toggle {
float: right;
}
.checkbox-on-off label .toggle {
float: left;
background: #fbfbfb;
height: 15px;
width: 13px;
border-radius: 20px;
}
HTML
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
Yes, the way around it is to have the inputs inside of the label element:
<label>
<input type="checkbox">
Some Checkbox 1
</label>
<label>
<input type="checkbox">
Some Checkbox 2
</label>
So clicking anywhere inside the label will now toggle the checkbox that is also nested inside that label. Now you don't need for for= attribute on the label.
I'm having issue with an html/css contact form. Ideally, I'd like the 'label' and 'input' to be level with eachother, with a 1px border-bottom extending from the label to a defined endpoint(not a defined width). Is this possible? What am I missing?
<div id="contact">
<div id="invite">
<h1>Let's Talk.</h1>
<h2 class="postinfo">
<p>Have you got a project needing an eye for detail and a creative touch? <br>I'd love to hear from you. </p>
</h2>
</div><!-- end invite -->
<form action="#" method="post">
<fieldset>
<label for="name"><h1>Name:</h1></label>
<input type="text" id="name" placeholder="" />
<label for="email"><h1>Email:</h1></label>
<input type="text" id="email" placeholder="" />
<label for="subject"><h1>Subject:</h1></label>
<input type="subject" id="subject" placeholder="" />
<label for="message"><h1>Message:</h1></label>
<textarea id="message" placeholder=""></textarea>
<input type="submit" value="Send" />
</fieldset><!-- end fieldset -->
</form><!-- end form -->
</div><!-- end contact -->
#contact {
float: left;
margin-left: 300px;
margin-top: 310px;
width: 533px;
}
#invite .postinfo {
list-style-type: none;
margin-left: ;
width: 150px;
}
#form {
float: right;
margin-top: -85px;
margin-left: 230px;
}
#form fieldset {
border-style: none;
margin-left: -50px;
margin-top: -25px;
}
#form fieldset label {
padding-right: 50px;
}
#form fieldset input {
width: 300px;
}
http://i.stack.imgur.com/B6wF8.png
I played around with your code a bit and this is what I came up with:
Here is your HTML:
<contact>
<form action="#" method="post">
<fieldset>
<div class="clear">
<label for="name"><h1>Name:</h1></label>
<input type="text" id="name" placeholder="" />
</div>
<div class="clear">
<label for="email"><h1>Email:</h1></label>
<input type="text" id="email" placeholder="" />
</div>
<div class="clear">
<label for="subject"><h1>Subject:</h1></label>
<input type="subject" id="subject" placeholder="" />
</div>
<div class="clear">
<label for="message"><h1>Message:</h1></label>
<textarea id="message" placeholder=""></textarea>
</div>
<div class="clear">
<input type="submit" value="Send" />
</div>
</fieldset><!-- end fieldset -->
</form><!-- end form -->
</contact><!-- end contact -->
and here is your CSS:
body { font-family:arial,helvetica,sans-serif ;
font-size:14px ;
font-weight:bold ;
}
h1 { font-size:16px ;
margin:0 ;
padding:0 ;
}
contact {
float: left;
margin-left: 300px;
margin-top: 310px;
width: 533px;
}
contact invite .postinfo {
list-style-type: none;
margin-left: ;
width: 150px;
}
contact form {
float: right;
margin-top: -85px;
margin-left: 230px;
}
contact form fieldset {
border-style: none;
margin-left: -50px;
margin-top: -25px;
}
contact form fieldset label { width:100px ;
float:left }
contact form fieldset input {
width: 200px;
float:right ;
}
.clear { clear:both ;
line-height:30px ;
}
You'll need to play with your label and input widths depending on the font size you use.
Best,
Cynthia
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I Want some samples for step by step registrations like a wizard.
i want to use these samples and asp.net page.
Thanks.
You can easily create your own using jQuery - check out this demo
http://jsfiddle.net/nwJFs/
And here's the code
HTML
<div class="step step-1">
<div class="wrap">
<label for="name">Name</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Email</label>
<input id="email" type="text" />
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-2">
<div class="wrap">
<label for="name">Mobile</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Address</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-3">
<div class="wrap">
<label for="name">Some</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Other</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Fields</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Submit</a>
</div>
CSS
body {
font-family: Trebuchet MS;
font-size: 12px;
}
.wrap {
clear: both;
padding: 8px 0;
}
.wrap label {
display: block;
float: left;
width: 150px;
padding: 4px;
line-height: 12px;
}
.wrap input,
.wrap textarea {
display: block;
font-size: 12px;
line-height: 12px;
float: left;
width: 200px;
border: 1px solid #888;
padding: 4px 8px;
}
.button {
background: #333;
color: #f2f2f2;
display: inline-block;
padding: 4px 8px;
text-decoration: none;
border: 1px solid #ccc;
}
.button:hover {
background: #888;
color: #000;
}
br.clear-last {
clear: both;
margin: 15px 0;
}
.step {
display: none;
}
.step-1 {
display: block;
}
jQuery
$(".next").click(function() {
//store parent
var parent = $(this).parent();
if(parent.next().length) {
parent.hide("slow").next().show("slow");
}
return false;
});
$(".prev").click(function() {
var parent = $(this).parent();
if(parent.prev().length) {
parent.hide("slow").prev().show("slow");
}
return false;
});
check out this one : http://thecodemine.org
having problems with chrome though...
Do you mean, something like this?
jQuery Form Builder
checkout these links for better wizard creation:
techlab-smart wizard: http://techlaboratory.net/smartwizard
https://github.com/techlab/SmartWizard