Issues with shoutbox

[Migi]

Hello, everyone.

I have a question about the shoutbox. Is it possible to specify the dimensions of images and videos which can be posted in the shoutbox?

This is my forum. The theme I'm currently using places the shoutbox at the left sidebar of the forum, so the width of the box is very limited. Every time an image or video is posted, the shoutbox stretches and overlaps with the forum body. (This is how it looks like.)

If that is not possible, then I will have to move the shoutbox below the forum list. Otherwise, members can't post images or videos on the shoutbox when it's placed like this.

Thank you in advance for your help!

[Peter]

You can target those via CSS.

Example of modifying the max size of the video iframe

.shoutbox_messages .message iframe {

max-width: 50px;
max-height: 50px;

}

Just follow the same thing for images.

[Migi]

peter It works perfectly! I replaced the "iframe" with "img" and repeat the whole codes for the images. No more broken screens now. Thank you very much for your help.

[Migi]

I have another question related to shoutbox, so I changed the title to something more general.

My shoutbox is located at the sidebar, which means the width is very limited. A member posted a link to Instagram which is pretty long, so the link was displayed in one full line and it pushed the shoutbox width to overlap with the index page. (This is how it looked like.) When I cut the link short, the width returned to normal. The link in the message right above the Instagram link looked okay because there was a dash to separate the link (I think).

Is there a way to prevent this from happening again? Otherwise, I will have to keep editing members' posts which are going too long.

[elli]

Find the CSS selector for individual shoutbox posts (I'm on mobile rn, don't have access) and add these declarations

word-wrap: break-word;
word-break: break-word;
hyphens: auto;

[Migi]

elli I found the setting on the CSS. The line only had word-wrap code, but not the rest of it. I think I did it right because now longer links are being cut to a new line properly. Thank you so much! <3

[elli]

Migi Glad you were able to find it, and that it works.

[Migi]

elli A member just now posted a link to YouTube and the width got extended again. I wonder if I put the codes on the wrong line? This is the CSS to the current theme's shoutbox:

