159

TLDR: Could we have a toggle option that puts the Answer box next to the Question, so you can easily reference the question content when answering so you don't have to scroll back and forth.


After attempting to answer a post today, I wanted to go through the question bit by bit and advise the OP an various parts of the question in order, but I found myself scrolling up and down so much that I just gave up. In hindsight I could have just opened two windows side by side like an animal.

I thought it would be a nice option if you could toggle to a side-by-side view when posting an answer. Something like this:

Enter image description here

The other benefit of this view when toggled on is that you are less likely to miss key parts of the question when it's side by side. In the past I've answered questions after reading through them quickly, but then a while later someone may downvote or comment, because I missed some key information in the question.

Duplicate Suggestion

Not a duplicate of the suggestion in comment as that is relating to previewing an edit whilst editing a question side by side. This is relating to question and answer side by side.

16
  • 52
    Yes, this would be brilliantly useful. Suggested before, unfortunately. And several times more. They built Documentation instead. Jan 13, 2017 at 12:46
  • 10
    In the mean time a second monitor will give you the same functionality ;) Jan 13, 2017 at 12:56
  • 1
    Possible duplicate of See entire preview while editing a question Jan 13, 2017 at 13:23
  • 22
    @CodyGray all of those links are related to previewing an edit you are making, which I guess is similar in layout, but I'm asking for the question to be side by side with the answer box, so you can easily refer back to the question whilst posting an answer.
    – Tanner
    Jan 13, 2017 at 13:44
  • 7
    @NathanOliver I have a second monitor but I don't want whiplash ;)
    – Tanner
    Jan 13, 2017 at 13:45
  • 21
    Close-voters: That duplicate target is completely different from this request. That's about a side-by-side preview. This is about having the Q/A side-by-side cc @RobertLongson.
    – Cerbrus
    Jan 13, 2017 at 13:50
  • 6
    I typically just hit "edit" and copy the entire markdown source of the question into the answer box, going through it top to bottom, deleting stuff that is irrelevant, quoting stuff that is relevant, and writing my answer in between. The same way you'd answer an email, basically. Jan 13, 2017 at 14:32
  • 4
    @JörgWMittag that's a good idea that would work for posts where you want to quote and edit large sections. Although it wouldn't work for posts where you just want to refer to parts of the post. For example, I might want to refer to some database table or column names so I can make sure my answer is accurate.
    – Tanner
    Jan 13, 2017 at 14:43
  • 3
    This would be even more appreciated in Code Review! Jan 16, 2017 at 6:39
  • @CodyGray IMO, this is not a duplicate to the questions you are linking to
    – Mr. Alien
    Jan 16, 2017 at 7:47
  • @Mr.Alien pretty sure he's aware and he did comment to that effect but has possibly cleaned up his comments since then.
    – Tanner
    Jan 16, 2017 at 10:09
  • 1
    Yeah, I had originally misread the question and cast the first vote to close on that basis. I got on board the clue train a long time ago, retracted my close vote, and posted a comment confessing to my misreading of the question. It was so long ago now that I have already deleted that comment. I left the original one in place, because although I agree this isn't a duplicate, it is at least related. (At the risk of being continuously pinged about my cluenessless, of course.) Jan 16, 2017 at 12:07
  • @CodyGray thanks, need to get your latest comment trending now to avoid confusion ;)
    – Tanner
    Jan 16, 2017 at 12:11
  • Is something doing on with this?
    – ItamarG3
    Jun 28, 2017 at 7:56
  • @ItamarGreen this is unlikely to get any attention in the near future from what I understand.
    – Tanner
    Jun 28, 2017 at 9:42

2 Answers 2

36

I've written some quick-and-dirty style alterations that should do it:

#content {
    width: 100%;
}
#mainbar {
    width: 1456px;
    display: inline-block;
    float: none;
    vertical-align: top;
}
#sidebar {
    display: inline-block;
    float: none;
    vertical-align: top;
}
#question {
    display: inline-block;
    vertical-align: top;
}
#answers {
    display: inline-block;
    position: relative;
    top: -30px;
    vertical-align: top;
}
#answers-header {
    display: none;
}

Result:

enter image description here

16
  • 14
    I'm not sure I like it though. The screen becomes quite crowded.
    – Cerbrus
    Jan 13, 2017 at 13:15
  • 2
    Cheers, I'll give it a go, looks pretty much like what I'm suggesting.
    – Tanner
    Jan 13, 2017 at 13:48
  • 1
    The idea is that this would be only enabled when toggled on, when the user felt the need to refer back to the post a lot, the default view should remain as it is.
    – Tanner
    Jan 13, 2017 at 13:51
  • @Tanner: That'd require some JavaScript as well, then.
    – Cerbrus
    Jan 13, 2017 at 13:51
  • it's ok, I can write that if required, just wanted the mockup for a visulisation really.
    – Tanner
    Jan 13, 2017 at 13:52
  • @Cerbrus that doesn't really work i.stack.imgur.com/0u3Va.jpg
    – Turnip
    Jan 13, 2017 at 14:32
  • @Turnip: What's wrong?
    – Cerbrus
    Jan 13, 2017 at 14:33
  • Whoops, wrong screenshot. Check the link again. It breaks if there is an answer.
    – Turnip
    Jan 13, 2017 at 14:33
  • @Turnip: Not really broken, it just moves the "answers" container to the right of the "question" container.
    – Cerbrus
    Jan 13, 2017 at 14:36
  • 2
    Isn't OPs request to have the "your answer" box next to the question so they can both be seen at once?
    – Turnip
    Jan 13, 2017 at 14:37
  • The problem is that that box is the last item in the "answers" container. The answers container can simply be moved to the right. The "new answer" box on it's own, not that easily...
    – Cerbrus
    Jan 13, 2017 at 14:41
  • 1
    Yeah, that was kind of my point. I don't think this can't be done with CSS without changing the page structure.
    – Turnip
    Jan 13, 2017 at 14:43
  • 2
    A proper implementation requires more than just CSS, yea.
    – Cerbrus
    Jan 13, 2017 at 14:44
  • 3
    On toogle, the blog and related column could be hidden to give more space when side by side.
    – Veve
    Jan 13, 2017 at 15:22
  • 1
    @Cerbrus this is brilliant, one I thing I can add is destroy the right sidebar when answering.
    – Enzokie
    Jan 15, 2017 at 5:31
