Guidelines

This site is for tech Q&A. Please keep your posts focused on the subject at hand.

Ask one question at a time. Don't conflate multiple problems into a single question.

Make sure to include all relevant information in your posts. Try to avoid linking to external sites.

Links to documentation are fine, but in addition you should also quote the relevant parts in your posts.

0 votes
11 views
11 views

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.

in General by (15) 4

Your answer

Preview

Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
By submitting this post you agree to our Terms & Conditions.
To avoid this verification in future, please log in or register.

1 Answer

0 votes
 
Best answer

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.

by (15) 4
...