[SMF 2.1 RC2] Wrong align of buttons of the editor

[davidhs]

With English language align is correct: (see AlignButtonsSMF21English.png attached)
but with other language (with longer string, like Spanish), buttons are show badly: (see AlignButtonsSMF21Spanish.png attached)

One solution can be insert a new line between text and buttons, like SMF 2.0: (see AlignButtonsSMF20.png attached)

These modifications are needed: (see AlignButtonsSMF21Fixed.png attached)
1. Themes\default\GenericControls.template.php

Code (Search (line 84)) Select Expand


   echo '
      <span class="smalltext">
         ', $context['shortcuts_text'], '
      </span>';


Code (Replace by) Select Expand


   echo '
      <span class="smalltext">
         ', $context['shortcuts_text'], '
      </span><br>
      <span style="display: inline-block;">';


2. Themes\default\Display.template.php

Code (Search (line 1112)) Select Expand


                  <span id="post_confirm_buttons" class="floatright">
                     ', template_control_richedit_buttons($context['post_box_name']), '
                  </span>';


Code (Replace by) Select Expand


                  <span id="post_confirm_buttons" class="righttext" style="display: block;"><span style="display: inline-block;">
                     ', template_control_richedit_buttons($context['post_box_name']), '
                     </span>
                  </span></span>';


3. Themes\default\ManageNews.template.php

Code (Search (line 243)) Select Expand


            <span id="post_confirm_buttons">
               ', template_control_richedit_buttons($context['post_box_name']), '
            </span>


Code (Replace by) Select Expand


            <span id="post_confirm_buttons" class="righttext" style="display: block;"><span style="display: inline-block;">
               ', template_control_richedit_buttons($context['post_box_name']), '
               </span>
            </span></span>


4. Themes\default\PersonalMessage.template.php

Code (Search (line 1163)) Select Expand


            <span id="post_confirm_strip" class="floatright">
               ', template_control_richedit_buttons($context['post_box_name']), '
            </span>


Code (Replace by) Select Expand


            <span id="post_confirm_strip" class="righttext" style="display: block;"><span style="display: inline-block;">
               ', template_control_richedit_buttons($context['post_box_name']), '
               </span>
            </span></span>


5. Themes\default\Post.template.php

Code (Search (line 529)) Select Expand


               <span id="post_confirm_buttons" class="floatright">
                  ', template_control_richedit_buttons($context['post_box_name']);

   // Option to delete an event if user is editing one.
   if ($context['make_event'] && !$context['event']['new'])
      echo '
                  <input type="submit" name="deleteevent" value="', $txt['event_delete'], '" data-confirm="', $txt['event_delete_confirm'], '" class="button you_sure">';

   echo '
               </span>


Code (Replace by) Select Expand


               <span id="post_confirm_buttons" class="righttext" style="display: block;"><span style="display: inline-block;">
                  ', template_control_richedit_buttons($context['post_box_name']);

   // Option to delete an event if user is editing one.
   if ($context['make_event'] && !$context['event']['new'])
      echo '
                  <input type="submit" name="deleteevent" value="', $txt['event_delete'], '" data-confirm="', $txt['event_delete_confirm'], '" class="button you_sure">';

   echo '
                  </span>
               </span></span>




Other solution can be using two blocks: A first block with comments align to left and a second block with buttons align to right: (see AlignButtonsSMF21Fixed2.png attached)



By other hand, some submit buttons are align to left and could be align to right (as similar to other submit buttons):

1. Themes\default\Poll.template.php

Code (Search (line 151)) Select Expand


               <input type="submit" name="post" value="', $txt['save'], '" onclick="return submitThisOnce(this);" accesskey="s" class="button">


Code (Replace by) Select Expand


               <div class="righttext">
                  <input type="submit" name="post" value="', $txt['save'], '" onclick="return submitThisOnce(this);" accesskey="s" class="button">
               </div>


2. Themes\default\ReportToMod.template.php

Code (Search (line 89)) Select Expand


            <input type="submit" name="preview" value="', $txt['preview'], '" class="button">
            <input type="submit" name="save" value="', $txt['report_submit'], '" class="button">
            <input type="hidden" name="', $context['session_var'], '" value="', $context['session_id'], '">


Code (Replace by) Select Expand


            <div class="righttext">
               <input type="submit" name="preview" value="', $txt['preview'], '" class="button">
               <input type="submit" name="save" value="', $txt['report_submit'], '" class="button">
               <input type="hidden" name="', $context['session_var'], '" value="', $context['session_id'], '">
            </div>


[shawnb61]

It is pretty easy to reproduce this using Spanish, especially if you use a lower res monitor, or smaller browser window.

I have not tested the proposed solution.  My only concern is whether it scales responsively.  The current solution may look awkward with windows of certain sizes, but it works & scales as you shrink & grow the browser window. 

Logged on GitHub, where this proposal will likely get better input:
https://github.com/SimpleMachines/SMF2.1/issues/5885

[Antes]

Possible fix https://github.com/SimpleMachines/SMF2.1/pull/5886

[shawnb61]

Thanks Antes!

[shawnb61]

The fix for this issue has been merged, so this issue will be closed.

The fix is in the current version of 2.1 availble for download over on GitHub.