Edgewall Software
Modify

Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#7970 closed defect (fixed)

Convoluted CSS for wikipage margins causes problems for #!div

Reported by: Jennifer Drummond <jenn@…> Owned by: Christian Boos
Priority: normal Milestone: 0.11.4
Component: rendering Version: 0.11.1
Severity: minor Keywords: css
Cc: nicolas.alvarez@… Branch:
Release Notes:
API Changes:

Description

If I try to wrap wiki headers in a !#div whose borders are visible, like if I'm putting a box or background color on a chunk of markup, the headers extend to the left of the border of the div. Sample code:

{{{
#!div style="background: #bcf"
== Header inside div ==
Sample text
}}}

See the attached screenshot for how this renders on my system, in case there's something idiosyncratic about it.

It seems that the headers have margin-left -18px, and the rest of the content has margin-left 18px (thanks to Eric Bray for helping me find that in the CSS).

I can't figure out how to fudge the div to make it encompass the whole header. I tried giving the div itself a negative margin, and that doesn't seem to change the display in any way.

Attachments (1)

header-hanging-outside-div.png (2.0 KB ) - added by Jennifer Drummond <jenn@…> 11 years ago.
Screenshot of the sample code as it renders

Download all attachments as: .zip

Change History (11)

by Jennifer Drummond <jenn@…>, 11 years ago

Screenshot of the sample code as it renders

comment:1 by Christian Boos, 11 years ago

Keywords: css added
Milestone: 0.11.3
Severity: normalminor

The actual problematic CSS is:

/* Wiki */
.wikipage { padding-left: 18px }
.wikipage h1, .wikipage h2, .wikipage h3 { margin-left: -18px }

(source:trunk/trac/htdocs/css/trac.css@7605#L301)

It looks like the same layout can be achieved without the unwanted side-effect, using the following:

/* Wiki */
.wikipage > * { margin-left: 18px }
.wikipage h1, .wikipage h2, .wikipage h3 { margin-left: 0 }

The only catch I can see is that in your example, the h2 embedded in your div will be aligned with the content. If you want to have the headers shifted to the left, you can simply re-add the "wikipage" class to that div:

{{{
#!div style="background: #bcf; padding: 1em" class="wikipage"
== Header inside div ==
Sample text
}}}

comment:2 by Christian Boos, 11 years ago

Milestone: 0.11.40.11.3

comment:3 by Christian Boos, 11 years ago

Owner: set to Christian Boos

comment:4 by Christian Boos, 11 years ago

Resolution: fixed
Status: newclosed

Patch from comment:1 applied in r7820.

comment:5 by nicolas.alvarez@…, 11 years ago

Cc: nicolas.alvarez@… added

I think the fix broke more than it solved. Blockquotes aren't indented anymore, and citations are negatively indented (they show more to the left than normal text). The problem is visible in this very website.

comment:6 by anonymous, 11 years ago

Wrapping <blockquote> tags in a dummy <div> fixes the problem, because the <div> gets the margin-left: 18px, and the blockquote's own margin gets added to those 18px. Currently, the blockquote margin overrides the margin from the .wikipage > * selector.

comment:7 by Christian Boos, 11 years ago

Resolution: fixed
Status: closedreopened

Yeah, I've also noticed that the blockquotes where broken, but failed to relate this to that change. Thanks for the heads up.

comment:8 by Christian Boos, 11 years ago

Milestone: 0.11.30.11.4
Status: reopenednew

r7820 reverted in r7942.

We'll try to find a better solution, in the meantime add class=wikipage to your div.

Now that I think about it, maybe the solution would even be to add that wikipage class systematically?

  • trac/wiki/formatter.py

     
    788788                values = [v and v[0] in '"\'' and v[1:-1] or v
    789789                          for v in args[1::2]]
    790790                args = dict(zip(keys, values))
     791                if 'class' not in args:
     792                    args['class'] = 'wikipage'
    791793                self.code_processor = WikiProcessor(self, name, args)
    792794            else:
    793795                self.code_buf.append(line)

Seems to work fine.

comment:9 by Christian Boos, 11 years ago

Milestone: 0.11.60.11.4

comment:10 by Christian Boos, 11 years ago

Resolution: fixed
Status: newclosed

Applied patch from comment:8 in r7944.

Modify Ticket

Change Properties
Set your email in Preferences
Action
as closed The owner will remain Christian Boos.
The resolution will be deleted. Next status will be 'reopened'.
to as closed The owner will be changed from Christian Boos to the specified user.

Add Comment


E-mail address and name can be saved in the Preferences .
 
Note: See TracTickets for help on using tickets.