I'm trying to figure out how to output a block of HTML from Wordpress that looks like this:
<table>
<tr>
<td> Link to first headline </td>
<td> Link to fourth headline </td>
</tr>
<tr>
<td> Link to second headline </td>
<td> Link to fifth headline </td>
</tr>
<tr>
<td> Link to third headline </td>
<td> Link to sixth headline </td>
</tr>
</table>
I used to be able to do this with Moveable Type quite easily but cannot for the life of me figure it out. Any guidance would be appreciated.
You should be able to use a Custom HTML widget(Appearance > Widgets) or put the code in the Editor on a page. Make sure you're in the Code Editor and not the Visual Editor (There should be tabs at the top that let you switch. If you're already in the Gutenberg editor then it'll be three vertical dots on the upper right of the screen.)
For linking the headers, you can select the text and link using the link (chain-looking) icon at the top of the editor that will let you select another part of your page. This will be in the Visual Editor, though you can input your own links using the code as well.
Hope that helps!
Related
In my Qt project I'm using the QWebView to load my html table data.
I'm using the findText function to find text in the html page.
But, I can't find invisible text...
HTML sample :
<table>
<tr>
<td> hello </td>
</tr>
<!-- invisible data -->
<tr style="display:none">
<!-- I want to find this value -->
<td> hey </td>
</tr>
</table>
Is there a way to find invisible text elements via Qt?
I know that I can evaluate JavaScript function for that..
But still I'm looking for some Qt solution?
Thanks in advance.
You can use QWebFrame::findAllElements() function which will perform elements look up by CSS selector and return all found elements as QWebElementCollection regardless of their visibility. From that list you can find the QWebElement that correspond to your searching criterion.
I am doing a report which is going to have a lot of lines, therefore it is going to be composed by several pages.
I declared a pto_header, because I want it to be shown at the top of each page. The problem is that it is always totally attached to the external header of the report, which does not look good. I would like to specify a margin-top for my pto_header (which is a blockTable).
By the moment, I was not able to manage it. I tried to include a couple of <para> with the attribute spaceBefore, but they are ignored in each page except for the first one.
...
<stylesheet>
...
<paraStyle name="terp_header" fontSize="15.0" leading="20" alignment="CENTER" spaceBefore="20.0" spaceAfter="20.0"/>
</stylesheet>
<story>
<pto>
<pto_header>
<para style="terp_header"></para>
<para style="terp_header"></para>
<blockTable colWidths="480.0">
<tr>
<td>
<para>Name</para>
</td>
</tr>
</blockTable>
</pto_header>
<para style="terp_header"></para>
<para style="terp_header"></para>
<blockTable colWidths="480.0">
<tr>
<td>
<para>Name</para>
</td>
</tr>
</blockTable>
...
</pto>
</story>
...
I was taking a look to the code of other standard reports, and in fact, they look bad, because they do not respect the margin and their internal headers are totally sticked to their external headers.
Can anyone help me, please? My solution only works for the first page. It must be a better way to manage this.
I'm trying to style a ng-table layout, which contains a table in each row. The way this expanding functionality is implemented in angular, looks like this:
<tr ng-if="org.expanded" ng-repeat-end>
<td></td>
<td></td>
</tr>
The issue is more related to CSS.
The problem is that, when clicking on the plus icon next to the ServiceType column the 4 expanded columns aren't aligned with the parent tablecolumn headers i.e. Service Type, Location , Contact details and Last Updated.
How can I set it, that the values look nicely aligned(left)?
Also, I can't align the Last Updated column to the left.
Here is a plunkr sample of the problem:
http://embed.plnkr.co/UlMg7J/preview
http://plnkr.co/edit/UlMg7J?p=preview
For the last column not aligned issue I have replaced the table for phone,website..etc with divs and it started to align to the position you desired. What it was doing was it was creating extra headers (th) tags which is not desired.
Your Code:
<td data-title="'Contact Details'">
<table>
<tr>
<td>Phone:</td>
</tr>
<tr>
<td>Fax:</td>
</tr>
<tr>
<td>Email:</td>
</tr>
<tr>
<td>Website:</td>
</tr>
</table>
</td>
Changed Code:
<td data-title="'Contact Details'">
<div>Phone:</div>
<div>Fax:</div>
<div>Email:</div>
<div>Website:</div>
</td>
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 have an asp page and I am trying to set the background color of a cell based on a dynamic value in that cell. I have created pages already where the values can be edited. This in a simple IN/OUT check-in for our team. For instance, if the value is set to "IN", the the background color is to be green. If the value is "OUT", then set background color is red. If the value is "WAH", then set it to orange. We have 7 Techs that will update this themselves. I have searched for examples, but nothing even close has come up. Besides doing simple web based reports on ASP pages, I know little else. Any help and guidance is appreciated.
Here is my table code. Pretty simple.
<table width="500" border="1" align="center" bordercolor="#000000">
<tr>
<td> </td>
<td>
<div align="center"><strong>Mon</strong>
</div>
</td>
<td>
<div align="center"><strong>Tues</strong>
</div>
</td>
<td>
<div align="center"><strong>Wed</strong>
</div>
</td>
<td><div align="center"><strong>Thur</strong></div></td>
<td><div align="center"><strong>Fri</strong></div></td>
</tr>
You should rather run this check on your server while generating the page contents and assign appropriate CSS classes to the cells so that they can be styled any way you like. CSS does not allow textContent matching.