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>
Related
It's been 3-4 hours I am trying to arrange Select Component and its heading horizontally but somehow could not get that working. To elaborate I used following code to achieve this functionality :
.horizontal {
float: left;
border: 1px solid green
}
.horizontal * {
display: inline-block;
margin-left: 10px;
}
<div className="horizontal">
<h3 className="section-heading">{this.props.label}</h3>
<Select id="state-select" ref="stateSelect" autoFocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} rtl={this.state.rtl} searchable={this.state.searchable}
/>
</div>
Try to see if this works.
<div style={{display: "flex"}}>
<h3 className="section-heading">{this.props.label}</h3>
<div style={{width: "55%"}}>
<Select
id="state-select"
ref="stateSelect"
autoFocus
options={options}
simpleValue
clearable={this.state.clearable}
name="selected-state"
disabled={this.state.disabled}
value={this.state.selectValue}
onChange={this.updateValue}
rtl={this.state.rtl}
searchable={this.state.searchable}
/>
</div>
</div>
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;
}
<div style="width: 50%; float:right">
<div id="formDiv">
<div class="control-group requiredStar">
<label class="control-label" for="CustNo">Customer No</label>
<div class="controls" >
<div id="replaceCustomerListDiv">
<s:select data-rel="chosen" id="CustNo" name="CustNo" list="customerlist" listKey="id" listValue="name" headerKey="0" headerValue="--SELECT--" `enter code here`onchange="getContracDetails(this.value)" cssClass="required"/>
</div>
</div>
</div>
</div>
this is my code for which i have to add a required field(*) above the "Customer no" drop down,the 'requiredstar' is css entity that i have added with the control group in order to display the asterix,but the asterix is placing downwards(start end),the below shown is my css class,any solution to solve this?
.control-group.requiredStar .controls:after {
content:"*";
color:red;
font-family: 'Glyphicons Halflings';
/* font-weight: bold;*/
/* font-size: medium;*/
font-size: 16px;
position: relative;
vertical-align: top;
}
You could set the requiredStar class on the label rather than the control group like this:
HTML
<label class="control-label requiredStar" for="CustNo">Customer No</label>
CSS
.control-label.requiredStar:after {
content:"*";
color:red;
}
Here's a new fiddle with it working: http://jsfiddle.net/8vpdd7r5/
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;
}
I am trying to position a link button below select box, but without success so far. All the time the link button is going right from the select box.
Below you can see the
<div class="field">
<select id="#("Select" +item.Name)" name="#("Select" +item.Name)"></select>
</div>
<div class="removed">
Remove
</div>
And in the css I have only:
.field {
margin: 0.5em 0 0 0;
}
How do you think I should approach this so the button will be below the select box.
Thanks in advance, LAziale
UPDATE: screenshot attached
Html:
<div id="accordion">
#foreach (var item in Model.Parameters)
{
<h3>#Html.LabelFor(m => item.Name, item.Prompt)</h3>
<div>
<div class="label">
Search #*Html.TextBox("Search")*#
<input id="#("Search" + item.Name)" type="text" name="q" data-autocomplete="#Url.Action("QuickSearch/" + item.Name, "Report")" />
</div>
<div class="field">
<select multiple id="#("Select" +item.Name)" name="#("Select" +item.Name)"></select>
</div>
<div class="removed">
Remove selection
</div>
</div>
}
</div>
CSS:
.display-label,
.label {
margin: 1em 0 0 0;
}
.display-field,
.field {
margin: 0.5em 0 0 0;
}
.text-box {
width: 30em;
}
.text-box.multi-line {
height: 6.5em;
}
.tri-state {
width: 6em;
}
Have you checked your code the link is coming down below the select box.
As you could see it here : http://jsfiddle.net/ninadajnikar/ZtNcx/
Or are you trying to do anything different here?
Have you tried using the clearfix? if no then try this
<div id="accordion">
#foreach (var item in Model.Parameters)
{
<h3>#Html.LabelFor(m => item.Name, item.Prompt)</h3>
<div>
<div class="label">
Search #*Html.TextBox("Search")*#
<input id="#("Search" + item.Name)" type="text" name="q" data-autocomplete="#Url.Action("QuickSearch/" + item.Name, "Report")" />
</div>
<div class="field">
<select multiple id="#("Select" +item.Name)" name="#("Select" +item.Name)"></select>
</div>
<div class="CL"></div> //Here is the change
<div class="removed">
Remove selection
</div>
</div>
}
</div>
CSS:
.CL{ clear:both}