Borders in sticky div

  • ssssadsadasd-1356975631262421142

    ssssadsadasd

    26 days ago

    [Here](https://toddle.dev/projects/moccasin_palpatine_chief_rook/branches/start/components/test6?rightpanel=style&selection=nodes.D1Bz3A3uG1lpv65lKGA-v&canvas-width=800&canvas-height=1196) I have a sticky group (grey) at the top. Its parent has black left and right borders. However, the sticky group somehow overrides the left side and the black border is not visible. when I change the group to flex or sth else it works as expected. it seems to me the group is automatically pushed to the left by 1px.
    any idea why this happens? thanks
    1356975631614869525-image.png
  • lucasg-1357105880105226390

    Lucas G

    25 days ago

    It may have to do with how borders are calculated. They are not always considered as part of the width
  • ssssadsadasd-1358810019059073377

    ssssadsadasd

    21 days ago

    @Lucas G any alternative solution to this? thanks
  • lucasg-1358820310895562752

    Lucas G

    21 days ago

    I see the border line:
    1358820310714945677-image.png
  • lucasg-1358820952846373127

    Lucas G

    21 days ago

    Could also try top: 0; left: 1; if anything but I do not see the issue
  • ssssadsadasd-1358823088854270114

    ssssadsadasd

    21 days ago

    @Lucas G that is a weird think that happens that I forgot to mention. on big screens it does not show, while in lower width it works as expected
    1358823088174923926-image.png
    1358823088585965648-image.png
  • lucasg-1358824280615420186

    Lucas G

    21 days ago

    1358824280795906300-image.png
  • I am on a widescreen
  • ssssadsadasd-1358824563236143245

    ssssadsadasd

    21 days ago

    @Lucas G hmm I tried both edge and chrome and it 's not working in my case
  • lucasg-1358825160840446032

    Lucas G

    21 days ago

    I see it in Zen (firefox), chromium, and webkit browsers on both mac/windows
  • Can't replicate it on my end
  • ssssadsadasd-1358825917761327296

    ssssadsadasd

    21 days ago

    @Lucas G that's strange [for me ](https://vimeo.com/1073246147/6748d80af7?ts=0&share=copy) neither chrom nor edge works as expected and I can see it 1px or two margin from the left even if I have set no margins
    1358825917819912474-image.png
  • ssssadsadasd-1360597604106506271

    ssssadsadasd

    16 days ago

    @Erik Beuschau any idea how to solve this? thanks
  • erikbeus-1360599193907101856

    Erik Beuschau

    16 days ago

    Lol, no. I’m the last one to ask for CSS advice I’m afraid 🤷‍♂️
    👍1
  • ssssadsadasd-1360599652545859604

    ssssadsadasd

    16 days ago

    @Erik Beuschau just thought it was an issue with toddle
  • erikbeus-1360600161310740660

    Erik Beuschau

    16 days ago

    Ah, i didn’t read the full conversation. I suggest Marija or Miguel have a look on Monday 🤞
    👍1
  • erikbeus-1361245168019443902

    Erik Beuschau

    14 days ago

    @Marija Gerasimovska or @Miguel Costa could you check if there’s an issue here? 🙏
    👍1
  • marija_0104-1361268384242598029

    Marija Gerasimovska

    14 days ago

    @ssssadsadasd we have a default value border-box for box-sizing property on the div elements and that is what is causing you this issue. You will need to override this value with setting box-sizing: content-box; on the parent div where you have the borders set.
  • ssssadsadasd-1361277391258910782

    ssssadsadasd

    14 days ago

    @Marija Gerasimovska thanks for the answer. hmm, I set this setting on the [parent div](https://toddle.dev/projects/moccasin_palpatine_chief_rook/branches/start/components/test6?rightpanel=style&canvas-width=800&selection=nodes.2tJTZVeOZj92Sr247nlRN&canvas-height=1196) that has the borders but it still shows as before
  • marija_0104-1361296725280686160

    Marija Gerasimovska

    14 days ago

    Now looks good on my end 🤔 Maybe try to clean the cache?
  • ssssadsadasd-1361308586570940536

    ssssadsadasd

    14 days ago

    @Marija Gerasimovska hmm not working even after deleting history. it depends a lot on the screen size
    1361308585912570006-image.png
    1361308584490700921-image.png
    1361308586315219057-image.png
    1361308585577156628-image.png
    1361308585182761030-image.png
    1361308584834760784-image.png
  • andreasmoller-1361344003211137319

    Andreas Møller

    14 days ago

    Box-sizing:border-box should be right here.

    Any breakpoints or min/max width?
  • I’m on a phone so I can’t inspect:)
  • ssssadsadasd-1361355128996630813

    ssssadsadasd

    14 days ago

    I tried to remove all the width constraints for all elements besides for the top grey sticky group. still happening.
    sth to notice is that the top grey group has a backdrop filter but even removing it does not solve this.
    to me it really appears the grey div is moved to the left by 1px which is not solved by Box-sizing:border-box @Andreas Møller. thanks
    1361355128703160330-image.png
  • ssssadsadasd-1361356275086266459

    ssssadsadasd

    14 days ago

    in the editor it is better noticeable. probably this is the issue that Marija explained but not sure how it is not solved with box-sizing: content-box
    1361356274851123491-image.png
  • lucasg-1361368859411611698

    Lucas G

    14 days ago

    what's weird is that on all my machines I don't even see the border issue
  • It looks normal everywhere for me
  • marija_0104-1361427102427119747

    Marija Gerasimovska

    13 days ago

    It looked good to me after you change it to content-box 🤔
  • ssssadsadasd-1361656967080185920

    ssssadsadasd

    13 days ago

    @Marija Gerasimovska that is super strange because I deleted my history and tried in chrome and can still see the issue.
    while in my phone I cant see it (but this is probably related to the behavior depending on page width)
    1361656967189495941-image.png
  • lucasg-1361709632112033923

    Lucas G

    13 days ago

    Checked on Edge as well and nothing
    1361709627061964830-image.png
  • I can't replicate this on either mac or windows. Could there be an extension or anything else that might be causing it
  • ssssadsadasd-1361711173258580020

    ssssadsadasd

    13 days ago

    removed all extensions on chrome but still the issue persists
    1361711173023826192-image.png
  • Tod-1361711174776918277

    Tod

    13 days ago

    Great energy @ssssadsadasd! Your continuous contribution to the toddle Community just made you advance to Community Level 13!
  • marija_0104-1361772318975590440

    Marija Gerasimovska

    13 days ago

    @ssssadsadasd what version of chrome you are using?
  • ssssadsadasd-1362366051421261925

    ssssadsadasd

    11 days ago

    @Marija Gerasimovska just updated chrome. I still see the same behavior.
    1362366051525853355-image.png
    1362366050704031824-image.png
    1362366051110752309-image.png