[javascript] How to right align items in a custom dialog? SOLVED

[Mathew]

Is there a way to make custom dialog elements space over to the right margin of the dialog if there is more than one thing on that line? Here's an example dialog to show what I mean:

image.png

The first input box, if I put it at the end of the line (ie the last item), it can grow to fit if I use alignment='align_fill'.
But if any other element on the line (such as a gap element) is given 'align_fill', that element will not grow.

Is there a way, or some other alignment or align_children setting that I'm missing?

The reason I'm trying to do this is if I don't know how wide a button, for example, will be to fit in the necessary text (ie with translations), I can't manually space it to the right by working out an exact width of gap element. Ideally, there'd be a way to make the 'gap' element auto-size to fit. Because the OK and Cancel buttons can do this, I'm hoping there's a way; I just can't find it.

To reproduce the example dialog:

Code: Select all

// filling to fit space - custom dialog

{
  const dia = {
    initialize() {
    },
    commit() {
    },
    description: { name: "expand to fit", elements: [
      { type: 'static_text', name: "The following has the right-most element 'align_fill', and fills the available space (works with popup, edit_text, static_text) but only if it's right-most:", width: 400},
      { type: 'view', align_children: 'align_row', width: 400, elements: [
        { type: 'gap', width: 100},
        { type: 'edit_text', alignment: 'align_fill'}
      ]},
      { type: 'static_text', name: "The following has the left-most element 'align_fill'. Doesn't work for anything I can tell:", width: 400},
      { type: 'view', align_children: 'align_row', width: 400, elements: [
        { type: 'gap', alignment: 'align_fill'},
        { type: 'edit_text', width: 100}
      ]},
      { type: 'view', align_children: 'align_row', width: 400, elements: [
        { type: 'static_text', alignment: 'align_fill', name: "text"},
        { type: 'ok', width: 100}
      ]},
      { type: 'static_text', name: "The default ok and cancel buttons will right align by default, unless there's something on the same line:", width: 400},
      { type: 'ok_cancel', width: 100},
      { type: 'view', align_children: 'align_row', width: 400, elements: [
        { type: 'static_text', alignment: 'align_fill', name: "same line"},
        { type: 'ok_cancel_other', width: 100}
      ]},
    ]}
  };
  
  app.execDialog(dia);
}

[Mathew]

Incidentally, while Acrobat makes a mess of the static_text (it ignores the width), it does seem to expand the gap element to fit (see the second input box). It gets the position of the OK button wrong though (treats it as zero width, it looks like):

image.png

[Daniel - PDF-XChange]

Hello, Mathew

Thank you for the post, I have raised this inquiry to the Dev team for explanation - we will get back to you as soon as they have a reply.

It looks like this investigation is being treated as a bug, so here is a ticket number!

RT#7897: JS: Alignment issues in Custom window

Kind regards,

[Ivan - Tracker Software]

Fixed in 11.1.0

image.png

[Mathew]

wow very nice

[Daniel - PDF-XChange]