Cannot renders nested list within divs correclty in itextsharp - itext

I use itextsharp & mvcrazortopdf to generate pdfs in azure websites. nested lists in div tags or table cell cannot be rendered correctly - they become one single line. here is a example:
<div>
<ul>
<li>
test1
<ul>
<li>test1.1</li>
</ul>
</li>
<li>test2</li>
</ul>
</div>
http://demo.itextsupport.com/xmlworker/
in the demo page it is rendered as:
test1 test1.1
test2
Any help is appreciated!

With the help of a coworker, we managed to create a workaround for nested lists inside a table cell. It involves surrounding the list with <div> tags, and they will render correctly.
For instance, in the web application I'm developing, there are several Razor Views that we convert to PDF. As these views are completed with data from the database, we allow users to fill some fields in other forms with rich-text controls. As a result, we can encounter any kind of styles and combination of lists.
The mentioned reports are similar in structure, so we have many tables within tables. In the last level of tables, we have the "troublesome" cells, which are filled with the rich-text fields from the database. Inside each cell, we put the <div> tags like this:
<tr>
<td class="border3 fontMedium">
<div>
#if (!String.IsNullOrEmpty(entity.Field))
{
<p class="fontSmall">#Html.Raw(entity.Field)</p>
}
else
{
<p> </p>
}
</div>
</td>
</tr>
Please note that the mentioned <div> does not need to have any CSS class associated. The other CSS classes you see in the code snippet belong to the styling of the reports; and they involve borders, paddings and so on.
Hope that helps.

Related

Is it possible to implement dynamic form input rows (adding new row by clicking on Add) with Handlebars and Meteor?

