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}
Related
I want to make a form for my react project. I have a text and it's corresponding text field against it. I tried using flexbox but I didn't do it right. This is my code
<div className="time-from-container">
<h4 style={styles.fontStyle}>From : </h4>
<TextField
id="time_in"
underlineFocusStyle={{borderColor: '#293C8E'}}
floatingLabelFocusStyle={{color: '#293C8E'}}
style={{width: 120}}
value={this.secondsToHms(this.props.new_marker_reducer.start)}
floatingLabelText="Start Time"
/>
</div>
<div className="time-to-container">
<h4 style={styles.fontStyle} >To :</h4>
<TextField
id="time_out"
underlineFocusStyle={{borderColor: '#293C8E'}}
floatingLabelFocusStyle={{color: '#293C8E'}}
style={{width: 120}}
value={this.secondsToHms(this.props.new_marker_reducer.end)}
floatingLabelText="End Time"
/>
</div>
I want to align then like this
How should I do it?
You can use flexbox and give the h4 a width
* {
margin: 0;
}
div {
display: flex;
margin: 0 0 1em;
align-items: center;
}
h4 {
width: 80px;
}
<div>
<h4>From: </h4>
<input type="text">
</div>
<div>
<h4>To: </h4>
<input type="text">
</div>
Or you can use the table display properties to mimic a table layout
* {
margin: 0;
}
.parent {
display: table;
}
.parent > div {
display: table-row;;
}
h4,input {
display: table-cell;
margin: 0 0 1em;
}
h4 {
padding-right: 1em;
}
<div class="parent">
<div>
<h4>From: </h4>
<input type="text">
</div>
<div>
<h4>To: </h4>
<input type="text">
</div>
</div>
.time-from-container h4, .time-to-container h4 {
display:inline-block;
width:90px;
}
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>
<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/
I'm working on an application which has a side bar and two divs in my main view. I'm trying to split the height of both equally within the container. I tried height = 50% but that didn't work out too well.
<div id="mainView" ng-controller="userCtrl">
<div id="top">
<div id="topRow">
<label for="entityDropDown">Select a user: </label>
<select id="entityDropDown"
ng-model="selectedUser"
ng-options="user as user.name for user in users"
ng-change="getUserInfo(selectedUser)">
</select>
</div>
</br></br>
<div id="entityStatus">
<div>
<label for="entityAvailable">Available Groups</label>
<select id="entityAvailable" multiple
ng-model="selectedAvailableGroups"
ng-options="g.name for g in availableGroups | orderBy:'name'">
</select>
</div>
<div id="moveButtons" >
<button type="button" ng-disabled="!selectedUser || availableGroups.length === 0" ng-click="addUserToGroup()">Add User</button>
<button type="button" ng-disabled="!selectedUser || assignedGroups.length == 0" ng-click="removeUserFromGroup()">Remove</button>
</div>
<div>
<label for="entityAssigned">Assigned Groups</label>
<select id="entityAssigned" multiple
ng-model="selectedAssignedGroups"
ng-options="g.name for g in assignedGroups | orderBy:'name'">
</select>
</div>
</div>
<br class="clearfix"/>
</div>
<div id="middle" ng-show="selectedUser">
<div id="entityInfo">
<div>
<label for="entityName">Name: </label>
<input type="text" id="entityName" ng-model="selectedUser.name"/>
</br>
<label for="entityEmail">Email: </label>
<input type="text" id="entityEmail" ng-model="selectedUser.email"/>
</br>
<button type="button" ng-disabled="!selectedUser" ng-click="updateUserInfo()">Update User</button>
</div>
<div>
<label for="entityId">ID: {{selectedUser.id}} </label>
</br>
<label for="entityDomain">Domain: {{selectedUser.domain}} </label>
</br>
<label for="isAdmin">Admin: {{selectedUser.isAdmin}}</label>
</br>
</div>
</div>
<br class="clearfix"/>
</div>
</div>
I put it in a fiddle: http://jsfiddle.net/crmyq/
you should set the height of the parent container to 100% (its parent container already has a fixed height) and set the height of the child containers to 50%:
#mainView {height:100%}
#top {height:50%; }
#middle {height:50%; }
check this updated fiddle: http://jsfiddle.net/crmyq/1/
I also removed the padding on the child containers, since padding is added to the height which will lead to the child containers sticking out of the parent container. You can use margins (or padding) on the elements inside the child containers to make up for the removed padding.
UPDATE
for switching between 2 or 3 rows, you could use a class on the #mdContainer div (switch to using classes instead of ID's for this, it's easier):
#mdContainer.2columns .top, #mdContainer.2columns .middle {height:50%}
#mdContainer.3columns .top, #mdContainer.3columns .middle,
#mdContainer.3columns .bottom {height:33.33%}
Please give 100% height on your #mainView container and also add 50% height on #top and #middle container.
#mainView{
position: relative;
top: 0;
bottom: 0;
height:100%;/*new changes*/
background: green;
color: black;
margin-left: 140px;
right: 0;
padding-left: 0px;
}
#top{
background: blue;
color:white;
height:50%;/*new changes*/
text-align: center;
}
#middle{
background: red;
color: white;
height:50% ;/*new changes*/
}
fiddle : http://jsfiddle.net/nikhilvkd/crmyq/3/
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;
}