blog documentation FAQ followers forum marketplace services youtube

Use of display:table vs. display:block for Editor

The Jamroom Network » Forum » Jamroom Developers » Page » Use of display:table vs. display:block for Editor
TiG
TiG
@tig
7 years ago
184 posts
On mobile devices, the tinymce editor will expand when editing. Seems to me this is a result of template comment_form.tpl wrapping the editor within display:table... tags (especially table-cell):

<div class="item" style="display:table">
            <div style="display:table-row">
                <div class="p5" style="display:table-cell;width:5%;vertical-align:top;">
                    {jrCore_module_function function="jrImage_display" module="jrUser" type="user_image" item_id=$_user._user_id size="small" alt=$item.user_name class="action_item_user_img iloutline" _v=$_user.user_image_time}
                </div>
                <div class="p5" style="display:table-cell;width:95%;padding:5px 12px;">
                    <a id="cform"></a>
                    <form id="{$jrComment.unique_id}_form" action="{$jamroom_url}/{$curl}/comment_save" method="POST" onsubmit="jrPostComment('#{$jrComment.unique_id}', 'undefined', 500);return false">
                    . . .   
                    </form>
                </div>
            </div>
        </div>
        
        . . .


I plan to customize this for at least mobile devices to replace the display:table, display:table-row, display:table-cell with display:block (and of course a few more adjustments) but I would prefer to understand why table tags were used in the first place.

This question is simply a due diligence to mitigate side-effects.


--
TiG
updated by @tig: 12/18/17 02:17:44PM
brian
@brian
7 years ago
10,148 posts
The TinyMCE WYSIWYG is purposefully disabled on phones - the the interface is just too small to properly deal with on small screens, and we feel it it will just be frustrating for users, so it is replaced with a textarea.

In fact - we recommend that you do NOT use the editor at all for user-facing input - period. The problem is that it will inject HTML and inline CSS into the text, which down the road if you ever choose to change the CSS/style of your site, you'll always be stuck with "ugly" HTML that cannot be modified. But of course that's our opinion :)

You can modify the template to suit your needs. It is currently designed so the editor only shows to desktops, and having the layout display as table makes it easy for everything to "line up".

Let me know if that helps.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
TiG
TiG
@tig
7 years ago
184 posts
@brian

Thanks much for that explanation. Will discuss with Perrie regarding mobile. However ...

brian:
In fact - we recommend that you do NOT use the editor at all for user-facing input - period. The problem is that it will inject HTML and inline CSS into the text, which down the road if you ever choose to change the CSS/style of your site, you'll always be stuck with "ugly" HTML that cannot be modified.

I am reading that we should not allow our users to use tinymce under any conditions (all devices) because it allows them to stylize their comments with HTML and CSS. Am I misinterpreting? I ask because we have a rather profound need to allow boldface, etc., text changes, blockquotes, inserting images, video, etc. into comments, etc. Inserting bbcode tags would never fly - would at least need a toolbar.

Just ensuring I am correctly understanding your advice.


--
TiG
brian
@brian
7 years ago
10,148 posts
TiG:
I am reading that we should not allow our users to use tinymce under any conditions (all devices) because it allows them to stylize their comments with HTML and CSS. Am I misinterpreting?

No - that is correct. The problem with embedding CSS is that you just can't style it. So let's say down the road you want to change the font face used on the site - with embedded CSS you can't change it - you're stuck with whatever the user has selected.

If it is a function of the site and is needed, then of course use it - that's why it is there, so it's 100% up to you.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
TiG
TiG
@tig
7 years ago
184 posts
@brian

Got it. Yeah I suppose in our view each comment is its own little world. The site style is the framework but the comments are free to individual expression. And ... if we needed to in the future for some reason ... we could apply a little 'conforming' algorithm to stored comments. That is, if we chose to force the users to conform to a particular style. :)

Have you considered providing a bbcode toolbar endowed editor? That would stay within your advice yet provide a very nice option for mobile devices (and beyond).

Thanks much, Brian, for your insight.


--
TiG
brian
@brian
7 years ago
10,148 posts
There are no plans for any toolbars - to be honest anything outside a textarea is going to be an issue for some users on mobile devices. On many older iphone/android devices the buttons are just way too small to be effective.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Tags