I want to right-align the label

[Xeon257]

Hello. I am designing a dialog box like the one below.

10-23-2025, 19-03-53.png (446 KiB) Viewed 203 times

The goal is to right-align the yellow text in this window.

First, I created the text portion of the window using a table, as shown below.

Code: Select all

dialog.create = function(name, sprite, player)
  if player.gui.screen["ui-dialog-frame"] then return false end

  local frame = player.gui.screen.add {
    type = "frame",
    name = "ui-dialog-frame",
    direction = "vertical",
  }
  frame.style.size = { 800, 600 }
  frame.style.horizontal_align = "center";
  frame.force_auto_center();

    local title_flow = frame.add{
      type = "flow",
      direction = "horizontal",
      style = "horizontal_flow",
    }
    title_flow.style.vertical_align = "center";

      local title_text = title_flow.add {
        type = "label",
        caption = "L.O.R.A.X",
        style = "frame_title",
      }

      local title_drag = title_flow.add {
        type = "empty-widget",
        style = "draggable_space",
      }
      title_drag.style.horizontally_stretchable = true;
      title_drag.style.height = 24;
      title_drag.drag_target = frame;
      title_drag.style.left_margin = 10;
      title_drag.style.right_margin = 10;
      title_drag.style.vertical_align = "center";

      local title_close = title_flow.add {
        type = "button",
        name = "ui-dialog-close",
        caption = "[virtual-signal=shape-diagonal-cross]",
        style = "red_button"
      }
      title_close.style.horizontal_align = "center";
      title_close.style.vertical_align = "center";
      title_close.style.font_color = { 1, 1, 1, 1 };
      title_close.style.size = { 48, 24 }
      title_close.style.left_padding = 0;
      title_close.style.right_padding = 0;
      
  local partner_image = frame.add {
    type = "sprite",
    sprite = sprite,
    resize_to_sprite = false,
  }
  partner_image.style.height = 350;
  partner_image.style.horizontally_stretchable = true;
  partner_image.style.horizontal_align = "center";
  partner_image.style.vertical_align = "center";

  local dialog_flow = frame.add{
    type = "flow",
    direction = "horizontal",
    style = "horizontal_flow",
  }

    local dialog_log_scroll = dialog_flow.add{
      type = "scroll-pane",
      name = name.."ui-dialog_log_scroll",
      horizontal_scroll_policy = "never",
      vertical_scroll_policy = "auto-and-reserve-space"
    }

      local dialog_log_list = dialog_log_scroll.add{
        type = "table",
        name = name.."ui-dialog_log",
        column_count = 2,
      }
      dialog_log_list.style.horizontally_stretchable = true;
      dialog_log_list.style.vertically_stretchable = true;

  return true;
end

Then, I added the text using the following function.

Code: Select all

dialog.add_talk = function(name, player, talk, text)
  local log_list = util_ui.find_gui_element(player.gui.screen, name.."ui-dialog_log")
  if log_list == nil then return end

  if talk == dialog.def.talk.player then
    log_list.add{ type = "label", }
  end

  local log = log_list.add{
    type = "label",
    caption = text,
  }
  
  log.style.vertical_align = "center";
  log.style.horizontally_stretchable = true;
  log.style.height = 24;

  if talk == dialog.def.talk.player then
    log.style.font_color = { 1, 1, 0, 1 };
    log.style.horizontal_align = "right";
  elseif talk == dialog.def.talk.Partner then
    log.style.font_color = { 1, 1, 1, 1 };
    log.style.horizontal_align = "left";
  elseif talk == dialog.def.talk.Partner_Anger then
    log.style.font_color = { 1, 0, 0, 1 };
    log.style.horizontal_align = "left";
  elseif talk == dialog.def.talk.Partner_Friendly then
    log.style.font_color = { 0, 1, 0, 1 };
    log.style.horizontal_align = "left";
  end

  if talk ~= dialog.def.talk.player then
    log_list.add{ type = "label", }
  end
  
  log.focus();
end

When I did this, it seems that the right-alignment of the label text does not work. I’m not sure whether my implementation is incorrect or if Factorio simply doesn’t support it. What might be wrong?

+ I’m also wondering if there’s a way to prevent the player from performing other actions while a GUI window is open. Currently, even when the window is displayed, the player can still move their character or open their inventory. Is it possible to make it behave like a modal dialog?

[Osmo]

horizontal_align controls how the child elements are aligned. So instead of adding labels directly, for each label, add a flow, set its horizontally_stretchable to true and set horizontal_align on it. Then add a label to the flow.

[Xeon257]

It still doesn’t seem to work. Could the order in which styles are applied have an effect?

[Xeon257]

Ah, I solved it. It seems that the direction axis of the flow element needs to be set differently. When I set it to vertical, the horizontally_stretchable property works. Thank you for your answer.

[Xeon257]

I’m also wondering if there’s a way to prevent the player from performing other actions while a GUI window is open. Currently, even when the window is displayed, the player can still move their character or open their inventory. Is it possible to make it behave like a modal dialog?

[Osmo]

You can (and often should) set player.opened to your gui. That will make pressing e and escape, as well as opening any other gui send the on_gui_closed event, so opening other guis is not an issue.

As for blocking other actions such as moving, it depends on what you want to do. Maybe its not even needed, maybe placing the player in remote view is enough, maybe you need to remove movent permissions while it is open (probably not).