This is my CSS cut:
html, body, * {
padding:0;
margin:0;
}
I need to modify it, so if any table has a cellpadding="4" attribute, then it won't add padding:0; to that and will use this attribute instead : cellpadding="4".
Is it possible?
All modern browsers support the :not selector. Usage:
*:not([cellpadding]) {
padding: 0;
margin: 0;
}
Fiddle: http://jsfiddle.net/rWVEu/
I believe you have to use padding:inherit; also, declare it after your html,body,* line.
html, body, * {
padding:0;
margin:0;
}
table[cellpadding="4"] {
padding:inherit;
}
UPDATE
If your cells are being affected by your * css code, you can include a line specifically for td elements:
table[cellpadding="4"] td {
padding:inherit;
}
Related
There is some problem with CSS3 native animation I've bumped into with Firefox (tried in v17) while Chrome is ok.
The sample is also available on Codepen:
http://codepen.io/anon/pen/yxteC
The code is also duplicated below.
I apply some class to some element (tried to apply that with JS on hovering, but hovering by itself works absolutely the same way (:hover selector instead of .hover class)).
So, the problem is that in Firefox the animation triggers only once: the first time the class had been applied. Any next time it does not.
That works perfectly in Chrome. I did not test any other browsers though (IE still does not widely support that, and Opera... well, it does not bother me much for now).
One more detail: if not to hide/show internal element (display:none/block), then it works ok in Firefox (but that's obviously not a solution).
I would really ask not to add any comments related to general cleanliness and possible improvements of the code. That's just an example.
HTML:
<div>
<span>menu</span>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
CSS:
ul
{
display: none;
}
div.hover ul
{
display: block;
}
div li
{
position: relative;
top: -10px;
}
div.hover li
{
-webkit-animation: filterAppear 0.5s;
-moz-animation: filterAppear 0.5s;
top: 0;
opacity: 1;
-webkit-animation: filterItemAppear 0.1s;
-moz-animation: filterItemAppear 0.1s;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
}
div.hover li:nth-child(1)
{
-webkit-animation-delay: 0.15s;
-moz-animation-delay: 0.15s;
}
div.hover li:nth-child(2)
{
-webkit-animation-delay: 0.35s;
-moz-animation-delay: 0.35s;
}
div.hover li:nth-child(3)
{
-webkit-animation-delay: 0.55s;
-moz-animation-delay: 0.55s;
}
#-webkit-keyframes filterItemAppear
{
from { opacity:0; top:-25px; }
to { opacity:1; top:0; }
}
#-moz-keyframes filterItemAppear
{
from { opacity:0; top:-25px; }
to { opacity:1; top:0; }
}
I had similar problem and today I'll find the solution.
Firefox must notice the DOM manipulation somehow. So we must add .width() or setTimeout. Width solution is cleaner IMO.
Look at my edited CodePen for your example http://cdpn.io/yhbfB.
(More about it at http://css-tricks.com/restart-css-animation/)
I know, there are at least 3 dozen questions like this on stackoverflow and still, I could not make this happen:
A simple table where thead is sticked/fixed at the top, and the tbody is scrolled.
I tried so much in the past days and now I ended up here crying for help.
A solution should work in IE8+ and newest FF, Chrome & Safari.
The difference to other "possible duplicates like this one is that I don't want to use two nested tables or jQuery (plain javascript is fine though).
Demo of what I want:
http://www.imaputz.com/cssStuff/bigFourVersion.html.
Problem is it doesn't work in IE, and I would be fine to use some JS.
Ok i got it:
You need to wrap the table in two DIVs:
<div class="outerDIV">
<div class="innerDIV">
<table></table>
</div>
</div>
The CSS for the DIVs is this:
.outerDIV {
position: relative;
padding-top: 20px; //height of your thead
}
.innerDIV {
overflow-y: auto;
height: 200px; //the actual scrolling container
}
The reason is, that you basically make the inner DIV scrollable, and pull the THEAD out of it by sticking it to the outer DIV.
Now stick the thead to the outerDIV by giving it
table thead {
display: block;
position: absolute;
top: 0;
left: 0;
}
The tbody needs to have display: block as well.
Now you'll notice that the scrolling works, but the widths are completely messep up. That's were Javascript comes in.
You can choose on your own how you want to assign it. I for myself gave the TH's in the table fixed widths and built a simple script which takes the width and assigns them to the first TD-row in the tbody.
Something like this should work:
function scrollingTableSetThWidth(tableId)
{
var table = document.getElementById(tableId);
ths = table.getElementsByTagName('th');
tds = table.getElementsByTagName('td');
if(ths.length > 0) {
for(i=0; i < ths.length; i++) {
tds[i].style.width = getCurrentComputedStyle(ths[i], 'width');
}
}
}
function getCurrentComputedStyle(element, attribute)
{
var attributeValue;
if (window.getComputedStyle)
{ // class A browsers
var styledeclaration = document.defaultView.getComputedStyle(element, null);
attributeValue = styledeclaration.getPropertyValue(attribute);
} else if (element.currentStyle) { // IE
attributeValue = element.currentStyle[vclToCamelCases(attribute)];
}
return attributeValue;
}
With jQuery of course this would be a lot easier but for now i was not allowed to use a third party library for this project.
Maybe we should change a method to archieve this goal.Such as:
<div><ul><li>1</li><li>2</li></ul></div> //make it fixed
<table>
<thead>
<tr><th>1</th><th>2</th></tr>
</thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
Of course, this is not good to sematic.But it is the simplest way without js or jq.
Don't you think so?
How can TH style name/s of a GWT CellTable's heading be looked up programatically?
I have looked at the Client Bundle documentation but it isn't immediately obvious to me how it all fits together. Thanks.
Not sure exactly what you want to do when accessing the TH style names.
If you want to override the standard css style of a celltable header, here are some of the css styles you can override to change the Look and Feel of the component.
.cellTableFirstColumnHeader {}
.cellTableLastColumnHeader {}
.cellTableHeader {
border-bottom: 2px solid #6f7277;
padding: 3px 15px;
text-align: left;
color: #4b4a4a;
text-shadow: #ddf 1px 1px 0;
overflow: hidden;
}
.cellTableSortableHeader {
cursor: pointer;
cursor: hand;
}
.cellTableSortableHeader:hover {
color: #6c6b6b;
}
.cellTableSortedHeaderAscending {
}
.cellTableSortedHeaderDescending {
}
Here is the complete list of styles for cellTables CellTable.css
Now if you want to access you header programmatically, you can use this solution to get the TableSectionElement corresponding the the Header of your table. Then you can access the row, then the cells, and lookup for their styles I guess.
Last thing if you want to override the header style, maybe you can use the following method when adding your column to your table
public void addColumn(Column<T, ?> col, Header<?> header)
Then create your Header or use a TextHeader for example then set your style on it before adding it to the table using
public void setHeaderStyleNames(String styleNames)
Example
TextHeader textHeader = new TextHeader("headerTitle");
textHeader.setHeaderStyleNames("my-style");
myTable.addColumn(myColumn, textHeader);
Easy solution:
import com.google.gwt.user.cellview.client.CellTable.Resources;
private String getCellTableHeaderStyle() {
Resources res = GWT.create(Resources.class);
return res.cellTableStyle().cellTableHeader();
}
I'm having problems with IE9 ignoring the select borders when printing a multiple select.
Here's how to recreate the problem:
Open IE9 on Windows 7.
Go to w3schools's multiple select edit page.
Now highlight the options and copy/paste until there is a long list of duplicates.
Then remove the size attribute.
Click on "Edit and Click Me" so that the page reloads and you now have your modified select in the second panel.
Now, print the document (even using the XPS viewer).
For me, all of the options are printed on the page, even though the select is only 4 option elements tall. This still happens to some degree if you leave the "size" attribute at the default value of 2, but it's far more obvious when it is changed or removed.
Is anyone else experiencing this? Is this an IE bug? Does anyone know of a workaround?
You can work around this by viewing the site in IE9's compatibility mode. Usually IE will determine that it cannot display a site properly and give you the option to turn on compatibility mode from within the address bar but sometimes you need to explicitly set it.
How to turn on compatibility mode - http://www.sevenforums.com/tutorials/1196-internet-explorer-compatibility-view-turn-off.html - I used the first one in method 2.
There doesn't seem to be any CSS solution for this. Instead, I wrote a small jQuery script that copies the <select multiple> contents into a <div>, so that it can be printed. Then I applied some CSS to make it look like a select, and only show the copy when actually printing.
Script:
//jQuery required
$(function() {
if(!$.browser.msie) return false;
$('select[multiple]').each(function() {
$lPrintableDiv = $('<div data-for="' + this.id + '" />').addClass($(this).attr('class')).addClass('printable');
//update printable on changes
$(this).after($lPrintableDiv).change(function($aEvent){
updatePrintable($aEvent.target);
});
//run once on load
updatePrintable(this);
});
});
function updatePrintable($aTarget) {
var $lSelect = $($aTarget);
var $lSelected = $($aTarget).val();
var $lPrintable = $('[data-for="'+$aTarget.id+'"]');
$($lPrintable).width($lSelect.width()).height($lSelect.height());
$($lPrintable).html('');
$($aTarget).children().each(function($lElm){
$lVal = $(this).val();
$lLabel = $('<label />').text($lVal);
$lOption = $('<input type="checkbox" />').val($lVal);
if($(this).is(':selected'))
$lOption.prop('checked', true);
$lPrintable.append($lOption).append($lLabel);
});
}
CSS:
.printable {
border: 1px solid grey;
display: none;
overflow: auto;
}
.printable label {
display: block;
font: .8em sans-serif;
overflow: hidden;
white-space: nowrap;
}
.printable [type="checkbox"] {
display: none;
}
.printable [type="checkbox"]:checked + label {
background: #3399ff;
color: white;
}
#media print {
select[multiple] { display: none; }
.printable { display: inline-block; }
.printable [type="checkbox"]:checked + label { background: grey; }
}
Also see the jsFiddle and original post about this fix
I'm using the jQuery UI Autocomplete plugin (version 1.8), and I'd like to customize the way the suggestions show up. Specifically, I want to display not only some text, but an icon as well. However, when I send the <img> tag, it just gets rendered as plain text in the results list.
Is there some way to change this behavior? Alternatively, can you suggest a different way to include images in the returned results and have them show up in the suggestions?
Taken from here
$("#search_input").autocomplete({source: "/search",
minLength: 3,
select: function (event, ui) {
document.location = ui.item.url;
}
})
.data("autocomplete")._renderItem = function (ul, item) {
//As per recent documemtation above line should be
//.autocomplete( "instance" )._renderItem = function (ul, item) {
return $('<li class="ui-menu-item-with-icon"></li>')
.data("item.autocomplete", item)
.append('<a><span class="' + item.type + '-item-icon"></span>' + item.label + '</a>')
.appendTo(ul);
};
And the CSS:
.ui-menu .ui-menu-item-with-icon a {
padding-left: 20px;
}
span.group-item-icon,
span.file-item-icon {
display: inline-block;
height: 16px;
width: 16px;
margin-left: -16px;
}
span.group-item-icon {
background: url("/image/icons/group.png") no-repeat left 4px;
}
span.product-item-icon {
background: url("/image/icons/product.png") no-repeat left 7px;
}