From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Subject: [PATCH yew-widget-toolkit] touch: slidable: use bounding client rect for width
Date: Tue, 9 Jun 2026 09:11:10 +0200 [thread overview]
Message-ID: <20260609071200.411677-1-d.csapak@proxmox.com> (raw)
when calculating the width of the left and right actions, using
offsetWidth is problematic since it's always returned as an integer[0].
Since the browser calculates the sizes with fractional pixels, it can
happen that this is too narrow, impacting the flex layout. It'll always
be less than one pixel, but it can lead to e.g. text wrapping or similar
effects, disturbing the overall layout here.
Using the width of boundingClientRect returns a floating point, so this
should be the correct size (including sub-pixels).
0: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
this is not a replacement for the assets fix for setting the nowrap on
the slidable action, but it is an additional correctness fix.
src/touch/slidable/mod.rs | 10 ++++++----
1 file changed, 6 insertions(+), 4 deletions(-)
diff --git a/src/touch/slidable/mod.rs b/src/touch/slidable/mod.rs
index ae45e29..d1959ba 100644
--- a/src/touch/slidable/mod.rs
+++ b/src/touch/slidable/mod.rs
@@ -266,8 +266,9 @@ impl Component for PwtSlidable {
.left_action_ref
.cast::<web_sys::HtmlElement>()
.unwrap()
- .offset_width()
- .max(0) as f64;
+ .get_bounding_client_rect()
+ .width()
+ .max(0.0);
if width > (left_size + 1.0) {
self.left_size = left_size;
@@ -283,8 +284,9 @@ impl Component for PwtSlidable {
.right_action_ref
.cast::<web_sys::HtmlElement>()
.unwrap()
- .offset_width()
- .max(0) as f64;
+ .get_bounding_client_rect()
+ .width()
+ .max(0.0);
if width > (right_size + 1.0) {
self.right_size = right_size;
--
2.47.3
next reply other threads:[~2026-06-09 7:12 UTC|newest]
Thread overview: 2+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-06-09 7:11 Dominik Csapak [this message]
2026-06-09 16:50 ` applied: [PATCH yew-widget-toolkit] touch: slidable: use bounding client rect for width Thomas Lamprecht
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20260609071200.411677-1-d.csapak@proxmox.com \
--to=d.csapak@proxmox.com \
--cc=yew-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.