Setting of Position: Absolute is cutting off text

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
ktbCA57
Sr. Propeller Head
Posts: 473
Joined: Wed Feb 04, 2009 7:45 am

Setting of Position: Absolute is cutting off text

Post by ktbCA57 »

We have an online help system created. We suddenly found that the footers were floating up to meet the last text on the page. That's not what we wanted. We want the footer to stay at the bottom of the window. We contacted Madcap Tech Support and there seemed to be an easy solution: set "Position" to "Absolute":

div.topic-footer
{
padding: 1% 1%;
border-left: solid 0px #ae1f33;
margin-left: 0px;
margin-right: 0px;
bottom: 0;
margin-top: 0px;
position: absolute;
width: 100%;
margin-bottom: 0px;
padding-bottom: 0px;
background-color: #ffffff;
}

That worked GREAT... UNTIL... we discovered that our dropdown text was being cut off at the bottom of the page. We found a workaround to just add blank lines at the bottom of the page. However, we've never had to do that before. We reported this to tech support and they said the fix for the cut off text was to remove the setting of "absolute" as noted above. That's great, but then our footers float again.

When we mentioned this, we were then told we are asking for a customization. We don't understand why this is a customization when it's an actual CSS setting that's causing the issue.

Has anyone else had this issue? IS this a customization? We just don't see that it's a customization rather than a bug - their setting is cutting off certain TYPES of text unless we add blank lines. Thanks!
AlexFox
Sr. Propeller Head
Posts: 164
Joined: Thu Oct 19, 2017 1:56 am

Re: Setting of Position: Absolute is cutting off text

Post by AlexFox »

Yes this is a frustrating issue with Flare and dropdowns. I recommend you use flex for your layouts in a column with the footer being aligned with the flex-end. Flex is amazing and solves all sorts of layout problems such as this. Excellent help for flex is here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Post Reply