I am writing a web application (While learning JSF from scratch, and thanks to this site I was able to do this).
I have managed to get pretty far but there is something I can't figure how to approach to.
Currently I have this:
Link to full size screenshot
As you can see, I don't know how to place things where I want them.
At this point just stacking the buttons (sleep timer and message text) and the input-spinner at the top of each panel would suffice, but I would like to learn how to control this better. (Place each component at a chosen location inside the panel)
The JSP code:
<h:panelGrid id="ActionsPanel" styleClass="leftcol"
binding="#{actions.actionPanel}">
</h:panelGrid>
<h:panelGrid id="EditPanel" styleClass="rightcol"
binding="#{actions.editorPanel}">
</h:panelGrid>
And the CSS:
.leftcol {
display: block; width : 20%;
height: 300px;
float: left;
border: 1px solid #000;
width: 20%; height : 300px; float : left; border : 1px solid #000;
border-top: 0;
}
.rightcol {
width: 70%;
height: 300px;
float: left;
border: 1px solid #000;
border-top: 0;
border-left: 0;
}
Thanks!
Ben.
When writing CSS, don't look at JSF source code, but at its generated HTML output. The h:panelGrid renders a HTML table. You need to vertical-align the contents of the table cells td to top.
.leftcol td {
vertical-align: top;
}
.rightcol td {
vertical-align: top;
}
Related
I have simple css and html code and i wondering why last vertical image not working. I mean it border and margin should be added to last element not first.
Is anyone knows why this not work?
See in https://jsfiddle.net/st2Lwrgj/
* {margin: 0; padding: 0;}
.wrap {width: 250px; border: 1px solid red;overflow:hidden;}
img {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
img.vertical {
width: 45%;
float: left;
margin-right: 10px;
}
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
:nth-child(even) will apply to every second image (second, fourth and so on). When you insert a horizontal image without the .vertical class you will break this order.
The following is a bit of a workaround, but the logic is pretty simple.
First we select every second image using img.vertical:nth-child(even)
We then find images without the .vertical class using:not(.vertical)
We then use the general sibling selector to select the following images and revert the order using img.vertical:nth-child(odd) instead of even.
As we have now applied borders to both odd and even ocurances of img.vertical, we need to remove the styling from the images we selected at point 1. We do this with a selector as set in point 3, but with even instead of odd: img:not(.vertical) ~ img.vertical:nth-child(even)
TLDR; change this part:
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
Into the following:
img.vertical:nth-child(even),
img:not(.vertical) ~ img.vertical:nth-child(odd) {
margin-right: 0px;
border: 2px solid blue;
}
img:not(.vertical) ~ img.vertical:nth-child(even) {
margin-right: 10px;
border: 0;
}
You can see how this works in this fiddle.
I have an element which will contain an unspecified number of inline-block elements which may wrap if there are enough elements.
I want the last element to fill the remaining space on the line. How can this be accomplished?
Example HTML
<div class="tags">
<span class="tags__item">First Tag</span>
<span class="tags__item">Another One</span>
<span class="tags__item">Long Tag Name Here</span>
<span class="tags__item">Last tag should fill</span>
</div>
Example CSS
.tags { border: solid 1px #000; padding: 0; }
.tags__item {
display: inline-block;
margin: 2px;
padding: 1px 5px;
background: #eee;
border: solid 1px #eee;
}
.tags__item:last-child {
background: #fff;
border: dashed 1px #eee;
}
Attempt #1 (doesn't work)
One answer (which was deleted) mentioned trying table-cell layout like this..
.tags {
border: solid 1px #000;
display: table-row;
white-space: nowrap;
}
.tags__item {
display:table-cell;
width:auto;
margin: 2px;
padding: 1px 5px;
background: #eee;
}
.tags__item:last-child {
background: #fff;
border: dashed 1px #ccc;
width:99%
}
This solution works reasonably well for a single line. However, it doesn't allow wrapping. http://cdpn.io/omFuy
Attempt #2 (doesn't work)
Someone else linked to another SO answer as a possible solution.
.tags {
border: solid 1px #000;
}
.tags__item {
display: block;
float: left;
margin: 2px;
padding: 1px 5px;
background: #eee;
}
.tags__item:last-child {
float: none;
display: block;
border: dashed 1px #ccc;
background: #fff;
}
.tags__item:last-child::after {
clear:both;
}
But it doesn't work. See my implementation.
For browsers that support it, the natural solution is to use the flexible layout module, aka flexbox—this is exactly the sort of scenario it is intended for. Here are the bare essentials:
Demo on Dabblet
.tags {
display: flex;
flex-wrap: wrap;
}
.tags__item:last-child {
flex: auto;
}
The (not insignificant) downside to this approach is the lack of browser support and the attendant mess of prefixes and fallbacks if you need to support older browsers. As suggested by Rafael in the comments, this CSS Tricks article outlines the required prefixes and the legacy syntax.
Definitely not the best solution ... but I just did not resisted to try a javascript solution.
http://codepen.io/rafaelcastrocouto/pen/morlb
Still need to check for "line-breaks", but it can be useful since jQuery probably turns this cross browser.
I am trying to style my css dropdown box using only css...
First of all my dropdown have the custom html arrow down, i am trying to put an image on my css to take this default arrow down so i can put my own image to it but i have no idea how to do it...
This is my css for the dropdown box:
select {
height:32px;
line-height:42px;
width: 88%;
}
How can i put my own image to this code? I also tried following tutorial but its no use for me i can't make it work right...
http://bavotasan.com/2011/style-select-box-using-only-css/
The tutorial works for me very well.
I created a fiddle for you to understand, but you have to understand what the author want to say.
HTML code
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
CSS code
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url('http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg') no-repeat right #ddd;
border: 1px solid #ccc;
}
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
http://jsfiddle.net/zNCBY/
Hi I am trying to make my DropDownList like this in my ASP.NET web application.
I cant't use the select tag because I am already bounded some data to the DropDownList.
Basically I am trying to remove the default arrow button from the DropDownList and add this image as background. There is any way to do this using CSS.
This is the css I have used
.drop-down-style
{
width:150px;
height:20px;
border:solid 2px #a3a4a6;
background-image:url('../Images/DropDownImage.gif');
}
Something like this?
CSS:
.styled-select {
width: 308px;
height: 23px;
overflow: hidden;
background:url(arrow_xs.png) no-repeat 225px #FFF;
border: 1px solid #ccc;
}
.styled-select select {
background: transparent;
width: 309px;
padding-right: 4px;
padding-bottom:7px;
padding-left: 4px;
padding-top: 0px;
font-size: 12px;
line-height: 1;
border: none;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
HTML
<div class="styled-select">
<select>
<option>First option</option>
<option>Second option</option>
</select>
</div>
edit: You can add an arrow with positioning (div).
edit I put this in a jsfiddle for you: http://jsfiddle.net/X4J3L/1/
rather then use some third party plugins or jquery scripts , you should use ajax toolkit's combo box. see an example here
Combo box example
I am struggling through the documentation on jquery ui (specifically tabs:
I've digested the js functions...but I am struggling with the css. For example, I cannot figure how to change the border color (it is like my customizations are not even being read)...
Here is my code so far...
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
ui.tabs-container {position: relative; background: #0000cd; }
ui.tabs {
float: left;
background: white;
height:400px;
line-height: 30 px;
padding: 0 16px;
width:409px;
scrollbar:false;
cursor: pointer;
}
ui.tabs:hover{ background: #f4f4f4; }
ui.contents {
float: left;
position: absolute;
left: 5%;
height: 300px;
margin-top: 31 px;
padding: 0 px;
border: 1 px solid #ccc;
font-weight: normal;
display: none;
}
When it comes to jQuery UI there's usually a lot of classes involved with different levels of cascading, so I recommend you use Chrome's developer tools or Firefox's Firebug to figure out what you need to target with your css.
For example, with this:
.ui-state-default.ui-corner-top.ui-tabs-active {
background: red;
}
You can change the color of the active tab...
Demo: http://jsbin.com/umixan/1/edit
Probably you are looking for two classes. ui-state-default and ui-state-active. So, just add the styling you need for each state. Example:
.ui-state-default {border:1px solid #000;}
.ui-state-active {border:1px solid #fff;}
Note, that your css (above code) must be after jQuery's jquery-ui.css, otherwise you have to use !important for changes to take place.
As darkajax mention though, you have to start using firebug (or Chrome's tools).