I'm using django tables2, and I think it would be useful to have up and down arrows on header columns to indicate the current sorting order, especially when the default sort is on a column other than the first.
Tried playing with CSS but no luck, any suggestions or examples on how to do this?
The answer provided in this question may solve your problem, though it it hard to know for sure without knowing what you have tried already with CSS.
The templates that come built-in with django-tables2 all render column attributes to the final HTML, so that a column that is defined as orderable=True will produce column header tags with an "orderable" class (e.g. <th class="orderable">). Furthermore, columns that have been selected to sort ascending or descending will have asc or desc class identifiers added on render.
So, you can set up a CSS rule that will render three different arrow images depending on the state of the orderable column:
table.table thead th.orderable {
background: url(path_to_unsorted_indicator_image)
}
table.table thead th.asc.orderable {
background: url(path_to_ascending_indicator_image)
}
table.table thead th.desc.orderable {
background: url(path_to_descending_indicator_image)
}
Related
I am using this stackblitz example of nested material tables to create similar table in my project.
https://stackblitz.com/edit/angular-nested-mat-table?file=app%2Ftable-expandable-rows-example.ts
This approach creates a "hidden" row, if you will inspect the page there will be rows with class "example-element-row" followed by a row with class "example-detail-row". The "example-detail-row". is the hidden one.
The issue I have is related to my corporate CSS table class which adds extra padding + strip like view (every even row is has gray background) - with this CSS classes my table looks awful as hidden row is displayed anyway
Is it possible to overcome this issue? I tried to add ngif with some flag to code below, but it breaks expandable rows feature even though the table is rendered very well
<tr *ngIf="flag" mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
To replicate the behavior caused by your corporate CSS, I added the following CSS block to the stackblitz link which you shared:
tr td {
padding:5px 0;
}
this is typical over-arching css rules for websites... to resolve, we just need to override this through a more detailed css rule:
.mat-row.example-detail-row td{
/* comment this to see the problem behavior */
padding:0;
}
complete working stackblitz here
I'm trying to make a hover effect for a table with multiple rowspan but I don't manage to make it fully work.
The css as described in another stackoverflow is not working (see solution here https://codepen.io/cimmanon/pen/KqoCs ).
The example here (rowspan on multiple columns) : https://codepen.io/anon/pen/rJXgzW
The hover css effect is defined as :
tbody:hover td[rowspan], tr:hover td {
background: red;
}
Any suggestions?
The trick in the working example is to use multiple <tbody> elements in the table where each table body contains one table cell spanning multiple rows. That way
tbody:hover td[rowspan] { background: red; }
makes it magically appear as requested. This doesn't work with the second example in the same way, as there are (1) multiple row-spanning elements and (2) it's using <th> elements (which is easy to address, though).
To get it working using CSS only, you would need to nest tables inside table cells.
This is extremely simple but I am wondering why people write this?
div#some_id
You can only have one ID of that name "some_id" on a webpage. So why be specific with it? Is it for readability purposes?
There are a couple of possible reasons:
It is a more specific selector
It tells people reading the stylesheet that the selector is aiming at a div element
The same id could be applied to different element types on different pages that use the same stylesheet (this usually causes more confusion then benefits though, so I wouldn't advise that approach).
You're right, but this would mean a div with an ID of some_id. (More correctly, an element with an ID of some_id, which is also a div).
This grants a higher specificity value, but you're right. It's usually worthless with IDs, more useful with class names.
For example:
div.large { width: 500px; /* 500px is a large div */ }
input.large { width: 100px; /* 100px is a large input */ }
Same class name, different results.
The reason this is done is mainly for readability in the stylesheet.
As you can only have 1 id on a page it makes sense that you would not need to specify which type of element it is.
I know that in a stylesheet div#name and #name do the same thing. Personally I've taken to using div#name for most styling I do, with the reasoning that it's slightly faster, and means that I can identify HTML elements more easily by looking at the CSS.
However all of the big websites I seem to look at use #name over div#name (stack overflow included)
In fact I'm finding it very difficult to find many websites at all that use div#name over #name
Is there some advantage to doing #name that I'm missing? Are there any reasons to use it over div#name that I don't yet know about?
Since the div part of div#name is not required (because ID are unique per page), it makes for smaller CSS files to remove it. Smaller CSS files means faster HTTP requests and page load times.
And as NickC pointed out, lack of div allows one to change the HTML tag of the element without breaking the style rule.
Since ID's have to be unique on the page, most ID's you'd run into would only ever appear once in your style sheet, so it makes sense not to bother including what element it would appear on. Excluding it also saves a few characters in your style sheet, which for large sites which get visited millions and millions of times a day, saves quite a bit of bandwidth.
There is an advantage to including the element name in the case where a division with ID "name" might appear differently than a span with ID "name" (where it would show a division on one type of page and a span on another type of page). This is pretty rare though, and I've never personally run across a site that has done this. Usually they just use different ID's for them.
It's true that including the element name is faster, but the speed difference between including it and excluding it on an ID selector is very, very small. Much smaller than the bandwidth that the site is saving by excluding it.
a matter of code maintainability and readability.
when declaring element#foo the code-style becomes rigid - if one desires to change the document's structure, or replace element types, one would have to change the stylesheets as well.
if declaring #foo we'll better conform to the 'separation of concerns' and 'KISS' principals.
another important issue is the CSS files get minified by a couple of characters, that may build up to many of characters on large stylesheets.
Since an id like #name should be unique to the page, there is no reason per se to put the element with it. However, div#name will have a higher precedence, which may (or may not) be desired. See this fiddle where the following #name does not override the css of div#name.
I would guess that including the element name in your id selector would actually be slower – browsers typically hash elements with id attributes for quicker element look up. Adding in the element name would add an extra step that could potentially slow it down.
One reason you might want to use element name with id is if you need to create a stronger selector. For example you have a base stylesheet with:
#titlebar {
background-color: #fafafa;
}
But, on a few pages, you include another stylesheet with some styles that are unique to those pages. If you wanted to override the style in the base stylesheet, you could beef up your selector:
div#titlebar {
background-color: #ffff00;
}
This selector is more specific (has a higher specificity), so it will overwrite the base style.
Another reason you would want to use element name with id would be if different pages use a different element for the same id. Eg, using a span instead of a link when there is no appropriate link:
a#productId {
color: #0000ff;
}
span#productId {
color: #cccccc;
}
Using #name only:
Well the first obvious advantage would be that a person editing the HTML (template or whatever) wouldn't break CSS without knowing it by changing an element.
With all of the new HTML5 elements, element names have become a lot more interchangeable for the purpose of semantics alone (for example, changing a <div> to be a more semantic <header> or <section>).
Using div#name:
You said "with the reasoning that it's slightly faster". Without some hard facts from the rendering engine developers themselves, I would hesitate to even make this assumption.
First of all, the engine is likely to store a hash table of elements by ID. That would mean that creating a more specific identifier is not likely to have any speed increase.
Second, and more importantly, such implementation details are going to vary browser to browser and could change at any time, so even if you had hard data, you probably shouldn't let it factor into your development.
I use the div#name because the code is more readable in the CSS file.
I also structure my CSS like this:
ul
{
margin: 0;
padding: 0;
}
ul.Home
{
padding: 10px 0;
}
ul#Nav
{
padding: 0 10px;
}
So I'm starting generic and then becoming more specific later on.
It just makes sense to me.
Linking div name: http://jsfiddle.net/wWUU7/1/
CSS:
<style>
div[name=DIVNAME]{
color:green;
cursor:default;
font-weight:bold;
}
div[name=DIVNAME]:hover{
color:blue;
cursor:default;
font-weight:bold;
}
</style>
HTML:
<div name="DIVNAME">Hover This!</div>
List of Css selectors:
http://www.w3schools.com/cssref/css_selectors.asp
I have a website created by a designer entirely in a table format. I am embedding another table within its cell, the thing is my table has its own stylesheet. When I link mine externally, the entire site get warped. All I want is my Stylesheet to work on my table.
How do I include this stylesheet without causing a conflict or override on the entire site?
If there's no better option, then give your table an id or specific class. Then use this in all your CSS declarations, ensuring the styles within will apply to only your new table. This article explains the idea of pseudo-namespacing further, which is worth considering.
So instead of:
td { border: 1px solid black; }
You would have, e.g.:
.myClass td { border: 1px solid black; }
There are two kinds of things to take care of: 1) preventing your style sheet from affecting the table used for formatting the entire table, and 2) preventing the formatting of that table from affecting your table. Your style sheet must be modified for this.
Start from assigning a unique id to your table and then using the corresponding selector in all rules of your stylesheet (see Rob W’s answer). This suffices for 1). It mostly suffices for 2), too, but not always. You should test it and have a look at the overall style sheet. There is no quick way here.
To illustrate the problematic point, suppose that you want your table to have borders around cells. For this you could have table#foo td { border: solid; }. But if the overall style sheet has td { border: none !important; }. That’s not good practice, but such things are used; authors often use !important for no good reason. In this case, if the overall style sheet cannot be changed, you would need to use !important in your style sheet, too. In extreme cases, you might even need to use !important and write selectors so that they are more specific.