I've got a selection part where I have multiple font Awesome icons and the selected one has a bar underneath it.
That goes alright as long as I only have 1 row of icons. When I have multiple rows the "selected bar" is not visible anymore as the icon underneath is hiding it.
I'm not very strong in css and tried all the padding and margins I could think of but without much success. In the attached jsfiddle you can see the selector for the last two icons, but not for the first one.
What should I add to the css below so that I can have multiple rows of icons and still see the selector bar?
.icon-picker {
border: 0px solid #000000;
margin-right: 5px;
width: 24px;
height: 24px;
background-color: #FFFFFF;
padding-bottom: 4px;
}
.selected {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 2px solid #000000;
}
.icon-container {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
padding-left: 15px;
max-width: 300px;
}
Thanks for your time.
jsfiddle
You need to make the <i> tag a block element for the width and height to be applied to the element.
See fiddle
.icon-picker {
border: 0px solid #000000;
display: inline-block;
margin-right: 5px;
width: 24px;
background-color: #FFFFFF;
}
Related
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
Dont know why the form's input button of the right (Aceptar) is smaller than the div made button of the left when the CSS is the same (except for a general border: 0 on the input's).
Any clues? CSS below:
Div button:
.boton {
width: 5em;
background-color: #8d99ae;
text-align: center;
border-bottom: 2px solid #2b2d42;
padding: 0.1em;
display: inline-block;
}
Input button:
input#boton {
width: 5em;
color: #edf2f4;
background-color: #8d99ae;
text-align: center;
border: 0;
border-bottom: 2px solid #2b2d42;
padding: 0.1em;
display: inline-block;
}
As Andrei mentionned, you should include a CSS reset. But I'm pretty sure that in your case, setting a "line-height" value would solve the issue.
I want to make four equal boxes with 10 small (thumb) boxes in each. How can this be done with css? Here is the image of what is the goal.
So far I have the left column box
.left_column{
margin-top: 10px;
width: 150px;
float: left;
border:2px solid #ccc;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
text-align: left;
padding: 10px;
font-size: 14px;
background-color: #f0f0f0;
color: #888;
}
.left_column p {
text-align: center;
border-bottom: 1px solid #ccc;
font-size: 20px;
}
.left_column a {
text-decoration: none;
margin-left: 10px;
}
edit:
Here is the Fiddle
You could create a container for each of the boxes with a fixed width and then put the thumbnails inside. If you use float: left; on the container boxes then they will move depending on the window size.
I can just suggest to use flex box.
It has only support for newer browsers but its actually totally easy to use and its responsive. Here is a small explanation:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The inner content could be simple created then by float:left; and display: inline-block;
Here is an example on jsfiddle:
http://jsfiddle.net/fpuwk7dL/
Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
With this html:
<div class="sectionheading">User Information</div>
<table id="UserInputTable" class="xInputTable">
...and this CSS:
.sectionheading{width:100%; font-size:20px; font-weight:bold; background-color:#28BA87; color:white; text-align:center; border-style:solid; border-width:thin; border-color:Black; border-collapse:separate; overflow:hidden}
.xInputTable {text-align:left;
vertical-align:middle;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-collapse:separate;
overflow:hidden}
table.xInputTable {width:100%; border: solid thin red; border-top-style:none;}
The DIV ends up rendering 2 pixels wider in both IE and Firefox (the left borders line up perfectly, the right borders are off by two pixels). Using the IE web dev toolbar, both elements have a width of 100%. In Firebug, they have widths of 950px and 948px. Here is the computed CSS (from IE developer toolbar):
DIV
BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid black;
WIDTH: 100%;
FONT-SIZE: 300;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
BORDER-LEFT: thin solid black;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid black;
BORDER-TOP: thin solid black;
BACKGROUND: #28ba87;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
LINE-HEIGHT: 1.5;
BACKGROUND-COLOR: #28ba87;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
TEXT-ALIGN: center;
COLOR: white;
FONT-WEIGHT: 700;
MARGIN: 0px;
PADDING-BOTTOM: 0px;
TABLE
BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid red;
WIDTH: 100%;
FONT-SIZE: 180;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
HEIGHT: auto;
BORDER-LEFT: thin solid red;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid red;
BACKGROUND: white;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
BACKGROUND-COLOR: white;
LINE-HEIGHT: normal;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 0px;
COLOR: #222;
TEXT-ALIGN: left;
MARGIN: 0px;
PADDING-BOTTOM: 0px;
Any idea what concept I'm missing here?
Wild guess here, but tables by default have cellpadding or cellspacing (can't remember which one) set to 2px by default, unless you set border-collapse: collapse;.
This doesn't affect the table itself, but the td's inside the table.
If my guess is correct, either of the following should work:
Set border-collapse: collapse; in the css for the table
Put "cellpadding="0" cellspacing="0"in the` tag
Add a new CSS declaration table.xInputTable td { padding:0; margin:0; }
Could be the 2 pixels for each (left and right) border which aren't taken into account when calculating the width.
Try to not set the width specifically on the div (and maybe the table too). They default to 100% but get calculated slightly different when it's set, I believe.
pb is correct.
When you apply "border" to a table, it will adjust the width to accommodate for the border. DIVs will add the border in addition to the width (as will most elements with a specified width, tables are special).
Hurix is correct that there is no point in adding width 100% to the div since it is a block element and will take up the full width of the parent by default, so you can take it off and it will auto-size to stay inside the parent even with the border added to its width. The table, however, should get the width: 100% if you want it to be full width.
Borders act like padding, so you are adding 2px to your width => 100% + 2px
Also consider using meyers reset.css to make sure your on level ground before jumping in.
http://meyerweb.com/eric/tools/css/reset/
Also you are getting sorta crazy with the all caps thing.
Ok so, in my opinion, at this point I would roll all the way back to just the html. Use FireBug religiously and only add one CSS attribute at a time to be sure that it doesn't have a negative effect on the layout.
Unfortunately the nature of CSS is that it is full of exceptions and things to consider with inheritance. Starting with just a reset.css, and maybe making all your different major elements a different background color (because that wont change the size like border) can help you see where you elements ACTUALLY reside.
Following up on kmiyashiro and pb I wanted to add that if you wrapped your table in a div with the style "width:100%; border: solid thin red; border-top-style:none;" and changed the style on "table.xInputTable" to "width: 100%" then everything should line up.