CSS in Flare shows Flex property as invalid

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
AnjanaDevarakonda
Propeller Head
Posts: 29
Joined: Sun Apr 12, 2015 3:21 pm

CSS in Flare shows Flex property as invalid

Post by AnjanaDevarakonda »

Hi Guys,

I have been working on adding a feedback button to the masterpage of my webhelp. I wrote the HTML and CSS for it on codepen and when I was trying to implement the same in Flare, it showed this error message:

..\Content\Resources\Snippets\FooterFeedback.flsnp: CSS: Invalid display: flex

What's surprising is that the code works just fine on a colleague's project and the output shows up as expected. Have any of you faced such an error?

Here's the css it is referring to:

.modal__overlay {
background: rgba(0,0,0,0.4);
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
text-shadow: none;
top: 0;
z-index: 600;
display:flex;
justify-content:center;
align-items:flex-end;
}

Thanks,
Anjana
atomdocs
Sr. Propeller Head
Posts: 308
Joined: Tue Jun 18, 2013 3:00 am
Location: Eastern Seaboard, Thailand
Contact:

Re: CSS in Flare shows Flex property as invalid

Post by atomdocs »

Hi Anjana

Yes, I use flexbox and I get an error message. I just ignore it. As you say, the flexbox CSS displays correctly in output. The preview function in Flare also works ok, to assist you while working.

I expect this is normal, flexbox only reached candidate recommendation status last month, so maybe it is a bit early for the Flare UI to recognise it. I don't know what MadCap's process is for new properties. Note that you will see "flex" for the display property in the Flare stylesheet editor, but you cannot actually choose flex through the editor (it always showed up in v11, but in v12, it seems not to display in the default medium, but if you open another medium next to it, you will see "flex")

But as it compiles ok in the output, I plan to keep using it - hope you will too, it is a brilliant positioning tool :)
Tom
Flare 2022, Capture 7
Image
ashb
Jr. Propeller Head
Posts: 7
Joined: Wed Dec 09, 2015 4:31 pm

Re: CSS in Flare shows Flex property as invalid

Post by ashb »

Hi,

Does anyone know if there is a way to suppress this message? I get it ever time I open a topic.

Ashley
jimgilliam
Propeller Head
Posts: 89
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Re: CSS in Flare shows Flex property as invalid

Post by jimgilliam »

Years and years later... and this issue still exists.
:flare:
StormCloud79
Propeller Head
Posts: 21
Joined: Mon Feb 15, 2021 5:11 am

Re: CSS in Flare shows Flex property as invalid

Post by StormCloud79 »

Funny I just was getting this error when using flex and thought maybe there was a resolution but clearly not! Glad I'm not the only one to just be ignoring the error!
jimgilliam
Propeller Head
Posts: 89
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Re: CSS in Flare shows Flex property as invalid

Post by jimgilliam »

Yeah, it's very frustrating how Flare allows itself to use Flex in generated content, but it throws its customers the error saying it's invalid. Invalid for us, not for itself.
:flare:
trent the thief
Propellus Maximus
Posts: 614
Joined: Wed Feb 01, 2006 6:21 am
Location: Off in the dark....

Re: CSS in Flare shows Flex property as invalid

Post by trent the thief »

There a feature request to add flex and all its attendant elements. Feel free to climb on :-)

Flare will whine about flex, but will still use it.
Trent.

Certifiable.

Image

umm...
I meant MAD Certified.

Official Propeller Beanie Owner :-)

:flare: Are you on Flare's Slack channels? PM me for an invitation! :flare:
jimgilliam
Propeller Head
Posts: 89
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Re: CSS in Flare shows Flex property as invalid

Post by jimgilliam »

Thanks, Trent. How do I climb on?
:flare:
trent the thief
Propellus Maximus
Posts: 614
Joined: Wed Feb 01, 2006 6:21 am
Location: Off in the dark....

Re: CSS in Flare shows Flex property as invalid

Post by trent the thief »

Start here with a bug that Flare is throwing errors against valid CSS:

https://www.madcapsoftware.com/feedback/bugs/

Then go here and tell them to add flex:

https://www.madcapsoftware.com/feedback ... quest.aspx
Trent.

Certifiable.

Image

umm...
I meant MAD Certified.

Official Propeller Beanie Owner :-)

:flare: Are you on Flare's Slack channels? PM me for an invitation! :flare:
npounraj
Jr. Propeller Head
Posts: 1
Joined: Tue Feb 27, 2024 12:31 am

Re: CSS in Flare shows Flex property as invalid

Post by npounraj »

I am using MadCap Flare 2023. When working on any HTML file, I encounter the following error:
CSS: Invalid display: contents.

Most of the time, it consumes more time for each keystroke. Any help or suggestions are appreciated.
Psider
Propellus Maximus
Posts: 859
Joined: Wed Jul 06, 2011 1:32 am

Re: CSS in Flare shows Flex property as invalid

Post by Psider »

display: contents has very poor support across browsers, so I personally would probably avoid using it. https://caniuse.com/css-display-contents

However, if you really need it you can request for it to be added using the second link Trent provided.
Michael S
Jr. Propeller Head
Posts: 2
Joined: Thu Jan 06, 2022 7:28 am
Location: West Coast, U.S.

Re: CSS in Flare shows Flex property as invalid

Post by Michael S »

I've found a solution until this issue is fixed: Set the display value to block, then use the :is pseudo class to alter the style on build.

In the example below, the div.flexBox style initially displays as a block in Flare. At Build/Preview, div.flexBox:is(div.flexBox) changes the display value to flex, enabling any flex properties in the element.

Code: Select all

div.flexBox
{
display: block:
}

div.flexBox:is(div.flexBox)
{
display: flex;
}
This prevents Flare from reporting the Flex error. Additionally, it makes it easier to edit content in a flex container in Flare.
Post Reply