Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-29465

Info / tip / warning / note (.aui-message) panels does not respect floating elements

      In previous versions of Confluence, when you floated a panel to the right of a page and put an info box in the page, the width of the panel respected the floated panel, and would not overlap with it. In newer versions of Confluence, only the contents of the info panel do - the border still overlaps with floating elements. I have attached a screenshot to indicate what I mean.

      STR:

      1. Create a page and in it put a panel at the top with loremipsum.
      2. Underneath put some loremipsum.
      3. Underneath that put an info panel and put some loremimpsum in that. Save the page.
      4. In the developer view of your browser, target the div for the first panel and assign it {float: right; width: 20%}

        . It will now float to the right of the page.

      Note that the loremipsum in the body of the page does not overlap with the panel, but the info box does. This is incorrect behaviour.

      EDIT
      Despite spending some time looking at it yesterday I have just figured out how to workaround it. You should set

      {overflow: auto}

      to .aui-message. This is a bit of a CSS hack, tbh, but it works.

          Form Name

            [CONFSERVER-29465] Info / tip / warning / note (.aui-message) panels does not respect floating elements

            Thanks thogek for letting us know that this is still an issue. This was part of a bulk close; we looked at a sample of bugs related to the editor and noted that they were now obsolete due to newer features or had been fixed in an updated version of the editor. As mentioned, there was always a chance that not all issues had been resolved and we can reopen if the issue persists - please let me know what version of Confluence you are running. Thank you.

            Makisa Appleton added a comment - Thanks thogek  for letting us know that this is still an issue. This was part of a bulk close; we looked at a sample of bugs related to the editor and noted that they were now obsolete due to newer features or had been fixed in an updated version of the editor. As mentioned, there was always a chance that not all issues had been resolved and we can reopen if the issue persists - please let me know what version of Confluence you are running. Thank you.

            Tom Kiefer added a comment -

            ...we suspect that this issue is no longer relevant or was resolved...

            This suspicion is incorrect.
            The described buggy behavior still exhibits and is very frustrating.

            Did anyone actually validate this issue before closing it?

            Tom Kiefer added a comment - ...we suspect that this issue is no longer relevant or was resolved... This suspicion is incorrect. The described buggy behavior still exhibits and is very frustrating. Did anyone actually validate this issue before closing it?

            Atlassian Update - September 2019

            Thank you for your interest in this ticket. The Confluence Server and Data Center team released a major upgrade to the editor in 6.14. Due to the age of this ticket and/or lack of updates, we suspect that this issue is no longer relevant or was resolved as a result of the upgrade and are now closing this ticket.

            If this issue is still a problem in your Confluence instance in version 6.15 or later, please tag me in your comment and we can reopen this ticket for review.

            You can read more about the editor upgrade in the 6.14 Release Notes.

            Thanks

            Makisa Appleton | Senior Product Manager, Confluence Server and Data Center

            Makisa Appleton added a comment - Atlassian Update - September 2019 Thank you for your interest in this ticket. The Confluence Server and Data Center team released a major upgrade to the editor in 6.14. Due to the age of this ticket and/or lack of updates, we suspect that this issue is no longer relevant or was resolved as a result of the upgrade and are now closing this ticket. If this issue is still a problem in your Confluence instance in version 6.15 or later, please tag me in your comment and we can reopen this ticket for review. You can read more about the editor upgrade in the 6.14 Release Notes . Thanks Makisa Appleton | Senior Product Manager, Confluence Server and Data Center

            I stumbled into the same problem. Thanks, Steve, for the workaround.
            We're using a tiny div-element - containing a TOC of the page - that is floating on the right of the content.

            Kirstin Seidel-Gebert added a comment - I stumbled into the same problem. Thanks, Steve, for the workaround. We're using a tiny div-element - containing a TOC of the page - that is floating on the right of the content.

            While it's great that we have the ability to create columns using page layouts and sections, these have their drawbacks. Layouts apply to the entire page, so if you only want to put something on the side of the page for part of the page, you can't as you have a massive gutter down one side of the page for the rest of it. With sections/columns you can have them set for part of the page but if the side column is taller than the main body of the page then the body will be filled with white space.

            My solution to this was to write a simple user macro which encloses the body of the macro in a div, which then has the ability to attach a float style to it. This means it creates a column but doesn't take up any more room than it has to.

            It's not that the info macro needs the ability to float, it just needs to not overlap with elements that are floating. It used to do this in 4.3.7, but not in 5.1.2. The ability to float things in Confluence is not native, I agree, but it's very basic HTML styling and so I think your macros and other page elements should be compatible with them.

            Steve Goldberg added a comment - While it's great that we have the ability to create columns using page layouts and sections, these have their drawbacks. Layouts apply to the entire page, so if you only want to put something on the side of the page for part of the page, you can't as you have a massive gutter down one side of the page for the rest of it. With sections/columns you can have them set for part of the page but if the side column is taller than the main body of the page then the body will be filled with white space. My solution to this was to write a simple user macro which encloses the body of the macro in a div, which then has the ability to attach a float style to it. This means it creates a column but doesn't take up any more room than it has to. It's not that the info macro needs the ability to float, it just needs to not overlap with elements that are floating. It used to do this in 4.3.7, but not in 5.1.2. The ability to float things in Confluence is not native, I agree, but it's very basic HTML styling and so I think your macros and other page elements should be compatible with them.

            Hi Steve,

            Would you clarify what you were trying to achieve? Are the CSS customizations being applied to test the development of a plugin?

            Or if it is just to format a page, what tool are you using to keep the CSS in place for the instance/space/page?

            I agree that if the macro does not have specific options to allow the "float", the object will not be considering it.

            Thanks in advance,
            Renan

            Renan Battaglin added a comment - Hi Steve, Would you clarify what you were trying to achieve? Are the CSS customizations being applied to test the development of a plugin? Or if it is just to format a page, what tool are you using to keep the CSS in place for the instance/space/page? I agree that if the macro does not have specific options to allow the "float", the object will not be considering it. Thanks in advance, Renan

              Unassigned Unassigned
              4c44925d5073 Steve Goldberg
              Affected customers:
              4 This affects my team
              Watchers:
              7 Start watching this issue

                Created:
                Updated:
                Resolved: