How does the Block component handle CSS classes? I have code like this:
<style type="text/css">
.nameColumnHeader { width: 30%; }
.nameColumnValue { width: 30%; vertical-align:top; }
</style>
...
<table>
<tr>
<th><span jwcid="nameColumnHeader#Block">...</span></th>
<th><span jwcid="nameColumnValue#Block">...</span</th>
</tr>
...
</table>
Ultimately, this seems to work. The styles seem to be applied even though the class attribute is not specified.
Why does this work? And wouldn't it be better form to specify the class attribute (in terms of maintainability)? At this point, however, this kind of code is all over the app, is it worth it to 'fix' it?
You're probably using the contrib:Table component - by default it applies classes to the and it generates (or perhaps in the , check the generated markup).
The value for those classes are generated from each column name, so for the 'phone' column they should be: phoneColumnHeader and phoneColumnValue... It just happens that you have a similarly named jwcid (nameColumnHeader) which added to the confusion.
Related
Question:
How can I add margins and/or paddings to headings (h1 - h4) that are part of a TD or TH?
Current Situation:
I have a pre-generated HTML document that is being generated by JIRA. The structure of this document is as follows:
<tr class="rowAlternate">
<td class="jira-macro-table-underline-pdfexport">
<h1><a name="StandardizedInterface"></a>Standardized Interface</span></h1>
<h2><a name="ShortDescription"></a>Short Description</h2>
<ul> ... </ul>
</td>
</tr>
I programmatically extend this document with <tocentry> and other mPDF-specific elements so it can be used as a handout, the generated PDF looks quite good but there is one major issue I have with headings in tables.
This is how the document shows up in the browser:
Inside generated PDF:
As can be see the margins of the headings have disappeared in the PDF export. All my tests with adding inline CSS to the headings or to wrap them with other elements have failed so far.
The mPDF documentation says:
Block-level tags (DIV, P etc) are ignored inside tables, including any
CSS styles.
This will most likely mean that this can't be done with pure CSS or wrapping.
I hope that someone else encountered this problem before and could share some insights as how to achieve spacing around block elements.
You'll want to convert the mark-up to a format similar to the following:
<table>
<tr>
<td class="h1">Report</td>
</tr>
<tr>
<td class="h2">Description</td>
</tr>
<tr>
<td>Body</td>
</tr>
</table>
You can then apply appropriate padding to the <td> elements by targeting the class name:
<style>
table, th, td {
border: none;
}
td.h1 {
padding: 30px 0;
}
td.h2 {
padding: 15px 0;
}
</style>
Use a DOM parser like the one from Symfony to help you traverse your current mark-up and rebuild it in the proper format automatically.
Workaround / solution
I used a workaround that solved the problem in my case by using preg_replace_callback() that I needed anyways to format my document properly. Whenever the callback handles a heading, I add a transparent image right after the text of the heading whose height I define by doing a bit of math.
Code
function formatHeading($p) {
// I only want headings for h1-h3:
$tocEntry= '';
if (is_numeric($p[2]) && $p[2] >= 1 && $p[2] <= 3) {
$tocEntry= "<tocentry level=\"{$p[2]}\" content=\"{$p[3]}\" />";
}
// calculates the heights of the vertical spacer
$spacerHeight= ((6-$p[2]) * 10);
return
"{$p[1]}{$tocEntry} {$p[3]} {$p[4]}
<img src=\"../assets/images/transparent.png\" height=\"{$spacerHeight}\" style=\"vertical-align:middle;\" width=\"1\" border=\"0\"/>";
}
// Matches e.g. "<h2><a name="SimpleTest"></a>Simple test</h2>"
$buffered= preg_replace_callback('|(<h(\d)+>?<a?[\w\s\d="%>]+<\/a>)(.+?[\s\r\n\']*.*)(<\/h\d+>)|',
"formatHeading", $buffered);
Result
To illustrate the position of the spacer I used a non-transparent image to generate the PDF:
Is there any way I can assign a css class to a table cell merely based on its header attribute?
The code is generated dynamically through a CMS so it's a little difficult to change, and it basically looks like this:
<td headers="blue">
How can I assign the style below to the td?
{
background-color: #1374bf;
}
You can use the css attribute selector.
td[headers="blue"]{
background-color: #1374bf;
}
I've looked far and wide and have been unable to find an explanation to this behavior.
Why does HTML5's data- attribute override my CSS content property on a common element?
So for example, I have the following element defined:
<th data-module-field="name" class="sortable sorted desc" data-bind="click:sort">Name</th>
And my CSS class is as follows:
.sortable.sorted.desc:after {
content: url(../Images/desc.gif);
margin-left: 3px;
}
With the data-module-field attribute set, the content image defined in the CSS class doesn't show up. However, if I remove the data- portion of this attribute (as follows), the content image displays correctly.
<th module-field="name" class="sortable sorted desc" data-bind="click:sort">Name</th>
Can anyone explain why this behavior occurs?
I have <select multiple="multiple">..</select> select and I also have select{heigth: 30px;} in some stylesheet that I cannot edit. Now my multiple select have 1-row heigth - "size" attribute cannot be applied. How can I solve the problem?
I like the clean solution.
select[multiple] {
height: 100px;
}
Well, first off - I'm assuming that you're using the height property, not the misspelled heigth property. There's two ways you could solve this.
The first (which I don't recommend) is by simply appending the style to the HTML element, like below:
<select multiple="multiple" style="height:100px">..</select>
Or, instead, my suggestion would be making a second style sheet, that uses the following property, including the "!important", which follows the attribute value:
select {
height: 100px !important;
}
Doing it like such will override the original style, and replace it. This isn't the only method that you can use to override it - you can read here on CSS specificity.
I think the right way should be adding a class to the specific <select> and giving it the right size, like:
<select multiple="multiple" class="multiple">
select.multiple {
height: 100px;
}
Sometimes the dang thing works and at other times it doesn't. I have many tables in my app and the CSS for all of them is working. There's nothing different for this one, except for it, the CSS isn't being applied, God knows why. Help.
table.catalogContainer
{
border: none;
padding: 50px;
margin-left: 100px;
margin-right: 100px;
margin-top: 50px;
margin-bottom: 50px;
}
td.catalogCell
{
border: none;
padding: 30px, 20px, 50px, 20px;
}
<div id = "catalog">
<table class = "catalogContainer">
<% while ((category = Helper.GetNextCategory(categoryIndex++)) != null)
{ %>
<tr>
<td class = "catalogCell">
<img src = "../../Content/Category.gif"
width = "25px" height = "25px" alt = "Category" />
<b>
<%= Html.ActionLink(category.Name,
"DisplayCategory",
"Catalog",
new { id = category.Id },
null) %>
</b>
</td>
<td>
</td>
</tr>
<% } %>
</table>
Update
Ok, I found the problem. The border that was showing in the table still was due to the second on which I did not apply the class yet.
It may be that the CSS isn't being pulled in time while your script is running. Try the following pattern in your style sheet:
#catalog table
{
...
}
#catalog table td
{
...
}
Edit
I see you've found the problem. Still, you can clean up your implementation a bit by using the cascade a bit more effectively as shown above.
What browser are you testing with? When you view the page source does everything look as it should? Maybe try posting the generated source html for that section of the page. It's possible your template code is outputting some bad stuff that is breaking your html for this particular table (which could affect page rendering).
I find firebug invaluable when troubleshooting css. You can easily see which styles are being applied to particular elements. You can use it to select an element and view all sorts of css information, and even try different values on the fly.
Additionally,
the commas in your shorthand padding td.cataglogCellare are unnecessary and may cause some issues in different browsers/versions.
Additionally Additionally,
you really shouldn't be using the <b> tag to markup your content. <em> or <strong> are much better semantically and you can style to create whatever presentation is needed.