I have this form, that I can't edit:
<body>
<form action="" method="post" class="adverts-form adverts-form-aligned">
<fieldset>
<div class="adverts-control-group adverts-field-text adverts-field-name-adverts_eventLength ">
<label for="adverts_eventLength">Durata evenimentului</label>
<span class="ui-spinner ui-corner-all ui-widget ui-widget-content">
<input name="adverts_eventLength" id="adverts_eventLength" aria-valuemin="1" aria-valuemax="999" autocomplete="off" class="ui-spinner-input" role="spinbutton" type="text">
</span>
</div>
<div class="adverts-control-group adverts-field-select adverts-field-name-adverts_eventUnits ">
<label for="adverts_eventUnits"> </label>
<select id="adverts_eventUnits" name="adverts_eventUnits" style="">
<option value="zile">zile</option>
<option value="săptămâni">săptămâni</option>
<option value="luni">luni</option>
<option value="ani">ani</option>
</select>
</div>
</fieldset>
</form>
</body>
I want to align inline horizontally the two form DIVs, but keeping the position and the width of the first DIV label unchanged. Is there a way to do this with CSS?
This is the working (solved) solution: https://jsfiddle.net/iuriemalai/cp7kvLrw/32/
You can just float it.
.adverts-form-aligned .adverts-control-group > label {
float:left;
width: 30%;
}
.adverts-form input[type="text"] {
width: 60%;
float:left;
}
Make it like
.adverts-form-aligned .adverts-control-group > label {
display: inline-block;
width: 30%;
}
.adverts-control-group {
float: left;
}
.adverts-form input[type="text"] {
width: 60%;
}
This is the CSS code that helped to solve my problem:
body .adverts-form.adverts-form-aligned .adverts-field-name-adverts_eventLength {
overflow: initial;
}
.adverts-form.adverts-form-aligned .adverts-control-group.adverts-field-text.adverts-field-name-adverts_eventLength label,
.adverts-form.adverts-form-aligned .adverts-field-name-adverts_eventLength .ui-widget.ui-widget-content {
float: left;
}
body .adverts-form.adverts-form-aligned .adverts-field-name-adverts_eventUnits {
clear: initial;
}
body .adverts-form .adverts-field-name-adverts_eventUnits > label {
display: none;
}
body .adverts-form .adverts-field-name-adverts_eventUnits > #adverts_eventUnits {
width: 112px;
}
Related
So I have a data-list field below where I want to also change the label colour when the field is focused. What I've done below is I can't highlight the label when field is focused; it's the field only that is highlighted.
I have the css below:
<style lang="scss">
.panel-con {
color:rgba(0,0,0,0.54);
}
.group-list{
input:focus {
border-color: #dbb100;
}
}
</style>
How can I make the labels' color the same as the fields color when the field is focused?
If your label is before your input/select in the DOM, you can't do it with just CSS alone. You'd need JS.
If your label is after your input/select in the DOM, you could do something like this. (I've created something similar to what you have shown)
.wrapper {
position: relative;
padding-top: 30px;
}
.wrapper select {
display: block;
}
.wrapper select:focus {
color: red;
}
.wrapper select:focus + label {
color: red;
}
.wrapper label {
display: block;
position: absolute;
top: 0;
left: 0;
}
<div class="wrapper">
<select name="example">
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
<label for="example">Test Label</label>
</div>
you need
:focus-within
.wrapper:focus-within p {
color: red;
}
<div class='wrapper'>
<input class='input' type='text'/>
<p>your text</p>
</div>
HTML:
<div class="col5">
DOMINICAN<br><br>
<div class="img"><img src="images/prod01.jpg" alt=""></div>
<div class="selectransfer">
<span class="opensans size13"><b>Type of Transfer</b></span>
<select class="form-control mySelectBoxClass">
<option>Round Trip</option>
<option>One Way Arrival</option>
<option selected>One Way Departure</option>
</select>
</div>
</div>
What I want is to align the "selected" option (Round Trip) to the left, I want to be able to control this attribute (selected).
Any suggestions?
I didn't understand exactly what you want to change (once the options are left-aligned), but you can control this element in this way:
option[selected] {
color: blue;
}
And if you want to control the current selected option, you can use this:
option:checked {
color: red;
}
JSFiddle: http://jsfiddle.net/9njpjdy0/1/
More info:
http://www.w3schools.com/css/css_attribute_selectors.asp
http://www.w3schools.com/cssref/sel_checked.asp
Give it a try and let me know if it helps!
<!-- language: lang-css -->
#selectransfer {
text-align: left;
vertical-align: center;
}
.opensans_size13 {
text-align: left;
vertical-align: top;
position: absolute;
}
.form_control_mySelectBoxClass {
margin-top: 45px;
position:relative;
}
option[selected] {
color: red;
}
<!-- language: lang-html -->
<div class="col5">
DOMINICAN<br><br>
<div class="img"><img src="images/prod01.jpg" alt=""></div>
<div class="selectransfer">
<span class="opensans_size13"><b>Type of Transfer</b></span>
<select class="form_control_mySelectBoxClass">
<option>Round Trip</option>
<option>One Way Arrival</option>
<option selected>One Way Departure</option>
</select>
</div>
</div>
Few hour ago I have asked question that for to align 2 text boxes in line.
But now problem is text boxes are aligned and I have put select list in side of each text box.
but problem is that when I change the label or text before text box all formation disturbed and it's not aligning in same format.
I want that whatever the text I write before text box, the position of text box should not change. (ONE TEXT BOX SHOULD BE AT SAME POSITION UNDER ANOTHER ONE)
fiddle demo
code :
.divkl {
display: inline;
margin: 20px;
}
.blockl{
width: 100%;
display: block;
padding:3px;
}
.txt_prd_add
{
width:100px;
border-radius:0px !important;
margin-left:10px;
margin-top:4px;
}
.select_prd
{
width:85px;
margin-top:4px;
}
Wrap all of the labels in <label></label> and then apply a fixed width and display: inline-block to the label via CSS. If you want to prevent the elements from wrapping when the browser is resized add white-space: nowrap; to .block1 and .divk1
HTML
<div class="blockl">
<div class="divkl">
<label>Material</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
<div class="divkl">
<label>Color</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
</div>
<div class="blockl">
<div class="divkl">
<label>Size</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
<div class="divkl">
<label>Type</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
</div>
CSS
label{
width: 50px;
display: inline-block;
}
.divkl {
display: inline;
margin: 20px;
white-space: nowrap; /* Prevents wrapping */
}
.blockl{
width: 100%;
display: block;
padding:3px;
white-space: nowrap; /* Prevents wrapping */
}
JS Fiddle: http://jsfiddle.net/u7aTD/7/
DEMO
<label class="title">Material</label>
.title {
display: inline-block;
width: 80px;
}
Demo: http://jsfiddle.net/abhitalks/u7aTD/6/
You would better wrap your text in labels, e.g.:
<div class="divkl">
<label>Material</label>
<input type="text" class="txt_prd_add">
...
And, then apply css to the labels, e.g.:
label { display: inline-block; width: 10%; }
.txt_prd_add { width:10%; ...
.select_prd { width:10%; ...
The problem you are having is with the widths. It would be better if you first apply widths in percentages to check it out, and then tweak it according to your design.
You can use tables insted of divs , as to get proper aling.`
Material
GB
MB
GHz
Color
GB
MB
GHz
<tr class="divkl"><td>Size</td>
<td>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</td>
</tr>
<tr class="divkl">
<td>Type</td>
<td>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</td>
</tr>
</table>
</div>`
Hi Guys I am using a table: cell-spacing layout for my website and I need some help. I have a two column website, one being the sidebar and the other containing the content. However, if I add any margins within one of the table-cell divs it moves the side bar spacing with it. I need the spacing on these two cells to be different, and I am not sure how to do so.
My code is as follows:
The CSS:
content {
width : 100%;
display : table;
margin : 0 auto;
height : 100%;
}
#side_bar, #main {
display : table-cell;
}
#side_bar {
border: 1px solid #111;
width: 13%;
background: linear-gradient(#444, #111);
}
#main {
width: 65%;
}
#contact_box {
margin-left: 30%;
margin-top: 7%;
background-color: #111;
opacity: 0.3;
width: 500px;
height: 500px;
}
The HTML:
<div id="content">
<div id="main">
<div id="contact_box">
<form method="post" id="contact_form" action="contact.php">
<p>Full Name:</p> <input type="text" size="40" id="fullname" name="fullname"><br/>
<p>Email Address:</p> <input type="text" size="40" id="email" name="email"><br/>
<p>Type of Inquiry:</p> <input type="text" size="40" id="question" name="question"><br/>
<p>Message:</p> <textarea rows="20" cols="45"></textarea><br/>
<input type="submit" style="float:right; text-transform: uppercase;" value="Send">
</form>
</div>
</div>
<div id="side_bar">
<div id="divider"><h1>News Blurb</h1></div>
<div id="news"><?php //print_news(); ?></div>
<div id="divider"><h1>Featured Games</h1></div>
<div id="featured"><?php //echo $games ?></div>
</div>
</div>
Thank you for any and all help.
Try:
#side_bar {
vertical-align:top;
}
In the example below:
I want the textbox to fill all available space. The problem is the dropdown width cannot be fixed, since its elements are not static. I would like to solve this with just css (no javascript if possible).
I have tried the solutions proposed to similar questions without any luck :(
Here is the fiddle: http://jsfiddle.net/ruben_diaz/cAHb8/
Here is the html:
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">General</option>
<option value="2">Fruits</option>
<option value="3">Ice Creams</option>
<option value="4">Candy</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
And here the css:
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-block;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
Updated demo (tested fine in IE7/8/9/10, Firefox, Chrome, Safari)
Float the left and right elements.
In the HTML source code, put both of the floated elements first (this is the most important part).
Give the middle element overflow: hidden; and an implict width of 100%.
Give the text box in the middle element a width of 100%.
.category_dropdown_container {
float: left;
}
input[type="submit"] {
float: right;
...
}
.resizable_text_box {
padding: 0 15px 0 10px;
overflow: hidden;
}
.resizable_text_box input {
width: 100%;
}
<div class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
...
</select>
</div>
<input name="commit" type="submit" value="Ask!" />
<div class="resizable_text_box">
<input id="question_text_box" name="question[what]"
placeholder="Write a query..." type="text" />
</div>
The relatively recent 'flex' display css property solves this problem for you:
All you need to do is change form's display to inline-flex, give .resizable_text_box flex-grow: 100; and give #question_text_box width: 100%
Full example from the OP:
<style>
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-flex;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
flex-grow: 100;
}
#question_text_box {
width: 100%
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
</style>
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">Options</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
Flex-box lets you do what you wanted to do with css for 15 years - its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change some of those <span> elements to <div> elements; then float:left the division around your dropdown; then give the one of the right an overflow:hidden and the input element inside it a width:100%;.
Here's an example. Here it is again with a bigger drop down.
Except that screws up the submit button. So give the #form_wrapper non-static positioning (position:relative) and position the submit button absolutely. See this fiddle and this one.