Topic: Shoutbox Text Box Size

[newtoallthis]

Is it possible to make the text input box bigger...for example to accommodate two lines without scrolling?

[AngelinaBelle]

Yes. Take a look at the HTML on the page (I recommend Firebug for Firefox, or developers tools for IE7, 8, or 9, which lets you point at the element you are interested in).
You can see that this input of type text has its width set in portal.css via input.shoutboxinput, but does no5 have its height set.
You can change that.
---
Edit: fixed typo

[newtoallthis]

Thank you. I shall go and delve.

[newtoallthis]

OK. Tried setting the height to 60 px and the height did increase accordingly. However, text would only be accepted in the centre line of the input box rather than start at the top and wouldn't keep returning until the larger box was full. How do I get the input text to be accepted in the text box just as it is accepted by this reply box into which I am typing?

[AngelinaBelle]

I would have thought that ought to work.
I had a look at the information at http://www.w3schools.com/tags/att_input_size.asp and had a little look at the information there, then started playing with size, width, height and CSS style attributes. Even with style="height: 5ex; white-space: normal;" I couldn't get it to wrap.
I could not get it to work. I think this form element is only meant for 1 line of text.
If there is a way to do what you want to do, I don't know it.
 
It seems like a textarea would work better for what you would like to do than an input of type=text

[newtoallthis]

Thanks again for trying.

Could a textarea be set in the file you pointed to?

[AngelinaBelle]

I recommend that you set up a test forum and do some experimenting.
You can learn a lot that way.

[newtoallthis]

I recommend that you set up a test forum and do some experimenting.
You can learn a lot that way.

I have a test forum.

Good advice....I'll go try!

[newtoallthis]

It seems like a textarea would work better for what you would like to do than an input of type=text

Having read more on this, I would tend to agree with you regarding the use of textarea.

However, in the section of CSS that you referred to, there is no obvious entry to edit. Are there additional files elsewhere which contains the basic shoutbox code? 

[AngelinaBelle]

You would need to make this change in PortalBlocks.php.

[newtoallthis]

Have revisited this unsolved problem and again looked through PortalBlocks.php, but it's not even clear where the shout box input code resides.

Have also tried viewing the shoutbox using Firebug and, again, no clearer.

Still looking for help on this, please.

[newtoallthis]

Maybe it's this??

Code: [Select]

<div class="shoutbox_input smalltext">
   <input id="new_shout_1" class="shoutbox_input sp_float_left input_text" type="text" name="new_shout">
   <input class="sp_float_right button_submit" type="submit" onclick="sp_submit_shout(1, 'dda42495e5', '28e6631930ed9110f9b9a8cb883ba6cd'); return false;" value="Shout!" name="submit_shout">
How can I change type="text" to textarea, bearing in mind that I have to include various textarea settings for height, width, overflow, wrap etc..

[newtoallthis]

If I change the following:-

Code: [Select]

<input id="new_shout_1" class="shoutbox_input sp_float_left input_text" type="text" name="new_shout">
<input class="sp_float_right button_submit" type="submit" onclick="sp_submit_shout(1, 'f12d0e3', 'd61703ae203b27af69443b045edd1f7b'); return false;" value="Shout!" name="submit_shout">
to:-

Code: [Select]

<textarea id="shoutbox" rows="4" cols="15" name="new_shout" style="width: 125px; height: 20px;"></textarea>
<input class="sp_float_right button_submit" type="submit" onclick="sp_submit_shout(1, 'f12d0e3', 'd61703ae203b27af69443b045edd1f7b'); return false;" value="Shout!" name="submit_shout">
This gives the correct appearance when compared side by side at http://htmledit.squarefree.com/ .

Would it work, though?

I'd appreciate a second opinion before I edit any code in PortalBlocks.php.

[AngelinaBelle]

MY advice: test this code in a test install of your forum.
If it works, then save the old Portalblocks.php, and try the modified one on your real forum.
 
If you do not like it, immediately put the old Portalblocks.php back.  If you like it -- make very clear notes for yourself about the changes required, so you can make them again when there is a new version of SimplePortal.
 
 

[AussieBill]

This worked for me:

Open ./Themes/default/PortalShoutbox.template.php
Find:

Code: [Select]

if ($context['can_shout'])
echo '
<div class="shoutbox_input smalltext">
<input type="text" name="new_shout" id="new_shout_', $shoutbox['id'], '" class="shoutbox_input sp_float_left input_text"', $context['browser']['is_ie'] ? ' onkeypress="if (sp_catch_enter(event)) { sp_submit_shout(' . $shoutbox['id'] . ', \'' . $context['session_var'] . '\', \'' . $context['session_id'] . '\'); return false; }"' : '', ' />
<input type="submit" name="submit_shout" value="', $txt['sp_shoutbox_button'], '" class="sp_float_right button_submit" onclick="sp_submit_shout(', $shoutbox['id'], ', \'', $context['session_var'], '\', \'', $context['session_id'], '\'); return false;" />
</div>';Replace With:

Code: [Select]

if ($context['can_shout'])
echo '
<div class="shoutbox_input sp_center">
<textarea class="smalltext" name="new_shout" id="new_shout_', $shoutbox['id'], '" style="width: 96%; height: 60px;"', $context['browser']['is_ie'] ? ' onkeypress="if (sp_catch_enter(event)) { sp_submit_shout(' . $shoutbox['id'] . ', \'' . $context['session_var'] . '\', \'' . $context['session_id'] . '\'); return false; }"' : '', ' /></textarea>
<br /><input type="submit" name="submit_shout" value="', $txt['sp_shoutbox_button'], '" onclick="sp_submit_shout(', $shoutbox['id'], ', \'', $context['session_var'], '\', \'', $context['session_id'], '\'); return false;" />
</div>';
To change the width/height of the text box, look for style="width: 96%; height: 60px;" and change to suit.

This edit also moves the 'Shout!' button to below the text input box.

Note: You will no longer be able to post a shout by pressing the 'Enter' key. Instead, pressing 'Enter' will start a new line in the text box. You must click on the 'Shout!' button to post the shout.

[AngelinaBelle]

newtoallthis,
 
Does AussieBill's solution do what you want?

[newtoallthis]

Tried the code edit on my test forum, saved the change, launched the forum and refreshed and there was absolutely no change to the shoutbox whatsoever. Text box was the same size and the shout button remained on the right.

Any ideas what I could be doing wrong?

[edit] Just a thought. Would the change only be visible if the textbox size was changed? Is this tweak used to increase text box size in the code rather than creating a textarea which can be manipulated by forum users?

[edit] Tried it again and adjusted the textbox height in the code. Still makes no difference at all.

[AngelinaBelle]

What's your browser? Can you use IE (7 or better) or firefox (with firebug plug-in)?

[newtoallthis]

What's your browser? Can you use IE (7 or better) or firefox (with firebug plug-in)?

I can browse using whatever you like, but my preference is for FF 5.

[AngelinaBelle]

The firebug plug-in for firefox has a tool that makes it easier for you to see the id or CSS class of any HTML element, and to try out the effects of fiddling with that element's style.
Combine this tool with plenty of CSS information from your favorite CSS tutorial (w3schools.com, for example), and you will very quickly be able to see the effect of changing the height of various elements.
Once you find this out, I encourage you, rather than messing with the php, to add some CSS to the portal.css file (for example), or even the theme's default.css.  In any case, you'll want to keep a copy of the added section for the next time you install a new version of SimplePortal (portal.css is always replaced) or the theme.