Fix overlapping lists and floating content
- Applies to:
- All MindTouch Versions
- Role required:
- Admin
Add CSS to fix overlapped list items when an image or other content is floated on a page.
Site Admin steps
- Navigate to Site Tools > Control Panel > Custom Site CSS.
- Add the following CSS code on a new line at the bottom of the All Roles CSS field:
.mt-overflow-auto { overflow: auto; }
- Click Save.
Page-level steps
- Open the impacted page in Edit mode and select View > Source.
- Add the following text in the list tag (<ol> or <ul>):
class="mt-overflow-auto"
- The list should look something like this:
<ul class="mt-overflow-auto"> <li>Item 01</li> <li>Item 02</li> <li>Item 03</li> </ul>
- Save.
Examples
Example Before Fix
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis, ligula ac convallis ornare, dui tortor tincidunt dolor, nec laoreet dui nunc vitae tortor. Donec eu massa id est faucibus ultricies a nec nibh.
- A list item
- A list item
- A list item
- A list item
Example After Fix
Lorem ipsum dolor sit amet, consecteturadipiscingelit. Maurismattis, ligula ac convallisornare, duitortortincidunt dolor, neclaoreetduinunc vitae tortor. Doneceumassa id estfaucibusultricies a necnibh.
- A list item
- A list item
- A list item
- A list item