Text Box Positioning

[RussGuill]

Maybe I'm too much of a Word user, but is there a way in Flare 4 to click-and-drag a text box to place it just where I want? Sometimes we have text boxes (in Word) that are not aligned to any margin and may need to move based on content.

[LTinker68]

In Flare (and HTML) there aren't "text boxes". What you want is a DIV, specifically, one set to float in relation to the text. The problem, however, is that Word doesn't recognize the HTML tag <div>, so anything inside the DIV won't appear in Word. At least, it was that way in v3.1. I haven't played with the new print options in v4, so I'm not sure if the print layouts give you a way to do that or if they've now developed a way to get Word to recognize the <div>.

You might want to read up on the print layouts feature in v4 to see if there's something there that can help you.

[RussGuill]

Actually, what I was asking was regarding the ability to drag a text box (which is what they're called in Flare 4 although they are just divs) to the exact position I need (like you can in Word) instead of only working within the contraints of the stylesheet.

I didn't see anything in the help file that directed me towards this type of functionality so I imagine it doesn't exist.

What I'm trying to do is get a text box (div) in the upper right hand corner but about 15 px down from the top and in from the right margin.

[LTinker68]

Are you in the web layout or print layout when you're trying to do that?

[NorthEast]

Actually, what I was asking was regarding the ability to drag a text box (which is what they're called in Flare 4 although they are just divs) to the exact position I need (like you can in Word) instead of only working within the contraints of the stylesheet.

I didn't see anything in the help file that directed me towards this type of functionality so I imagine it doesn't exist.

What I'm trying to do is get a text box (div) in the upper right hand corner but about 15 px down from the top and in from the right margin.

Float the div to the right, and set its top and right margins to 15px.

[RussGuill]

Cool, that works, thanks!

Is there any way to make the text box overlap on top of an image? Can't seem to make that happen.

[LTinker68]

Is there any way to make the text box overlap on top of an image? Can't seem to make that happen.

Change the z-index property on the DIV. A DIV with a z-index of 4, for instance, will be in front of (above) a DIV with a z-index of 3, and a DIV with a z-index of 5 will be in front of a DIVs with z-indexes of 4 or 3, and so on.

[RussGuill]

What if the image I want to overlap on top of is not in a div? Does this approach not work? Can only divs overlap other divs?

[LTinker68]

Think of the z-index like the floors of a building. By default, everything is at z-index = 1 (the ground floor), and since everything is on the same floor, then you can't overlap elements. If you want to overlap text or an image over something, then you move the overlapping text/image to the second floor by putting the text/image in a DIV and setting the z-index of that DIV to 2. If you want something to overlap the first element as well as the DIV you just created, then you put the new element in another DIV and set its z-index to 3.

I think DIVs are the only tag you can add a z-index to, although I'm not positive. It's definitely the one I'm most used to using.

[KevinDAmery]

What if the image I want to overlap on top of is not in a div? Does this approach not work? Can only divs overlap other divs?

You can wrap an image in Div tags without affecting its appearance if you want, so the simplest approach would be to create a div and assign it a depth.

[RussGuill]

You can wrap an image in Div tags without affecting its appearance if you want, so the simplest approach would be to create a div and assign it a depth.

Is there a way to do this without getting into the code or reinserting the image into the new div?

[KevinDAmery]

You should be able to select the image then hit Tab - this will open a dialog where you can select from a list of container types. Div will be one of them.

[LTinker68]

That'll just be a generic DIV, though. Before you do that, I recommend you open the Stylesheet Editor, create a new class under the DIV tag, and set its z-index to 2 or something. Back in the topic, when you do what Kevin says, you'll then see the custom DIV class that you created as an option that you can select.

[RussGuill]

I've tried changing the z-index values in separate div styles but I can't get any overlapping to happen. This is almost becoming more trouble than it's worth, but I thank you and Kevin for your help.

I figure that if I can't make this happen easily, how can I expect anyone else in my group to use Flare for printed documentation.

[LTinker68]

You won't see the z-index effect in the XML Editor. You possibly would see it in Preview but would definitely see it in the output. Calculating the z-index is kind of a run-time thing and the XML Editor can't display real-time effects.

[RamonS]

In this case it is almost essential to see the effect at least in the preview. If that is not the case I recommend adding that as a feature request here:
https://www.madcapsoftware.com/bugs/submit.aspx

[RussGuill]

Thanks everybody! I appreciate the help.

I submitted this whole thing as an enhancement request because I think there should be a better way to work with text boxes. Because if I have to map out every object like I'm playing Battleship, then I'll just stick with Word. At least I'm familiar with the occasional quirks. Right now, the workflow with Flare to do our printed doc is a little tedious right now. But if someone can show me how to get around this, and easily adjust my workflow, I'm all ears.

[teknikulriter]

I realize I'm 15 years too late for this conversation, but how do you accomplish this in Flare? None of the solutions above worked.