Image size changes when using backspace...

[Dave1975]

Hi everyone,

Since a couple of months I have been enduring a quite annoying issue in Flare which I've finally decided to try and tackle, hopefully with some help from this community.

To insert user notifications in topics I have set up a snippet which I then drag into to the topic and convert to text to adapt the wording to the situation.

The snippet holds a table. In the first column I inserted a notice symbol. The 2nd column holds the actual notice text.

If I insert the table into a topic and I click in the notice text cell to start editing everything works find until I use the backspace key to remove a piece of text. With every click of that keyboard button the image in the first column grows in size until it becomes so big that it almost fills the entire window. See attached screenshot.

Only if I right click on the image and explicitly re-apply the style class, the image jumps back to its correct size.

When the issue occurs I don't see any change to the xml code whatsoever. I see the left column visibly change size but the indicated width stays the same.

The image has the following CSS class:

Code: Select all

img.Mid
{
	mc-thumbnail-max-height: 50vw;
	mc-thumbnail: none;
	max-width: 45vmax;
	max-height: auto;

I'm using the viewport uom now but used to have a max size defined in pixels and that change hasn't had any impact.

I'm not sure if the table properties would play a role here, so I didn't insert that code yet but I can do so if required.

For the past 5 years I've been using this technique to insert notifications and I never had this problem so far.

If anyone can point me in the right direction I would appreciate it.

thank you

Best regards

Dave

[NorthEast]

If it worked previously for 5 years with no problems, then what did you change?
(e.g. install a new Flare version, change the CSS, or something else)

Looking at the CSS:
* If you're not using thumbnails, then both mc-thumbnail properties aren't doing anything and can be removed.
* The max-height: auto; is invalid CSS as there's no 'auto'.

So the only part of the CSS that seems to do anything is:

Code: Select all

max-width: 45vmax;

That'll specify the maximum width of the image is 45% of the viewport width or height (whichever is largest).
So you're allowing the image to grow pretty large, to nearly half the screen width/height.

Now, if you don't set a width on the table columns, then the browser (or Flare's editor) can automatically size the columns depending on what's in them.
That means your image can vary in size too, as it'll be allowed to fill the width of the column until it reaches the maximum width (of 45vmax).

[Dave1975]

Hi Dave,

It worked for 5 years in my previous company. Unfortunately I was not able to take my CSS along to my new workplace so I had to kind of recreate the set up from memory in the newest version of Flare. Possibly a setting slipped my mind.

I indeed need to cleanup the CSS, there are a number of leftovers from previous experiments.

So if I understand correctly I should be looking at the width of that column in the snippet table rather than at the image itself. I will try that next.

Only I'm not sure what the behavior will be in responsive output if I sent a fixed width to that column.

best regards

Dave

[NorthEast]

The problem is that the image is being allowed to grow to an extremely large size - a max-wdith of 45% of the screen width/height is pretty big.

The image is presumably quite large by default, and since you're not specifying an actual width or height, then its size is only limited by that max-width.

So if the image is used in a space where it can occupy up to 45% of the width/height, then it will do that.
Its size will vary according to the available space, which is why it changes size when you edit the table.

For me, it would make sense to specify a width in image CSS, or a much smaller max-width, and use units like em so its size is set in proportion to the font size (and not the screen dimensions).

But I don't know how you want the image to look.

[Curlyshell]

Just in case...did you render the output to make sure it's not an artifact of the preview editor?