I have a checkbox within a container and need to center it within the main container.
Right now its being displayed on the left hand side.
html
<div class="maincontainer">
<div class="inner container">
<input id="id" type="checkbox" name="name1" value="name1">
</input>
</div>
</div>
css code
.maincontainer{
height:100px;
width:90px;
background-color:black;
}
this looks to be what you want: http://jsfiddle.net/pHUcC/
<div class="maincontainer">
<div class="inner container">
<input id="id" type="checkbox" name="name1" value="name1">
</input>
</div>
</div>
.maincontainer{
height:100px;
width:90px;
background-color:black;
text-align:center;
color:white;
}
I think this is what your looking for Fiddle
.maincontainer{
height:100px;
width:90px;
background-color:black;
text-align:center;
color:white;
line-height: 100px;
}
Related
I have multiple checkboxes and everyone is displayed on a row. I want to have 3 or 4 checkboxes on a row, but I can't do it.
Angular:
<div class="form">
<mat-label>Choose skills:</mat-label>
<div class="container">
<div *ngFor="let skill of listOfSkills; index as i" id="skills">
<input type="checkbox" (change)="getSkill($event,i)">{{skill}}
</div>
</div>
</div>
CSS:
.container input[type=checkbox]{
display:inline-block;
width: 200px;
text-align: center;
}
Base on your question, maybe I can understand as you try to align all checkbox inside a container div ? Not sure is this what you looking for ?
div{
display:flex;
align-items:center;
}
input{
margin-right:10px;
}
input:last-child{
margin-right:0px;
}
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
Your css sets the display property to inline-block on the input tag, but the surrounding div tag is still a block element and therefore will always wrap.
Your css should look like this:
css:
.container .checkbox {
display:inline-block;
width: 200px;
text-align: center;
}
html:
<div class="form">
<mat-label>Choose skills:</mat-label>
<div class="container">
<div *ngFor="let skill of listOfSkills; index as i" class="checkbox">
<input type="checkbox" (change)="getSkill($event,i)">{{skill}}
</div>
</div>
</div>
I have two smaller divs within a larger div: one is on the left side and one is on the right. However, the two divs are not vertically aligned as seen in the link below.
divs as seen on webpage
I've seen many solutions saying to use display:inline-block and vertical-align:top but nothing seems to work for me.
HTML and CSS code:
.first-two {
display:inline-block;
width:100%;
}
.curr-val {
float:right;
width:50%;
}
.neigh {
float:left;
width:50%;
}
<div class="first-two">
<div class="neigh">
<h4><b>Select your neighbourhood</b></h4>
<div class="custom-select">
<select id="location" class="dropdown">
...
</select>
</div>
</div>
<br />
<div class="curr-val">
<h4><b>What's the current value of your house?</b></h4>
<h4 id="current_value_text" style="color:#333">$200,000</h4>
<div class="slider-box">
<input type="range" id="value_slider" min="200000" max="1000000" value="200000" step="50000" onchange="update_slider_current(this.value)">
</div>
<br />
</div>
</div>
Delete the br between the two divs:
.first-two {
display:inline-block;
width:100%;
}
.curr-val {
float:right;
width:50%;
}
.neigh {
float:left;
width:50%;
}
<div class="first-two">
<div class="neigh">
<h4><b>Select your neighbourhood</b></h4>
<div class="custom-select">
<select id="location" class="dropdown">
...
</select>
</div>
</div>
<div class="curr-val">
<h4><b>What's the current value of your house?</b></h4>
<h4 id="current_value_text" style="color:#333">$200,000</h4>
<div class="slider-box">
<input type="range" id="value_slider" min="200000" max="1000000" value="200000" step="50000" onchange="update_slider_current(this.value)">
</div>
<br />
</div>
</div>
I am trying to add a vertical line between the orange icons and text fields and then also fix placement of the "OR" text and align the icons properly, as shown in the image below. What updates can I make to my code to do that?
What I would like
What I have right now
<html>
<head>
<style type="text/css">
body{
width:1000px;
font-family:verdana;
}
input{
position:relative;
left:143px;
width:70%;
height:50px;
padding:10px;
}
textarea{
position:relative;
left:68px;
width:70%;
height:150px;
}
.label{
display:inline;
width:140px;
}
.icon{
float:left;
}
.divitem{
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-top:1px solid #7C94A0;;
border-bottom:1px solid #7C94A0;;
}
.field{
background-color:#C6DEFF;
border:1px solid #7C94A0;
}
#sub{
width:80px;
height:40px;
left:0px;
border:1px solid #7C94A0;
border-radius:5px;
}
#mail{
left:149px;
}
#phone{
left:139px;
}
#name{
width:1024px;
height:100px;
}
#cntct{
width:1024px;
}
#desc{
width:1024px;
border-style:none;
}
#dlabel{
vertical-align:top;
}
</style>
<title>E-mail US</title>
</head>
<body>
<h1>E-mail Us</h1>
<form action="confirmed.php" method="get">
<div class="divitem" id="name">
<h2 class="label">Name</h2>
<input class="field" type="text"/>
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
</div>
<div class="divitem" id="desc">
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
<h2 id="dlabel" class="label">Description</h2>
<textarea class="field"></textarea>
</div>
<div class="divitem" id="cntct">
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
<h2 class="label">Email</h2>
<input id="mail" class="field" type="text"/>
<br/><span id="or">Or</span><br/>
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
<h2 class="label">Phone</h2>
<input id="phone" class="field" type="text"/>
<br/>
<br/>
<input id="sub" type="submit" value="SUBMIT">
</div>
</form>
</body>
</html>
<form action="confirmed.php" method="get">
<div class="divitem" id="name">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2>Name</h2>
</div>
<div class="field">
<input type="text" />
</div>
</div>
<div class="divitem" id="desc">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2 id="dlabel">Description</h2>
</div>
<div class="field">
<textarea class="field"></textarea>
</div>
</div>
<div class="divitemcntct" id="cntct">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2>Email</h2>
</div>
<div class="field">
<input id="mail" type="text" />
</div>
</div><span id="or">Or</span>
<div class="divitemPhone" id="Phone">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2>Phone</h2>
</div>
<div class="field">
<input id="phone" type="text" />
</div>
</div>
<div class="divitem" id="desc">
<br/>
<br/>
<input id="sub" type="submit" value="SUBMIT" />
</div>
</form>
CSS
.divitem {
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-top:1px solid #7C94A0;
border-bottom:1px solid #7C94A0;
width:1000px;
height:100px;
}
.label {
display:inline;
width:200px;
float:left;
height:100px;
text-align:center;
}
.icon {
margin:0px;
margin-left:-5px;
padding:0px;
float:left;
border-right:1px solid black;
height:100px;
}
input, textarea {
position:relative;
left:143px;
width:60%;
height:50px;
padding:10px;
background-color:#C6DEFF;
border:1px solid #7C94A0;
}
#or {
text-align:center;
width:1000px;
display:block;
font-weight:bold;
background-color:#BFD6F6;
}
#sub {
width:80px;
height:40px;
left:0px;
border:1px solid #7C94A0;
border-radius:5px;
background-color:#E6E6E6;
font-weight:bold;
}
.divitemcntct
{
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-top:1px solid #7C94A0;
width:1000px;
height:100px;
}
.divitemPhone
{
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-bottom:1px solid #7C94A0;
width:1000px;
height:100px;
}
Fiddle
I would like to display, label and inputs on same line :
I tried in CSS:
form label {
display:block;
float:left;
}
http://jsfiddle.net/kY5LL/18/
here it is
.span6{
overflow:hidden;
display:inline;
}
.span6 label, .span6 input {
display:inline-block;
}
.span6 input {
width:70%;
margin-left:3%;
}
UPDATED FIDDLE
If you are using Bootstrap 3.x:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-sm-2 control-label">Label</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputCity" placeholder="Input text">
</div>
</div>
</form>
Fiddle
I did this in my script. I created a div container box and inside the container, a label left to an input element.
.
HTML
<div class="container">
<label>Firstname</label>
<input type="text">
</div>
CSS
div.container{
overflow:hidden;
}
label{
width:70px;
display:block;
float:left;
text-align:left;
}
input{
width:240px;
float:left;
}
remove the class input-block-level given to input tag
I'm trying to get two divs to stick together at the bottom of the page using position:fixed. The problem is when I put padding on the #feedbackTab, it repeats the #feedbackTab from the bottom of the page to the place where I want it. How can I have #feedbackTab on top of #feedbackBody with both of them fixed to the bottom of the page?
#feedbackTab {
background-image:url(../img/feedback_12.png);
position:fixed;
bottom:0px;
padding-bottom:300px;
margin:0;
width:960px;
height:34px;
}
#feedbackBody {
background-image:url(../img/Feedback_bkg_14.png);
position:fixed;
bottom:0px;
width:960px;
height:292px;
margin:0;
}
<div id="feedback">
<div id="feedbackTab"></div>
<div id="feedbackBody">
<div id="comments">
<h2>Comments/Suggestions</h2>
<input class="commentsTxt" type="text" name="Comments"><br \>
<input id="commentsSubmit" type="submit" value="Submit">
</div><!-- end comments -->
<div id="problems">
<h2>Problems?</h2><br \>
<label id="email">Email:</label><input class="emailBox" type="text" name="Email"><br \>
<label id="problem">Problem: </label><input class="problemBox" type="text" name="Comments"><br \>
<input id="problemsSubmit" type="submit" value="Submit">
</div><!-- end problems -->
</div><!-- end feedbackBody -->
</div><!-- end feedback -->
I would put them in a container div to hold everything together like so:
CSS:
#tabContainer{
width:700px;
}
.tab{
width:100px;
text-align:center;
float:left;
margin-right:2px;
}
#feedbackTab{
background-color:red;
}
#tab2{
background-color:green;
}
#tab3{
background-color:yellow;
}
#feedbackBody{
clear:both;
width:100%;
height:500px;
background-color:blue;
}
HTML:
<div id="tabContainer">
<div id="feedbackTab" class="tab">FeedBack</div>
<div id="tab2" class="tab">Tab2</div>
<div id="tab3" class="tab">Tab3</div>
<div id="feedbackBody">
This is the feedback body
<br/>lorem ipsum
<br/>
<input type="button" value="button">
</div>
</div>
</body>
Unfortunately JSFiddle seems to be down right now so I can't mock it up or test it for you. I hope this helps though!
EDIT: I found a replacement test bed: http://cssdesk.com/y7Hb2