28

I just posted an answer and noticed that the code overflowed. I changed a variable name from somethinglong to s and the code fit without a horizontal scrollbar - though just barely!

enter image description here

The answer was accepted and I noticed the horizontal scroll is back. Upon further investigation, the accepted check causes that section to be slightly wider and causes the just barely fitting code to now overflow

enter image description here

Comparing an accepted and non-accepted answer, we see that everything is shifted around

enter image description here

Not sure if this qualifies as a bug or not but it's not easy to look at for a stickler like me!

7
  • 9
    What I like the most in this feature is when you watch the icon clicked and you see the whole answer move. Commented Jun 18, 2019 at 21:37
  • 1
    @TemaniAfif do you consider offsetting the answer body by a few pixels a feature? What purpose does it serve other than a fleeting slight jump as you described? Causing the code to overflow in my answer seems like an unintended side effect at least.
    – djv
    Commented Jun 19, 2019 at 1:34
  • 2
    The answer area is fluid width so spending time making your code fit is a fairly pointless task.
    – Turnip
    Commented Jun 20, 2019 at 13:08
  • "the code fit without a horizontal scrollbar - though just barely" sorry but...it doesn't on my 90 degrees rotated 1080 display. I removed the green tickbox to show how it looked when "properly" formatted. The last two )) don't fit.
    – VLAZ
    Commented Jun 20, 2019 at 13:27
  • Even ignoring narrower view ports if you're within a pixel or two of the maximum width cross browser rendering differences can trigger a bar in some cases but not others. meta.stackexchange.com/questions/286333/… Commented Jun 20, 2019 at 13:53
  • Maybe my anal retentiveness sometimes causes me to do like to have things a certain way, and this is mostly for my personal satisfaction (or so it seems - clearly none of you share this trait) like making the code fit without a scrollbar. I'd imagine that the answer is rendered differently on different browsers for different people and I can live with that. My question is really about why the checkmark causes things to move around. It may seem trivial to you guys but it bothered me, that's all. I got my answer though. Thanks for reading
    – djv
    Commented Jun 20, 2019 at 15:19
  • @djv Please see Layout: Make the textarea (edit box) for answers and the preview reflect the final width even before posting, which has examples of the maximum stock width of code blocks being different based on the browser and OS. So, if your goal is really not to have scrolling (which is beneficial), you're going need to format for the narrowest, or a width that is the narrowest or X% of users. Be aware that even then users which have narrower windows will have the width used for posts reduced.
    – Makyen Mod
    Commented Jun 21, 2019 at 7:21

2 Answers 2

8

The element

<div class="js-accepted-answer-indicator 
            grid--item 
            fc-green-500 
            p4
            ta-center" 
     title="The question owner accepted this as the best answer yesterday." 
     tabindex="0" 
     role="note" 
     aria-label="accepted">

Is the problem. Technically, this element also exists for unaccepted answers as well, it is just hidden with display: none; using the class "d-none". In any event, the class p4 includes a forced padding of 4 pixels. When an answer is accepted, this element becomes visible, causing the excessive 8 pixels to be drawn (4 on either side), although only 4 of those actually get shown (because of a -2 pixel margin offsetting the other 4).

The movement seen is the result of those 4 pixels altering the layout for that section of page. Removing the p4 class from the element solves the problem of altering the continuity when the accepted element is shown.

That this is really a problem which requires addressing may be another issue entirely.

1
  • Great, thanks for the explanation. I don't do much web design myself but if this were happening in one of my desktop apps I would certainly address it. I'll admit that I have a sometimes too-high attention to detail.
    – djv
    Commented Jun 19, 2019 at 21:28
1

I changed a variable name from somethinglong to s

But ... why? Does a "oneliner" make your answer better? Or does having some clearer names instead of that cryptic s and sn2 make your answer better? I think the latter.

  Dim result = String.Join(
    ",", 
    File.ReadAllLines(newFile1)
        .Select(Function(input) input.Split(","c)(1))
  )

Your code will always overflow somewhere on some devices, so I would not try to format your code in a way that it does not overflow, focus on readability instead.

That said, yes it is strange that accepting an answer changes the layout, I'd consider that a bug (although a minor, less important one).

6
  • In the question, What is the simplest way... so I decided to make it look simple. My solution happens to be the way I would do it (compared with other answers) but in order to make it look simple, I wanted it on one line. Purely superficial, I know. Along the same vein I didn't want a horizontal scroll bar. Is that so bad?
    – djv
    Commented Jun 19, 2019 at 14:44
  • 10
    If you favor a "oneliner" over readability, yes then that is bad. Commented Jun 19, 2019 at 14:46
  • @JonasWilms only if the programming/code writing community understood this. Comment brought to you by: I_agree().with().your(enter_noun('viewpoint')).replace('viewpoint','comment')
    – MattR
    Commented Jun 19, 2019 at 20:00
  • 3
    @MattR I have one of those functions too, but mine is named I_a().w().y().e_n('viewpoint')).r('viewpoint','comment')
    – Davy M
    Commented Jun 19, 2019 at 21:22
  • 1
    @DavyM Your version is much more easily readable and understood than MattR's version honestly Commented Jun 20, 2019 at 13:11
  • @JonasWilms Just gave your comment 10th like and whole comment section got shifted.I think it's probably kinda relevant to original question. Commented Jun 21, 2019 at 10:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .