I have a simple React weather app I am experimenting around with.
The "table" and "table-hover" css classes used below are bootstrap classes.
<table className="table table-hover">
<thead>
<tr>
<th>City</th>
<th>Temperature (K)</th>
</tr>
</thead>
</table>
As a test, I changed as follows:
<table className="tableJIBERRISH table-hoverJIBBERISH">
<thead>
<tr>
<th>City</th>
<th>Temperature (K)</th>
</tr>
</thead>
</table>
As expected, the formatting breaks.
However, in my debugging tools (I am using Firefox), I don't have any indication as to whether the CSS class being used is valid or not. How can I get this feedback from my browser's devtools?
OK, this is pretty simple. As mentioned in the comments above,
Open Firefox devtools
Right-click and select "Inspect Element"
On the right side of devtools under the Inspector tab, there is another group of tabs. By default, "Rules" should display all rules that are applied to the element.
All css classes that are applied should display here (there is a search bar to help filter as well)
Related
Why does the CSS property overflow:scroll; not work in <td>, while overflow:hidden; works well?
<table border="1" style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
<td>200</td>
<td>300</td>
</tr>
</table>
From the CSS specs1,2, I can't see why.
You have to wrap it in a div, that will work:
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
Firstly provide desired height to td and then Apply "float: left" property to respective "td" you want scrollbar to appear.
I got something from here!
Andrew Fedoniouk wrote:
This is actually my question:
"One technical reason is that the overflow property does not apply to
tables." - why? What is this reason?
I'm no expert, but I believe this is
just for backward compatibility with
legacy table behavior. You can check
the "automatic" table layout
algorithm in the spec. I'm pretty
sure that this layout algorithm is
incompatible with the overflow
property (or, more accurately, the
layout algorithm will never result in
the need for any value of overflow
except 'visible').
Yep, this is why I am asking. Seems like there are no formal reasons
why or should not be scrollable but seems like
UA vendors reached some silent agreement in this area. So is the
question.
The spec agrees with you with respect
to elements. Table cells are
supposed to respect overflow, although
Mozilla, at least, appears not to do
so. I can't answer your question in
this instance, although I would still
guess the answer is still tied to
legacy rendering.
The main thread is here.
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
I'm testing with Selenium Webdriver in Firefox and ideally also in IE8.
Here is my html structure:
<table id="table">
<tbody>
<tr>
<td>Text1</td>
<td><a id="assign" href="/assign/1>Assign</a></td>
</tr>
<tr>
<td>Text2</td>
<td><a id="assign" href="/assign/2>Assign</a></td>
</tr>
<tr>
<td>Text3</td>
<td><a id="assign" href="/assign/3">Assign</a></td>
</tr>
</tbody>
</table>
Basically what I need to do is this:
Click on the assign link on the row that contains Text1
So far i came up with the XPATH: //*[#id='table']//tr/td//following-sibling::td//following-sibling::td//following-sibling::td//a that selects all the assign links. Changing it to //*[#id='table']//tr/td[text='Text1']//following-sibling::td//following-sibling::td//following-sibling::td//a returns "No matching nodes" from Firebug.
However, I want a CSS selector for this. So, i tried #table>tbody>tr:contains('Text1') but Firebug returns "Invalid CSS Selector".
Any suggestions ?
You should find the td that has preceding td sibling tag with Text1 text, then get the a tag:
//table[#id="table"]//td[preceding-sibling::td="Text1"]/a[#id="assign"]
Alternatively you can find 'tr' having 'td' with text = 'Text1' and then inside the 'tr' find 'td' having text 'Assign'
//table[#id='table']//tr[td[.='Text1']]/td[.='Assign']
About css selectors, there are no pure css selector for text based search. 'contains' is not standardized yet, so may not work in your case.
I have some Selenium tests I've been building with the Firefox IDE plugin. This is the first I've attempted tests like this, the client asked for it, as I'm refactoring some code and they want to be certain things still work.
I have an element that resizes via a script, and I need to test its height. My Selenium source currently looks something like:
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">New Test</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/landing-page</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=a.facebook.</td>
<td></td>
</tr>
</tbody></table>
I need to test that an element is greater than a certain height. How do I write that in after clicking on the .facebook link?
There is not a vanilla way of doing such a thing. You'd have to create your own javascript plugin to put into the IDE. Learn how to structure a javascript plugin for the IDE, then you can put something like this into it (mind you this is pseudo-code):
function validateHeight(HTMLElement element, int height) {
return assertTrue(element.height == height);
}
We have an asp.net master page that defines our web application layout using Tables. The goal is to have the content page take up the entire available screen real estate after having displayed the header and footer. This works for us fine in IE but does not work as intended in Chrome or FireFox.
What happens with Chrome and FireFox is that the content section expands only to wrap the content, which, in instances like a welcome screen ends up taking only a small portion of the screen leaving a big blank section at the bottom of the screen.
Here is a basic example of how our layout is structured:
<table style=height:80%;width:100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<!--Header Banner goes here This displays fine-->
</td>
</tr>
<tr style="height:100%" valign="top">
<!--Content Goes Here. Problem is that page only expands
as much as its content section vs filling up the whole page. -->
</tr>
<tr>
<!--Footer Goes here. This works fine!!-->
</tr>
</tbody>
</table>
Your problem is that you're using tables for layout. This would be easily achieved with proper HTML using something like a sticky footer (http://ryanfait.com/sticky-footer).
I'd recommend grabbing the HTML5 boilerplate or similar (http://html5boilerplate.com) and working from there.
If this is an existing web app that you can't change the HTML of then Javascript might be a solution...
There is no good way to specify in CSS that a element should be at least as high as the screen. You have to resort to JavaScript.
Since determining the height of the client are of the screen is again something that every browser version might do slightly differently, it is safest to use jQuery:
// tableID is the ID of your element that you want to take up the space
$("#tableID").height($(window).height());
You are missing some <td></td> and " in your code.
Also add
html,body {
height:100%;
min-height:100%;
}
to the StyleSheet. And HTML is
<table style="height:80%;width:100%;background-color:yellow" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2" style="background-color:red">
Header Banner goes here This displays fine
</td>
</tr>
<tr valign="top">
<td style="background-color:green;height:100%">Content Goes Here. Problem is that page only expands as much as its content section vs filling up the whole page.</td>
</tr>
<tr>
<td style="background-color:blue">Footer Goes here. This works fine!!</td>
</tr>
</tbody>
</table>
Live preview >> jsfiddle
Set margin-top:0px in your content tr tag
I'd like to have a normal table to look like RadGrids, is there an easy way I can use the RadGrid styles (keeping theming in mind)?
Using a tool like Firebug, you can inspect the table generated by RadGrid.
The example shown on this page gives the following results:
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
Adding the classes stated here to your own table should copy the style from the rad grid.
I have been playing with this, and it seems you need to wrap the table in div(s) with certain styles - maybe due to themes? Maybe I'm still missing something, but this is the only way I could get it to work.
<div class="RadGrid RadGrid_Sunset">
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
</div>