MyBB Community Forums

Full Version: Quick Edit buttons aren't styled
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
 
As per the title, when quick-editing a post the save/cancel buttons don't use the style of other buttons on the page:

[Image: 1dgGquo.png]

Whereas other buttons are styled:
[Image: kdM44ec.png]
Definitely seems a little off putting to me.
Yes, it is a minor bug...

EDIT1: One more visual issue - width for subject and edit reason should be same - it looks better
[attachment=32160]

EDIT2: Buttons for "choose file" in attachment is not styled too (Full edit)
[attachment=32162]
Hi,

Thank you for your report. We have pushed this issue to our Github repository for further analysis where you can track our commits and progress with fixing this bug. Discussions regarding this bug may also take place there too.

Follow this link to visit the issue on Github: https://github.com/mybb/mybb/issues/1236

Thanks for contributing to MyBB!

Regards,
The MyBB Group
(2014-08-15, 07:34 AM)Eldenroot Wrote: [ -> ]Yes, it is a minor bug...

EDIT1: One more visual issue - width for subject and edit reason should be same - it looks better


EDIT2: Buttons for "choose file" in attachment is not styled too (Full edit)

These need to be fixed too.
File upload button can't be completely styled since input and button are one element, you'll need jquery to manipule it (wrap <input type="file" name="attachment" size="30" class="fileupload" /> in a relative container and add a button with absolute position on the same place where current "upload" button is located).
EDIT: Sadly the cancel input doesn't work. It does not close the edit section just resets the input. There is no <input type="cancel" in the HTML specs so javascript is needed to do it.

A solution for the buttons mentioned in the first post could be:

Change this:

<button type="submit">Save Changes</button>
<button type="cancel">Cancel Edit</button>

to this:

<input type="submit" class="button" value="Save Changes" tabindex="{insert value here}" accesskey="{insert key here}" id="{if needed insert id here}">
<input type="reset" class="button" value="Cancel Edit" tabindex="{insert value here}" accesskey="{insert key here}" id="{if needed insert id here}">

Example:

[Image: download?path=%2F&files=Moment_231_2014-...Chrome.png]
The buttons are added by jEditable, the jQuery plugin we're using to handle quick edits. And it seems to work fine for me.