Imageset Edit box alignment

[Rakkar]

In the imageset file, I made a new image for "EditBoxLeft" where the width is pretty big:

<Image Name="EditBoxLeft" XPos="3" YPos="260" Width="59" Height="73" XOffset="20"/>

But when I type in the edit box, the cursor's origin is at the left edge of "EditBoxLeft" and not at the left edge of "EditBoxMiddle" as it should be, so you end up typing over the left border, and although I didn't check, probably the right too.

How do I make the cursor stay within "EditBoxMiddle" or at least define offsets so I don't type over the edges?

Also, what is XOffset for? As far as I can tell all that happens is that it subtracted from XPos and does no good.

[Pompei2]

In the look'n'feel file,at the definition of the editbox, there is this:

Code: Select all

<NamedArea name="TextArea">
   <Area>
       <Dim type="LeftEdge" ><AbsoluteDim value="5" /></Dim>
       <Dim type="TopEdge" ><AbsoluteDim value="5" /></Dim>
       <Dim type="RightEdge" ><UnifiedDim scale="1.0" offset="-5" type="RightEdge" /></Dim>
       <Dim type="BottomEdge" ><UnifiedDim scale="1.0" offset="-5" type="BottomEdge" /></Dim>
    </Area>
</NamedArea>


Change this to your needs.

[Rakkar]

This doesn't work because it doesn't scale with the screen resolution. For a left edge of 58 pixels at 1600x1200

<Dim type="LeftEdge" ><UnifiedDim scale="0.0" offset="58" type="LeftEdge" /></Dim>

Goes twice as far as it should at 800x600.

[Rackle]

Have a read through Skinning part 2, particularly the Text section.

We start out with the left edge. In the frame we used the image named EditboxL for the left edge. And as the area we want to define is to lie inside the frame, we'll use the width of this specific image as the left edge of our area. The XML for this ImageDim is like so:

In the following snippet you'll need to replace MyImages with an appropriate name.

Code: Select all

<ImageDim imageset="MyImages" image="EditBoxLeft" dimension="Width" />

I've never done this myself so I don't know what I'm talking about; hopefully I'm right on the mark.

[Rakkar]

I got it working. It should have been setup like this to begin with

Code: Select all

<Area>
   <Dim type="LeftEdge" ><ImageDim imageset="GalacticMeleeLook" image="EditBoxLeft" dimension="Width" /></Dim>
   <Dim type="TopEdge" ><AbsoluteDim value="5" /></Dim>
   <Dim type="RightEdge" >
      <UnifiedDim scale="1" type="RightEdge">
          <DimOperator op="Subtract">
              <ImageDim imageset="GalacticMeleeLook" image="EditBoxRight" dimension="Width" />
          </DimOperator>
      </UnifiedDim>
  </Dim>
   <Dim type="BottomEdge" ><UnifiedDim scale="1.0" offset="-5" type="BottomEdge" /></Dim>
</Area>


[Rakkar]

I take that back - it still doesn't work. The right edge is too far away, but the left edge is ok.

[Rackle]

Let's say that the left edge measures 10 and the right edge measures 15. And let's say that the EditBox is rendered and takes a total of 100.

The middle's left position is the width of the left edge, making it x = 10. It's width is set to 100%, making it 100, to which we substract the 10 from the left edge; it's final width is 90. The x position of its right side is 10 + 90 = 100, which is on top of the right edge.

The solution is to substract the right edge's width from the middle's width; there needs to be a second substraction.

Well, that's what I think anyway...

[Pompei2]

That would be right if he had set <Dim type="Width" > but he has done it right: <Dim type="RightEdge" >
At first look, your code looks ok maybe try to find out a relation between the "too far away" and all sizes you know (the images widths, the widget width etc.) that can help us to find out what's doing wrong.