I have image display that shows individual images when a radio button is clicked. however the image associated with the radio button shifts vertically down in it position. in the example below is 3 images with 3 associated radio button.I tried setting line-height to 0 and also tried white-space:nowrap in css. but didn't work. any help is appreciated.
<style>
#imgflow {
width: 60%;
overflow: hidden;
text-align:center;
margin:0 auto;
}
#imf_holder article img {
width: 100%;
}
#imf_holder .inner {
width: 100%;
line-height: 0;
}
#imf_holder article {
width: 100%;
}
.img-control {
display: block;
text-align: center;
}
input[type="radio"] ~.ps{
display:none;
}
input[type="radio"]:checked ~.ps{
display:block;
}
input[type=radio] {
opacity: 0;
}
</style>
<html>
<div id="imf_holder">
<div id="imgflow">
<div class="inner">
<article>
<input type="radio" checked value="Img1" name="event" id="img-1" ><div class="ps"> <img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" height="200px" ></div>
</article>
<article>
<input type="radio" value="Img1" name="event" id="img-2" ><div class="ps"> <img src="http://www.hdwallpapery.com/static/images/Winter-Tiger-Wild-Cat-Images_vwV1tOp.jpg" height="200px" ></div>
</article>
<article>
<input type="radio" value="Img1" name="event" id="img-3" ><div class="ps"> <img src="http://eskipaper.com/images/images-4.jpg" height="200px" ></div>
</article>
</div>
</div>
</div>
<div style="margin-left:20px;margin-right:20px;margin-top:15px;">
<li class="img-control">
<label for="img-1" >button1 </label>
<label for="img-2" >button2 </label>
<label for="img-3" >button3 </label>
</li>
</div>
Set your input to display: none;, as when use opacity they are invisible but still occupy space, hence pushing the images down.
input[type=radio] {
display: none;
}
Sample snippet
#imgflow {
width: 60%;
overflow: hidden;
text-align:center;
margin:0 auto;
}
#imf_holder article img {
width: 100%;
}
#imf_holder .inner {
width: 100%;
}
#imf_holder article {
width: 100%;
}
.img-control {
display: block;
text-align: center;
}
input[type="radio"] ~ .ps{
display:none;
}
input[type="radio"]:checked ~ .ps{
display:block;
}
input[type=radio] {
display: none;
}
<div id="imf_holder">
<div id="imgflow">
<div class="inner">
<article>
<input type="radio" checked value="Img1" name="event" id="img-1" ><div class="ps"> <img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" height="200px" ></div>
</article>
<article>
<input type="radio" value="Img1" name="event" id="img-2" ><div class="ps"> <img src="http://www.hdwallpapery.com/static/images/Winter-Tiger-Wild-Cat-Images_vwV1tOp.jpg" height="200px" ></div>
</article>
<article>
<input type="radio" value="Img1" name="event" id="img-3" ><div class="ps"> <img src="http://eskipaper.com/images/images-4.jpg" height="200px" ></div>
</article>
</div>
</div>
</div>
<div style="margin-left:20px;margin-right:20px;margin-top:15px;">
<li class="img-control">
<label for="img-1" >button1 </label>
<label for="img-2" >button2 </label>
<label for="img-3" >button3 </label>
</li>
</div>
Just make your inputs absolute like this:
input[type=radio] {
opacity: 0;
position:absolute;
}
Related
I'm simply trying to create 3 columns of text fields with associated labels. I can easily create 2 columns but this code is putting the third text field on a row below:
<div className={styles.threecol}>
<div className={styles.col1}>
<div style={{width: '150px'}}>
<Label className={styles.questionTitle}>Record No.</Label>
<TextField
value={this.state.Title}
disabled={true}
/>
</div>
</div>
<div className={styles.threecol}>
<div className={styles.col2}>
<div style={{width: '150px'}}>
<Label className={styles.questionTitle}>Room</Label>
<TextField
value={this.state.Room}
onChange={this._onRoomChange}
/>
<br />
</div>
</div>
</div>
<div className={styles.threecol}>
<div className={styles.col3}>
<div style={{width: '150px'}}>
<Label className={styles.questionTitle}>Room</Label>
<TextField
value={this.state.Room}
onChange={this._onRoomChange}
/>
<br />
</div>
</div>
</div>
</div>
</div>
</div>
The CSS:
.threecol {
overflow: hidden
}
.threecol .col1 {
width: 22%
}
.threecol .col2 {
width: 22%
}
.threecol .col3 {
width: 22%
}
.threecol .col1 {
float: left;
}
.threecol .col2 {
float: none;
}
.threecol .col3 {
float: right;
}
.threecollabel {
font:'24px';
font-weight: 'bold';
display: block;
}
.threecol .co1Sm {
float: left;
width: 200px;
height: 30px;
}
I can get two columns to show using the same technique with the CSS and JSX but not 3 columns.
Here's the JSX that works for 2 columns:
<div>
<div>
<Label className={styles.questionTitle1}>Details</Label>
</div>
<div className={styles.twocol}>
<div className={styles.col1}>
<div style={{width: '150px'}}>
<Label className={styles.questionTitle}>Record No.</Label>
<TextField
value={this.state.Title}
disabled={true}
/>
</div>
</div>
<div className={styles.twocol}>
<div className={styles.col2}>
<div style={{width: '150px'}}>
<Label className={styles.questionTitle}>Room</Label>
<TextField
value={this.state.Room}
onChange={this._onRoomChange}
/>
<br />
</div>
</div>
</div>
</div>
</div>
I don't want to use tables.
T
#Tom you are closing multiple div tag in your html. And then you are adding float: none to second column style col2. It may the issue.
.threecol .col2 {
float: left;
text-align: center;
}
Ref: https://stackblitz.com/edit/react-3urqg6?file=index.html
.surveyform-class {
background: yellow;
margin: 0 25%;
width: 50%;
border-right: 40px solid yellow;
}
.main-div{
background: lightgrey;
width: 50%;
height:100%;
margin: 0 25%;
border-right: 20px solid yellow;
border-left: 20px solid yellow;
}
form {
/* Center the form on the page */
margin: 0 auto;
width: 400px;
}
form >div {
margin-top: 1em;
}
form >div >div {
padding-left: 95px;
}
label{
width: 90px;
text-align: right;
display: inline-block;
}
<DOCTYPE! html>
<html>
<head>
<title>Survey Form</title>
<link href="surveyform.css" type="text/css" rel="stylesheet">
</head>
<body>
<div style="
text-align: center;">
<h1 class="surveyform-class">Survey Form</h1>
<div class="main-div">
lwt us know how we can improve freecode camp
<form >
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div >
<label>
which option best describes your current role
</label>
<select >
<option>student</option>
<option>engineer</option>
</select>
</div>
<div >
<label>
Things that should be improved in future
</label>
<input type="checkbox" name="a">
<span> Front end projects</span>
<div>
<input type="checkbox" name="a">
<span> Backend Projects</span>
</div>
<div>
<input type="checkbox" name="a">
<span> Structure </span>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
I am trying to align these select element and labels to start at same line.
Can someone help me ?
Here is jsfiddle link : http://jsfiddle.net/v650o2dL/2/
Use the css property vertical-align:top. Be sure to separate the containers of the left and right containers like I did below;
.yellow {
background: yellow;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
}
.yellow>h1 {
text-align: center;
}
.grey {
background: lightgrey;
height: 200px;
}
.row {
width: 100%;
display: block;
margin-bottom: 10px;
}
.left,
.right {
width: 49%;
display: inline-block;
vertical-align: top;
}
.input-group {
display: block;
margin-bottom: 10px;
}
<DOCTYPE! html>
<html>
<head>
<title>Survey Form</title>
<link href="surveyform.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="yellow">
<h1>Survey Form</h1>
<div class="grey">
<center>
Let us know how we can improve freecode camp
</center>
<br>
<form>
<div class="row">
<div class="left">
<label>
Which option best describes your current role
</label>
</div>
<div class="right">
<select>
<option>student</option>
<option>engineer</option>
</select>
</div>
</div>
<div class="row">
<div class="left">
<label>
Things that should be improved in future
</label>
</div>
<div class="right">
<div class="input-group">
<input type="checkbox" name="a">
<span> Front end projects</span>
</div>
<div class="input-group">
<input type="checkbox" name="a">
<span> Backend Projects</span>
</div>
<div class="input-group">
<input type="checkbox" name="a">
<span> Structure </span>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
I have several containers with radio buttons. I want a container of a selected radio button to become selected:
input[type="radio"]:checked+.container {
border: 5px solid red;
}
<div class="container">
<input class="btn-radio" type="radio" value="123" name="rd" />
</div>
<div class="container">
<input class="btn-radio" type="radio" value="1234" name="rd" />
</div>
<div class="container">
<input class="btn-radio" type="radio" value="12345" name="rd" />
</div>
Why doesn't it work?
Here is the working code which I commented above
input[type="radio"]:checked + .border {
border: 5px solid red;
}
.container {
position: relative;
max-width: 100px;
margin: 10px;
}
input {
position: relative;
z-index: 100;
}
.border {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="container">
<input class="btn-radio" type="radio" value="123" name="rd" />Input 1
<div class="border"></div>
</div>
<div class="container">
<input class="btn-radio" type="radio" value="1234" name="rd" />Input 2
<div class="border"></div>
</div>
<div class="container">
<input class="btn-radio" type="radio" value="12345" name="rd" /> Input 3
<div class="border"></div>
</div>
Here is a solution without new elements, you can use the ::before of the input to make the border on the container. Good Luck!
.container {
position: relative;
margin-bottom: 2em;
}
input[type="radio"]:checked::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 5px solid red;
}
<div class="container">
<p>container 123</p>
<input class="btn-radio" type="radio" value="123" name="rd" />
</div>
<div class="container">
<p>container 1234</p>
<input class="btn-radio" type="radio" value="1234" name="rd" />
</div>
<div class="container">
<p>container 12345</p>
<input class="btn-radio" type="radio" value="12345" name="rd" />
</div>
Use id insted of that. Give them individual id.
#id:checked + .container {
border: 5px solid red;;
}
For better result use the id for container as well.
Trying to create a layout that has two columns, and text between those columns
Something like this:
But I am running into spacing issues with twitter bootstrap to make it actually work. On top of making these items the same width with the text between, they should all be vertically aligned.
You can do that using 3 columns
Live Demo jsfiddle
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">.col-sm-6</div>
<div class="col-xs-6">.col-sm-6</div>
</div>
<br/>
<p>Create an account...............................</p>
<div class="row">
<div class="col-xs-6 test" >
<form class="form-horizontal vmid" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password"/>
</div>
</div></form>
</div>
<div class="col-xs-1 test" >
<p class="asd"> ~OR~</p>
</div>
<div class="col-xs-5 test" >
<button type="submit" class="asd btn-primary btn-lg">Facebook</button>
</div>
</div>
</div>
Style
.vmid{
position:relative;
top:50%;
transform:translateY(-50%);
}
.asd{
position:relative;
top:50%;
transform:translateY(-35%);
}
This is not a bootstrap answer just a plain simple CSS one. Although you can adapt it to bootstrap easily because the basic underlying principle is the same. Instead of using width percentages that I have used in my example, bootstrap grid system columns can be used instead. Saying all that, you can achieve your desired effect by dividing the wrapper div into 3 columns and then using the display table for parent and table-cell and vertical align middle for the child to place the respective input elements and button elements in its place as needed.
The fiddle can be found here
The code snippet follows...
.wrapper {
height: 300px;
width: 100%;
background: pink;
}
.leftSide,
.rightSide,
.midPart {
box-sizing: border-box;
height: 100%;
display: table;
}
.leftSide {
width: 45%;
background: lightgray;
float: left;
}
.midPart {
width: 10%;
background: aqua;
}
.midPart p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.leftSide div,
.rightSide div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.rightSide {
width: 45%;
background: lightcyan;
float: right;
}
button {
height: 3em;
width: 100px;
background: blue;
color: white;
}
<div class="wrapper">
<div class="leftSide">
<div>
<input placeholder="Enter Username" />
<br/>
<br/>
<input placeholder="Enter password" />
</div>
</div>
<div class="rightSide">
<div>
<button>Hello</button>
</div>
</div>
<div class="midPart">
<p>-or-</p>
</div>
</div>
Hope this helps. Happy coding :)
Update::
***Another updated Fiddle without colors***
I have a form where I want to put some <div> elements on the same line.
I want to have confirm password in the same line as password.
HTML
<form action="pages/php/signup.php" method="post">
<div>
<div>Name :
<div id="gtext_form">
<input type="text" name="name" />
</div>
</div>
</div>
<div class="line">
<div class="st_column">E-mail :
<div class="text_form">
<input type="text" name="email" />
</div>
</div>
<div class="nd_column">Login :
<div class="text_form">
<input type="text" name="login" />
</div>
</div>
</div>
<div class="line">
<div class="st column">Password :
<div class="text_form">
<input type="password" name="password" />
</div>
</div>
<div class="nd_column">Confirm password :
<div class="text_form">
<input type="password" name="password2" />
</div>
</div>
</div>
<div class="line">
<input type="submit" name="valider" value=" OK " />
</div>
</form>
CSS
#gtext_form input {
width: 640px;
height: 20px;
}
.text_form input {
width: 280px;
}
.st_column {
float: left;
width: 280px;
display: inline;
}
.nd_column {
float: right;
width: 280px;
display: inline;
}
.line {
padding-right:0px;
padding-left:0px;
width: 640px;
height: 60px;
}
JSFiddle
There is en error in your class name:
<div class="st column">Password :<div class="text_form"><input type="password" name="password"/></div></div>
The name should be st_column
Hi you didn't have the class for the password correct int he html. It was missing and underscore. Trying something like this:
JS Fiddle
Change your class for Password in your html to: class="st_column"
CSS
#gtext_form input {
width: 640px;
height: 20px;
}
.text_form input {
width: 280px;
}
.st_column {
float: left;
width: 280px;
display: inline;
}
.nd_column {
float: right;
width: 280px;
display: inline;
}
.line {
padding-right:0px;
padding-left:0px;
width: 640px;
height: 60px;
}
In your second <div class="line">
You have a div that reads:
<div class="st columns">
However this should be:
<div class="st_columns">
JsFiddle
The reason the confirm password wasn't on the same line as the password is because you are missing the _ in the classname: http://jsfiddle.net/7a9dL/2/
Corrected HTML:
<form action="pages/php/signup.php" method="post">
<div><div>Name :<div id="gtext_form"><input type="text" name="name"/></div></div></div>
<div class="line">
<div class="st_column">E-mail :<div class="text_form"><input type="text" name="email"/></div></div>
<div class="nd_column">Login :<div class="text_form"><input type="text" name="login"/></div></div>
</div>
<div class="line">
<div class="st_column">Password :<div class="text_form"><input type="password" name="password"/></div></div>
<div class="nd_column">Confirm password :<div class="text_form"><input type="password" name="password2"/></div></div>
</div>
<div class="line"><input type="submit" name="valider" value=" OK " /></div>
</form>
Try adding this :
.line div {
display: inline-block;
}
Tested with Firefox 27.