Move answer box to bottom of page

Question

I want to always display the answer box for questions in my Question2Answer forum, but I want it to appear at the bottom of the page (like on Stack Overflow) instead of directly below the question.

In the admin settings there is an option to select if the box should appear never, only if there are no answers or always, but I don't see an option to change its position.

Answer 1

AFAICS there is no config option for this. However, the answer form in Q2A forums is rendered as a separate <div> element in the main content section, so you could adjust the CSS of your theme to use a flexbox layout for that section. The stylesheet should be located here:

/PATH/TO/Q2A/qa-themes/YOUR_THEME/qa-styles.css

Look for the qa-main class in that file and add display: flex; flex-direction: column; to it, then define the order for the nested <div> tags. Elements with lower order will be displayed first, elements with higher order will be displayed after them.

Note that the nested elements in the main section can have a lot of different classes, though, depending on what's being displayed, and you probably don't want to define the order for each class individually. To define a default order value use something like this (elements with the same value will be displayed in the order in which they appear in the HTML code):

.qa-main > div {
  order: 2;
}

That way you can assign an order of 1 to elements you want to be displayed before everything else (like the heading, class qa-main-heading), and an order of 3 or higher to elements you want displayed after everything else (like the answer form, class qa-part-a-form).

However, when using the child combinator (>) you cannot specify a different order by class selector alone. Something like this will not work:

.qa-main > div {
  order: 2;
}
.qa-part-a-form {
  order: 3;
}

because the order defined for all nested <div> elements takes precedence over the order defined for the qa-part-a-form class. You need to define the orders like this to make it work:

.qa-main > div {
  order: 2;
}
.qa-main > .qa-part-a-form {
  order: 3;
}

Something like this should do what you want:

.qa-main {
  display: flex;
  flex-direction: column;
  ...
}
.qa-main > div {
  order: 2;
}
.qa-main > .qa-main-heading {
  order: 1;
}
.qa-main > .qa-part-a-form {
  order: 3;
}

Beware that older browsers don't support flexbox layouts, so the answer form will still be shown directly below the question in those. Check Can I use ... to see which browsers support the feature.