I'm getting my hands dirty with Meteor, and I wanted to port this AngularJS app (http://simplydo.com/projector/) over as an exercise.
I'm having difficulty implementing adding dynamic input form rows to sections using Handlebars, and I've found no documentation anywhere that documents if this possible. It's a snap in Angular using ng-repeat, but I want to confirm if this is something that is possible in Handlebars or whether I need to use Jquery in order to achieve this.
Thanks in advance.
It's just as easy in Meteor
all you have to do is repeat the rows with {{#each rowData}} and have a button that adds a document to the collection. Here is an example:
In this template the rows for a page are shown. In order to add a row, the user has to click on the add image. The template is :
<template name="page">
{{#with page}}
<h3>{{title}}</h3>
{{#each rows}}
<div class="row-fluid page-row {{#if isSelected this}}selected-row{{/if}}">
... page content here
</div>
{{/each}}
{{/with}}
<div class="btn-toolbar">
<div class="pull-right">
<a id="add-row" href="#" data-toggle="tooltip" title="{{lbl 'add-page'}}">
<img src="/images/add.png" class="asset-icon"/>
</a>
<img src="/images/separator.png" class="asset-icon"/>
<a id="delete-row" href="#" data-toggle="tooltip" title="{{lbl 'delete-page'}}">
<img src="/images/delete.png" class="asset-icon"/>
</a>
</div>
</div>
</template>
the helpers for this template are:
Template.page.page = function () {
return Session.get("selected-page");
}
in order to add a page the click event for the add button is implemented:
"click #add-row": function (evt, template) {
var page = Session.get("selected-page");
Pages.update({_id: page._id}, ... add a new row here ...)
}
because the whole thing is reactive, the list of rows will redraw after the update on the Pages collection.

Does wicket lose hold of the HTML components after a rearrangement through JavaScript?

I have a repeating component in wicked which needs to be added and deleted as per the user requirement. The maximum number of component is predefined. So I am adding the components at start up and hiding and showing based on need. I am required to change the arrangement of the components in the HTML markup when there is any deletion of the component. I use JavaScript for this. I want to know if wicket would lose hold of the components if I do this.
<div wicket:id="borrowerTabs" id="borrowerTabs">
<span wicket:id="borrowerTab1" id="borrowerTab1" ></span>
<span wicket:id="borrowerTab2" id="borrowerTab2" ></span>
<span wicket:id="borrowerTab3" id="borrowerTab3" ></span>
<span wicket:id="borrowerTab4" id="borrowerTab4" ></span>
<button wicket:id="addBorrower" id="addBorrower" type="button"></button>
<button wicket:id="deleteBorrower" id="deleteBorrower" onclick="updateUIForDeleteBorrower()" type="button"></button>
</div>
If delete the borrowerTab3, contents inside borrowerTab4 will be replacing the contents inside borrowerTab3 and the model objects too will be swapped though I do not do a target.add(borrowerTab3). Now while form submission, I am not getting the values of the fields inside borrowerTab3.
I'm not sure if it helps but try component.setVisible(false) in your java code to hide it.

Replacing <a>-tag linktext with different text

I try to map the following html (it´s a small fce)..
<div>
<div data-hero="1">
<h1>
<!-- Headline -->
</h1>
<p>
<!-- Small Text -->
</p>
<p>
<a>
<span><!-- Button Text --></span>
</a>
</p>
</div>
</div>
Mapping is ok... But when i map the <span> i get a No content found div[1] div[1] p[2] a[1] span[1] error. The <a>-Tag is mapped outter so it should work..
What I try to achieve: Set a Text that is displayed in the <a>-tag, instead of the link target itself.
It´s a TYPO3 4.7 using the latest TemplaVoilà.
Why is that? Thanks in advance!
Edit
#biesior suggested this is not possible - so no i wrap a <span> into the <a>-tag via Typoscript.
Is there a chance to display a certain fields content in this <span> - speak: replacing the linktext, so that i can have a Click here for more ... instead of pageXY?
Btw: I use a linkfield and not the Rich-Text-Editor for setting the link.
You can not map any element nested in previously mapped element.
The fastest solution is mapping the A tag, and wrapping inserted text with <span>|</span> with TypoScript.

TypoScript: select a specific content element from a column

What is the best way to select a single content element?
I have a static html template like this:
<html>
...
<div class="left clearfix">
<h1><img src="fileadmin/templates/images/ueberschrift_startseite.png" alt="Willkommen" /><span>Willkommen</span></h1>
<p>EINLEITUNGSTEXT 1 EINLEITUNGSTEXT 1</p>
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
</ul>
<h3>HEADLINETEXT 3</h3>
<p>TEXT TEXT TEXT TEXT </p>
</div>
...
</html>
In my Backend I have added
A Content Element for the <h1>
A Content Element that should be displayed between the <p> Tags where now Einleitungstext1 is displayed
A Content Element that contains the LI for the UL Section
and so on.
All Elements are in the same column.
I what to take my static HTML Template and fill several SPECIFIC parts with elements that can be edited in the backend.
I hope I could explain what my problem is.
How do you configure your templates? Is there a much better way to replace only specific parts of a static template?
Regards,
Max
I assume that you know how to use marks and subparts in TypoScript, in such case what you have to do is set marks in your template, put each CE in separate column (maybe you'll need to add custom columns if all left, default, right and border (0-3) columns are used for other things) and finally just map these columns to the marks.
tip: TemplaVoila allows for more combinations as you can map not only container for CE's but also other things (header fields, image fields, TS snippets etc.)

Using references in GitHub wiki with restructured text

I'm trying to use internal references to link an index atop my wiki page with several sections within the document. Here's an example:
* `My index`_
+ Foreword_
+ `Technical details`_
My index
--------
Foreword
~~~~~~~~
Technical details
~~~~~~~~~~~~~~~~~
If I generate the HTML page via rest2html I get the right result. However, GitHub wiki inserts extra words in the references and the links do not work. for example:
https://github.com/myaccount/myproject/wiki/Page#wiki-my-index
https://github.com/myaccount/myproject/wiki/Page#wiki-foreword
https://github.com/myaccount/myproject/wiki/Page#wiki-technical-details
I couldn't find any relevant document in the GitHub page, so I'm kind of lost.
It looks like the class ids are missing from the generated divs. Check the page source to (not) see them. I think this is what it should look like:
<ul>
<li><dl class="first docutils">
<dt><a class="reference internal" href="#my-index">My index</a></dt>
<li><a class="reference internal" href="#foreword">Foreword</a></li>
<li><a class="reference internal" href="#technical-details">Technical details</a></li>
</ul>
<div class="section" id="my-index">
<h1>My index</h1>
</div>
<div class="section" id="foreword">
<h2>Foreword</h2>
</div>
<div class="section" id="technical-details">
<h2>Technical details</h2>
</div>
Edit: User intuited mentions the same issue in a GitHub markup issue
I've noticed this problem with README.rst files as well. As well as
headings, inline targets in .rst files, e.g. _some target, don't
work. The inline target text gets wrapped in a but doesn't get
made into any sort of link target. Should I file this as a separate
issue?