Opened 15 years ago
Closed 15 years ago
#8141 closed defect (fixed)
Div processor wraps text in <p> tag
| Reported by: | Owned by: | Remy Blank | |
|---|---|---|---|
| Priority: | normal | Milestone: | 0.12 |
| Component: | wiki system | Version: | 0.11.2.1 |
| Severity: | normal | Keywords: | wikiprocessor div |
| Cc: | Branch: | ||
| Release Notes: | |||
| API Changes: | |||
| Internal Changes: | |||
Description (last modified by )
I wanted to put some text inside a box on my wiki using the #!div processor. I noticed that if I put the following in my wiki:
Test text
The text "Text text" does appear in a box, but the generated html is:
<div style="border: 1px solid #d7d7d7; padding: 0"><p> Test text </p> </div>
Because the text is wrapped in a <p> tag, there is a big gap between the text and the top and bottom boundary of the box. In other words, the box does not hug the text on the top and bottom. I feel like this gap shouldn't exist. If you want it there, you can always add padding, or add [[BR]] in your text, but there doesn't seem to be a way to remove it. If you don't agree, can someone direct me to where the html is generated so I can remove it in my trac source?
My motivation is that I wanted wiki formatted text in a box that was laid out in a manner similar to text in symbols (with no processor specified). In that case, the text is all monospace, but there are no <p> tags, and hence no gap.
I am using trac 0.11.2.1 on Linux, Python 2.5.2. This is my first ticket, sorry if I didn't do something properly…
Thanks for your help Milad
Attachments (0)
Change History (8)
comment:1 by , 15 years ago
comment:2 by , 15 years ago
| Keywords: | wikiprocessor div added; layout removed |
|---|---|
| Milestone: | → 0.12 |
The proposed change seems OK.
comment:4 by , 15 years ago
| Description: | modified (diff) |
|---|
comment:5 by , 15 years ago
That's actually quite tricky. Just stripping the leading <p> and trailing </p> from the generated content Markup doesn't work, as the <div> can contain more than one paragraph, and the HTML then becomes invalid. For example:
{{{
#!div class=important
First paragraph
Second paragraph
}}}
This results in the following HTML:
<div class="important"><p> First paragraph </p> <p> Second paragraph </p> </div>
So we would have to parse the Markup content, see if there's only a single child <p> and only then, remove it. Not so nice.
I have been playing with negative margins and other tricks, but finally gave up. So at this point, my suggestion would be to add a .textbox class, with the following entry in the CSS:
div.textbox > p:first-child { margin-top: 0 } div.textbox > p:last-child { margin-bottom: 0 }
Then, the box could be done with the following:
{{{
#!div class="textbox" style="border: 1px solid #d7d7d7; padding: 0"
Test text
}}}
Any better ideas?
comment:6 by , 15 years ago
Not about the CSS, but maybe I can propose a better naming: "textbox" rather suggests the opposite of what it does (putting the contained block in some box which stands out of the rest). So I'd rather use something like "compact" or "seamless".
Be sure to make a note on 0.12/WikiHtml about the new class.
comment:8 by , 15 years ago
| Resolution: | → fixed |
|---|---|
| Status: | new → closed |
The documentation has been updated in 0.12/WikiHtml@2.
Sorry, I forgot to put my example in curly braces. The example was:
{{{ #!div style="border: 1px solid #d7d7d7; padding: 0" Test text }}}But you can see the gap in the summary. Also the final paragraph should read:
My motivation is that I wanted wiki formatted text in a box that was laid out in a manner similar to text between 3 curly-braces (with no processor specified). In that case, the text is all monospace, but there are no <p> tags, and hence no gap.