@shoutbox_message_background: #fafafa   scroll;
@shoutbox_message_border: @empty;
@shoutbox_message_border_radius: 0px;
@shoutbox_message_text_color: @empty;
@shoutbox_message_text_font: @empty;
@shoutbox_shouts_background: @empty;
@shoutbox_shouts_border: 1px solid @container_inner_border_color;
@shoutbox_shouts_border_radius: 0px;
@shoutbox_shouts_text_color: @empty;
@shoutbox_shouts_text_font: @empty;
@shoutbox_shouts_edit_color: @empty;
@shoutbox_shouts_edit_font: 85% @default_forum_text_font_family;
@shoutbox_shouts_edit_decoration: @empty;
@shoutbox_shouts_delete_background: @empty;
@shoutbox_shouts_delete_border: 1px solid @container_inner_border_color;
@shoutbox_shouts_delete_border_radius: 0px;
@shoutbox_shouts_delete_text_color: @container_text_color_1;
@shoutbox_shouts_delete_text_font: bold 100% @default_forum_text_font_family;
@shoutbox_shouts_delete_text_decoration: none;
@shoutbox_shouts_selected_background: @container_highlight_color;
@shoutbox_reply_background: @empty;
@shoutbox_reply_border: 0px solid @container_inner_border_color;
@shoutbox_reply_border_radius: 0px;
@shoutbox_reply_counter_color: @container_text_color_1;
@shoutbox_reply_counter_font: 85% @default_forum_text_font_family;
.shoutbox_welcome_message { color: @shoutbox_message_text_color; font: @shoutbox_message_text_font; background: @shoutbox_message_background; border: @shoutbox_message_border; .rounded-corners(@shoutbox_message_border_radius); margin-bottom: 10px; }
.shoutbox_messages .shoutbox-post { color: @shoutbox_shouts_text_color; font: @shoutbox_shouts_text_font; background: @shoutbox_shouts_background; border: @shoutbox_shouts_border; .rounded-corners(@shoutbox_shouts_border_radius); text-align: left; position: relative; overflow: hidden; margin-top: 10px; margin-right: 10px; padding: 5px 15px 5px 10px; }
.shoutbox_messages .shoutbox_edit_button { color: @shoutbox_shouts_edit_color; font: @shoutbox_shouts_edit_font; text-decoration: @shoutbox_shouts_edit_decoration; display: inline-block; width: 32px; margin-right: 5px; visibility: visible; }
.shoutbox_messages .hidden { visibility: hidden; }
.shoutbox_messages .shoutbox_delete_button { color: @shoutbox_shouts_delete_text_color; font: @shoutbox_shouts_delete_text_font; text-decoration: @shoutbox_shouts_delete_text_decoration; background: @shoutbox_shouts_delete_background; border: @shoutbox_shouts_delete_border; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; position: absolute; right: -7px; top: 0; width: 15px; cursor: pointer; margin-left: 20px; margin-top: 0px; padding: 3px; height: 100%; display: inline-block; }
.shoutbox .state-selected { background: @shoutbox_shouts_selected_background; }
.shoutbox_form { background: @shoutbox_reply_background; border: @shoutbox_reply_border; .rounded-corners(@shoutbox_reply_border_radius); padding: 10px; height: 100px; }
.shoutbox_form .shoutbox_counter { color: @shoutbox_reply_counter_color; font: @shoutbox_reply_counter_font; float: right; margin-top: -5px; }
.shoutbox_form textarea.gray { color: #666666; }
.shoutbox_messages { overflow-y: scroll; text-align: center; position: relative; }
.shoutbox .content { padding: 0px; }
.shoutbox_messages .shoutbox-post:first-child { margin-top: 0px; }
.shoutbox_messages .message { padding-right: 10px; word-wrap: break-word; word-break: break-word; hyphens: auto;}
.shoutbox_messages .details { /*float: right; */margin: 0px 15px 0px 10px; height: 16px; vertical-align: bottom; }
.shoutbox_form.reply-box-bottom { margin-top: 10px; }
.shoutbox_form.reply-box-top { margin-bottom: 10px; }
.shoutbox_form input[type="text"] { margin-top: 2px; margin-bottom: 4px; }
.shoutbox_form .button img { display: inline; padding: 2px 0 0; }
.shoutbox_form .shoutbox_refresh_button { float: right; padding: 2px 6px 0px 6px; }
.shoutbox_form ul.tools { white-space: nowrap; display: inline-block; }
.shoutbox_form ul.tools li { float: left; margin: 0; padding: 0; .rounded-corners(0px); border: 0; height: 22px; width: 26px; text-align: center; line-height: 18px !important; }
.shoutbox_form ul.tools li img { padding: 0; }
.shoutbox_form textarea { height: 38px; width: 100%; margin-right: 0px; margin-bottom: 5px; margin-top: 5px; position: inherit; .box-sizing(); }
.shoutbox_form .shoutbox_post_button { margin-left: 0px; }
.shoutbox_form .shoutbox_cancel_button { vertical-align: bottom; }
.shoutbox_name { padding: 10px 0; height: 22px; }
.shoutbox_name input { height: 15px; width: 50%; min-width: 150px; }
.shoutbox_container { position: relative; }
.shoutbox_container > .shoutbox_form_container { position: absolute; width: 100%; }
.shoutbox_container.orientation-top { padding-top: 174px; }
.shoutbox_container.orientation-top.no-post { padding-top: 0; }
.shoutbox_container.orientation-top > .shoutbox_form_container { top: 0; }
.shoutbox_container.orientation-bottom { padding-bottom: 174px; }
.shoutbox_container.orientation-bottom.no-post { padding-bottom: 0; }
.shoutbox_container.orientation-bottom > .shoutbox_form_container { bottom: 0; }
.shoutbox_messages .message iframe { max-width: 140px; max-height: 100px; }
.shoutbox_messages .message img { max-width: 180px; max-height: 120px; }

[elli]

Migi Try putting it on .shoutbox_messages .shoutbox-post instead. .shoutbox_messages .message is a span, and being an inline element, it might not handle the word-wrap properties the same as a block element. (Too lazy to look it up )

[Migi]

elli I added the code to .shoutbox-post

(not the one with the :first child

part), but nothing changed.

[elli]

Let me install this skin and I'll see if I can break it, and then fix it.

[elli]

Migi All right, I think this might be the best it can be fixed. I tried this on a few types of long links and it seems to make them wrap consistently. Though around 620px resolution, the sidebar will overflow into the content anyway.

First, we'll make a mixin so that you don't have to clutter your shoutbox CSS, and you can reuse these styles elsewhere. Go to Admin > Themes > Advaned Styles & CSS > "Style Sheet", create a new line under @empty: ~""; and paste this:

.fix-word-wrap() {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;   
}

Then find this selector: .shoutbox_messages .shoutbox-post, and after the opening curly brace, add the mixin:

.fix-word-wrap();
Save your changes.

[Migi]

elli Thank you very much! I added the codes as instructed and now the shoutbox looks like this. Now all word breaks in strange places, haha.

I'm sorry to make you busy with unimportant detail like this. If there is no other way, I'll stick to your previous suggestion.

[elli]

Migi You're using Internet Explorer/Edge, yes? I think I got it this time... by only applying the word-break styles to the links within the shoutbox messages. Replace the mixin above with this:

.fix-word-wrap() {
    display: inline-block;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;   
}

And apply it like this:

.shoutbox_messages .message a { .fix-word-wrap(); }
Also, remove the word wrap styles from .shoutbox_messages .message and .shoutbox_messages .shoutbox-post. Let me know if it's working.

(And don't worry -- I'm happy to help, and this is good to know because someone is bound to experience it again.)

[Migi]

elli I tried the new codes and so far it works perfectly! Only links are broken down when I try to post a long one. I'll report if something goes wrong again, haha. Thank you very much!!