28

Building on the CSS from Cerbrus' answer, the JavaScript below will toggle the answer you are composing between being side-by-side with the question and its normal location. This addresses the issue raised by Turnip that the answer you are entering is normally at the end of the list of answers by moving the answer entry <form> to the beginning of the answer section. You can choose if you want the sidebar shown (Related, Linked, Hot Network Questions, etc.) by changing the value of hideSidebar.

As a bookmarklet in action:

As a bookmarklet in action

(function(){
  var hideSidebar=true; //Change to false if you don't want to hide the right sidebar.
  //CSS code from Cerbrus' answer wrapped in a <style>, plus optionally hiding the sidebar:
  var newStyleHTML = '<style id="questionAnswerSideBySideCSS" type="text/css">#content {width: 100%;} #mainbar {width: 1456px; display: inline-block; float: none; vertical-align: top; }' + (hideSidebar?'#sidebar { display: none; } #feed-link { display: none; }':'#sidebar { display: inline-block; float: none; vertical-align: top; }') + ' #question { display: inline-block; vertical-align: top; } #answers { display: inline-block; position: relative; top: -30px; vertical-align: top; } #answers-header { display: none; }</style>';

  var newStyle = document.getElementById('questionAnswerSideBySideCSS');
  var answerForm = document.getElementById('post-form');
  var answers = document.getElementById('answers');
  if(newStyle){
    newStyle.parentNode.removeChild(newStyle);
    answers.insertBefore(answerForm,document.querySelector('h2.bottom-notice'));
  }else{
    document.head.insertAdjacentHTML('beforeend',newStyleHTML);
    answers.insertBefore(answerForm,document.getElementById('answers-header').nextSibling);
  }
})()

If you want to always have the two column format, you can just install the above code as a user script.

As a bookmarklet:

javascript:void(function(){var hideSidebar=true;var newStyleHTML = '<style id="questionAnswerSideBySideCSS" type="text/css">#content {width: 100%;} #mainbar {width: 1456px; display: inline-block; float: none; vertical-align: top; }' + (hideSidebar?'#sidebar { display: none; } #feed-link { display: none; }':'#sidebar { display: inline-block; float: none; vertical-align: top; }') + ' #question { display: inline-block; vertical-align: top; } #answers { display: inline-block; position: relative; top: -30px; vertical-align: top; } #answers-header { display: none; }</style>'; var newStyle = document.getElementById('questionAnswerSideBySideCSS'); var answerForm = document.getElementById('post-form'); var answers = document.getElementById('answers'); if(newStyle){ newStyle.parentNode.removeChild(newStyle); answers.insertBefore(answerForm,document.querySelector('h2.bottom-notice')); }else{ document.head.insertAdjacentHTML('beforeend',newStyleHTML); answers.insertBefore(answerForm,document.getElementById('answers-header').nextSibling); } })()

Just moving the answer to the beginning of the Answers section

As I was about to post this, I realized that I wanted the functionality of just being able to toggle the answer entry <form> to the beginning of the Answers section and back to its normal location without adding the two column format CSS. This will allow keeping the standard single column format, but move the answer you are working on will be right under the question. This should be handy for referring to the question while composing your answer when there are multiple answers, but you don't want a two column format.

(function(){
  //Just an empty <style>:
  var newStyleHTML = '<style id="questionAnswerSideBySideCSS" type="text/css"></style>';

  var newStyle = document.getElementById('questionAnswerSideBySideCSS');
  var answerForm = document.getElementById('post-form');
  var answers = document.getElementById('answers');
  if(newStyle){
    newStyle.parentNode.removeChild(newStyle);
    answers.insertBefore(answerForm,document.querySelector('h2.bottom-notice'));
  }else{
    document.head.insertAdjacentHTML('beforeend',newStyleHTML);
    answers.insertBefore(answerForm,document.getElementById('answers-header').nextSibling);
  }
})()

As a bookmarklet:

javascript:void(function(){var newStyleHTML= '<style id="questionAnswerSideBySideCSS" type="text/css"></style>'; var newStyle = document.getElementById('questionAnswerSideBySideCSS'); var answerForm = document.getElementById('post-form'); var answers = document.getElementById('answers'); if(newStyle){ newStyle.parentNode.removeChild(newStyle); answers.insertBefore(answerForm,document.querySelector('h2.bottom-notice')); }else{ document.head.insertAdjacentHTML('beforeend',newStyleHTML); answers.insertBefore(answerForm,document.getElementById('answers-header').nextSibling); } })()
0

You must log in to answer this question.

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