I'm 'having a hard time figuring out which css rule is messing up the file upload form element because it's not quite aligned properly with the other form elements.
http://jsfiddle.net/emRr2/
There are some conflicting styles.
This style is overriding the width and padding on your custom element:
form .section > div {
[...]
padding: 0 10px 0 1%;
width: 75%;
}
Adding a DIV around the custom field will fix the width:
<div class="section _100">
<label for="file">Image</label>
<div> <!-- New DIV -->
<div class="customfile">
<button class="customfile-button" aria-hidden="true">Browse</button>
<span class="customfile-feedback" aria-hidden="true">No file selected...</span>
<input type="file" style="left: -53.4167px; top: 24.1667px; margin: 0px;" name="file" value="" class="required customfile-input">
</div>
</div> <!-- /New DIV -->
</div>
In my opinion, you should also remove the following, which is offsetting the button and increasing the height:
.customfile-button {
margin-top:6px;
}
Related
jQuery Mobile automaticly adds this to an < input >. How can I override it and remove the top margin from the div?
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="myinput">
</div>
And css of the div looks like:
.ui-input-text input, .ui-input-search input, textarea.ui-input-text {
-moz-box-sizing: border-box;
display: block;
line-height: 1.4em;
outline: 0 none;
padding: 0.4em;
width: 100%;
}
DEMO
You may write new CSS for input with parent containers class name so that it will take higher priority
HTML
<div class="wrap">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="myinput" />
</div>
</div>
CSS
.wrap .ui-input-text input{
border:1px solid red; /*desired style*/
margin-top:0;
}
Starting with jqm 1.4 you should use class="ui-field-contain" instead of data-role="fieldcontain" around your <label> and <input> tags. To adjust the vertical spacing of each of the field sets you can override the margins of the <div> tag using a simple additional style property:
<div class="ui-field-contain" style="margin-top:2px;margin-bottom:2px;">
<label for="field1">Field label:</label>
<input type="text" name="field1" data-mini="true" id="field1" />
<div>
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/
My application uses some bars on a timeline. Every line consists of a barkeeper div that holds the bars for this line. The barkeeper also has 2 style properties width and height.
.barkeeper {
margin-bottom: 1px;
position: relative;
}
The bars have some interactive ajax actions that come from Richfaces and CSS hover and jquery javascript. Therefore around each bar there is a form. I've left out the action javascript to simplify this example.
.bar {
position: absolute;
text-align: center;
vertical-align: middle;
z-index: 0;
}
<form id="j_id163:0:j_id165:0:medfrm" onmouseover="" method="post" name="j_id163:0:j_id165:0:medfrm" target="">
<div id="bar1" class="bar antibiotic" onmouseout="" onmouseover="" style="left: 7px; width:1528px;">
<img style="float:right;" src="endarrow.gif">
<div class="cornr_top">
<div></div>
</div>
<div style="text-align: center; direction: ltr;">Bartext </div>
<div class="cornr_bottom">
<div></div>
</div>
<script type="text/javascript">
</div>
<input type="hidden" value="" name="" autocomplete="off">
<input type="hidden" value="" name="autoScroll" autocomplete="off">
<script type="text/javascript">
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="" name="javax.faces.ViewState">
</form>
The bars are absolutaly positioned using a left and width parameter.
The bars have to have rounded corners so I've added these cornr_top and cornr_bottom
.cornr_top div, .cornr_top, .cornr_bottom div, .cornr_bottom {
font-size: 1px;
height: 3px;
width: 100%;
}
.cornr_top {
background: url("../img/tr.gif") no-repeat scroll right top transparent;
}
.cornr_top div {
background: url("../img/tl.gif") no-repeat scroll left top transparent;
}
The cornr_bottom classes are identicaly defined except for the images being used.
The last thing I've added is this line
<img style="float:right;" src="endarrow.gif">
This displays a running an arrow at the end of the bar to indicate that it is still running.
Now every browser displays all of this correctly. The corners are added to the corners and if available the arrow overrides the right side of the bar and overlaps the 2 corners over there.
In IE7 the arrow is displayed on a new line. How can I resolve this issue?
I've found the solution myself.
I've changed the arrow image tag from
<img style="float:right;" src="endarrow.gif">
to
<img style="position:absolute; right:0px;" src="endarrow.gif">
I am using a wrapper but I am pretty confused. I want the two resultbox divs to be in line with the submit div.
Take a look here:
http://jsfiddle.net/QtVwr/
What am I doing wrong?
I'm not very familiar with CSS.
Part of the problem is that there are issues with your HTML. Here's a start:
make sure all the divs are closed.
remove the floats from your css
add display:inline-block;
remove the inline styles from your HTML.
correct the .wrapper class to be .wrapper1 (matching the HTML)
So, this is more what you want, I assume:
.wrapper1 {
height:70px;
width: 800px;
background: #ffffff;
border: 1px solid grey;
color: #BDBDBD;
}
.resultbox {
width: 300px;
background: #ffffff;
color: #BDBDBD;
display: inline-block;
}
.submit {
height:15px;
width: 32px;
margin-top:10px;
background: #ffffff;
border: 1px solid;
color: #BDBDBD;
display: inline-block;
}
and the HTML
<div class="wrapper1">
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="width:35px;" >
<div class="submit"></div>
</div>
</div>
Example: http://jsfiddle.net/QtVwr/2/
You will still need to fiddle with it. But this is a start.
To make div inline you should use the following CSS style:
.mydiv{ display: inline; }
Note: Change width of your wrapper (make it smaller) and you will see the results
There are several issues with the code you have provided.
you have defined css rules for a class wrapper but use class wrapper1 in your html
class wrapper doesn't have enough width for both of the result boxes plus the submit
There are extra quotes on the second result box style="margin-left: 5px; margin-top: 3px;""
form tags are malformed and being intertwined with your div tags
form tags aren't closed
locationresult div tag isn't closed
floats need to be cleared
here is a fiddle
http://jsfiddle.net/e3dg6/
The width of your results boxes combined exceeds the width of your wrapper. You need to either make the wrapper wider or reduce the width on the resultboxes.
Why do you have the submit div within a resultbox div?
Why the margin-left:10px, only with the first div?
I'd do it like this:
<div id="wrapper">
<div class="resultbox"></div>
<div class="resultbox"></div>
<div id="submit"></div>
</div>
And set the width and height of the wrapper, and let the other divs float. It's just a longshot, not exactly sure what you're trying to accomplish. I just think your nesting is not okay.
If anyone can suggest a better place than stackoverflow for css questions please let me know.
I have an outer div with background and border and then I need to have two columns within the colored box. Some reason when I place the floating divs inside the outer div, the outer div does not grow.
Here is my HTML:
<div class="tip_box">
<h3>Send</h3>
<hr />
<form id="email_form">
<div class="three-columns">
<div class="contact_form_input">
<h6>Your Name</h6>
<input type="text" name="name_text_box" class="form_input" id="name_text_box" />
</div>
<div class="contact_form_input">
<h6>Your Email</h6>
<input type="text" name="email_text_box" class="form_input" id="email_text_box" />
</div>
</div>
<div class="three-columns">
<div class="contact_form_input">
<h6>Recipient Name</h6>
<input type="text" name="name_text_box" class="form_input" id="Text1" />
</div>
<div class="contact_form_input">
<h6>Recipient Email</h6>
<input type="text" name="email_text_box" class="form_input" id="Text2" />
</div>
</div>
</form>
</div>
<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>
Here is my CSS:
.three-columns {
width: 290px;
float: left;
margin-right: 45px;
}
.tip_box {
padding: 20px;
margin: 20px 0px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 10px;
border-radius: 7px;
padding-left: 55px;
background: #eee;
font-style:italic;
background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px;
border: 1px solid #b7db58;
color: #5d791b;
}
Screenshot:
http://dl.dropbox.com/u/2127038/cssissue.png
Non-float blocks containing float blocks will not automatically expand, since float blocks are taken outside the normal flow (or at least specially outside the flow). One way to correct that is to specify the overflow property to hidden or auto.
.tip-box { overflow: auto; }
See quirksmode for more.
Add following HTML after <div class="tip_box"></div>:
<div class="clear"></div>
Here is the CSS:
.clear{
clear:both;
}
It will surely work.
.tip_box { overflow:hidden; zoom:1; }
this establishes new block formatting context in ie7+ and other browsers, triggers haslayout in ie6 to contain floats
You're going to need what is commonly known as a clearfix. In this case a overflow: hidden on the containing element will do - see: http://www.jsfiddle.net/yijiang/zuNwH/2
.tip_box {
overflow: hidden;
}
As an aside, you might also want to use label elements instead of h6 to markup labels for your form elements, and use a list instead of individual divs for containing each label - input pair, and reduce the amount of class attribute you use by relying on more complex selectors for your CSS file.
<li>
<label for="recipient_email">Recipient Email</label>
<input type="text" name="email_text_box" id="recipient_email" />
</li>
In this case I wouldn't float the divs left, I would make them display: inline or inline-block.
Your 3 columns will turn into 2 columns, then 1 column if the browser window shrinks.