Skip to content

jsdialog: fix menubutton alignment with other controls in grids#15148

Open
caolanm wants to merge 2 commits intomainfrom
private/caolan/align_menubuttons_and_comboboxes
Open

jsdialog: fix menubutton alignment with other controls in grids#15148
caolanm wants to merge 2 commits intomainfrom
private/caolan/align_menubuttons_and_comboboxes

Conversation

@caolanm
Copy link
Copy Markdown
Contributor

@caolanm caolanm commented Mar 21, 2026

The broad button selector in btns.css matched jsdialog menubuttons, overriding their margin and width. This caused menubuttons to be offset by 5px from comboboxes and listboxes in the same grid column, since those are div elements that do not match the btns.css selector.

Exclude .menubutton from the btns.css catch-all so menubuttons only get their jsdialogs.css styling. Also fix the menubutton rule to use the standard control height (32px), font size, and padding to match other controls, start-align the content, and push the dropdown arrow to the end of the button.

Add a regression test that asserts the menubutton and listbox-container share the same left edge in the Border tab of the Character dialog.

Change-Id: I3ca1a8c46f905f849d08d087f79ad940d8e2ee57

  • Resolves: #
  • Target version: main

Summary

TODO

  • ...

Checklist

  • I have run make prettier-write and formatted the code.
  • All commits have Change-Id
  • I have run tests with make check
  • I have issued make run and manually verified that everything looks okay
  • Documentation (manuals or wiki) has been updated or is not required

@smehrbrodt
Copy link
Copy Markdown
Contributor

This fixes the alignment of the color boxes in the sparkline dialog too, good.

However, the text seems to have a fixed width now - longer text should expand the widget, not break into multiple lines.

Bildschirmfoto vom 2026-03-26 16-13-19

@caolanm caolanm force-pushed the private/caolan/align_menubuttons_and_comboboxes branch from d3c5cb5 to 8bc5982 Compare March 28, 2026 20:33
@caolanm
Copy link
Copy Markdown
Contributor Author

caolanm commented Mar 28, 2026

That new commit solves the text wrapping issue I believe

@smehrbrodt
Copy link
Copy Markdown
Contributor

Looks good now, thanks!

@caolanm caolanm force-pushed the private/caolan/align_menubuttons_and_comboboxes branch 3 times, most recently from d604aff to e56e6e6 Compare April 1, 2026 07:50
Copy link
Copy Markdown
Contributor

@pedropintosilva pedropintosilva left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This also fixed the disable status:

Before

Image

after

Image

@github-project-automation github-project-automation Bot moved this from To Review to To Test in Collabora Online Apr 26, 2026
caolanm added 2 commits April 26, 2026 14:25
The broad button selector in btns.css matched jsdialog menubuttons,
overriding their margin and width. This caused menubuttons to be offset
by 5px from comboboxes and listboxes in the same grid column, since
those are div elements that do not match the btns.css selector.

Exclude .menubutton from the btns.css catch-all so menubuttons only
get their jsdialogs.css styling. Also fix the menubutton rule to use
the standard control height (32px), font size, and padding to match
other controls, start-align the content, and push the dropdown arrow
to the end of the button.

Add a regression test that asserts the menubutton and listbox-container
share the same left edge in the Border tab of the Character dialog.

Signed-off-by: Caolán McNamara <caolan.mcnamara@collabora.com>
Change-Id: I3ca1a8c46f905f849d08d087f79ad940d8e2ee57
since the menubutton was removed from the catch-all rule that was
disrupting their margin and width

Signed-off-by: Caolán McNamara <caolan.mcnamara@collabora.com>
Change-Id: I89df97cf397af9922610faf06bd130b1011a013e
@pedropintosilva pedropintosilva force-pushed the private/caolan/align_menubuttons_and_comboboxes branch from e56e6e6 to fec879f Compare April 26, 2026 12:25
@pedropintosilva
Copy link
Copy Markdown
Contributor

conflicts solved

Comment thread browser/css/jsdialogs.css
line-height: normal;
font-size: calc(var(--default-font-size)*1.2);
width: max-content;
font-size: var(--default-font-size);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a change of font-size here seems better, but I don't know who added the previous value and if there was any magic reason behind it.

Copy link
Copy Markdown
Contributor

@pedropintosilva pedropintosilva left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably some visual tests (the ones with image diff) need adjusting? such as desktop/impress/sidebar_spec.js:39 see baseline image esktop/impress/sidebar_spec.js/sidebar_menubutton_color.png .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: To Test

Development

Successfully merging this pull request may close these issues.

3 participants