Adjusting Text Area Width in HTML code

[Mixed]

Forum URL: theconnectionhub.boards.net/

Well, I'm on the next bit and fought with it a little while. While I am pleased that I found how to make a text area on my own, it seems that I cannot get the width of the area to adjust. I am mostly posting here because I am not sure if the table in which it is placed is restricting the size. If that is the case, I would think it restrict the height rather than width due to the dimensions of the cell. However, that is not the case. I can adjust the height all I want but nothing will adjust the width.

Can someone please tell me what I am missing?

Again, I've included the code as my forum is in MM. The number in green is what I am trying to use to adjust the width of the text area but it does not respond even to drastic changes.

<td><center><table class="home-info-table">
    <tr>
        <td width="90px"><center><a href="http://theconnectionhub.boards.net/" target="_blank" title="The Connection Hub"><img src="http://storage.proboards.com/6453911/images/NCSVA_4Cjh4cHyPnWXAp.gif" alt="The Connection Hub" border="0" width="88px" height="31px" /></a></center></td>
        <td width="310px"><center><textarea rows="3" col="100">&lt;a href="http://theconnectionhub.boards.net/" target="blank" title="The Connection Hub"&gt;&lt;img src="http://storage.proboards.com/6453911/images/NCSVA_4Cjh4cHyPnWXAp.gif" alt="The Connection Hub" border="0" width="88px" height="31px" /&gt;&lt;/a&gt;      
        </textarea></center></td>
    </tr>
</table></center></td>

P.S. Sorry. I realize this might be better off in the Coding Help board. If so, could a mod please move it? Thank you.


Edit: Nevermind! Thank you so much but I realized from looking between my code and the lesson I learned this from that I was missing an 's' on 'cols' in the green highlight. Now it responds quite nicely.

[Quozzo]

Mixed It looks like you have a width property set on the parent td which is restricting it to that size.

[Mixed]

Thank you, Quozzo. I had worried a bit about if the parent was restricting it. Actually, I set up the borders to look at where the table was with respect to the text area and found that the text area could go over the parent containment. It seems if the text area was wider than the actual table cell, then the only thing that was affected was the alignment of the text area within the parent td. My trouble was with the lack of an s on cols when trying to define the width.

Thank you for your input.

[Quozzo]

Mar 19, 2017 7:13:21 GMT -8 Mixed said:

Thank you, Quozzo . I had worried a bit about if the parent was restricting it. Actually, I set up the borders to look at where the table was with respect to the text area and found that the text area could go over the parent containment. It seems if the text area was wider than the actual table cell, then the only thing that was affected was the alignment of the text area within the parent td. My trouble was with the lack of an s on cols when trying to define the width.

Thank you for your input.

I wouldn't recommend to hard code the width and height into the textarea and/or td elements. I don't know how many you have but changing them all would take some time. That's what CSS was invented for. You can set the width and height of the specified textareas and if you need to change it you can just make the adjustment once.

If you're going down the CSS route I would remove the centre tags too, they're deprecated, and centre the text via CSS.

Just a thought.

[Mixed]

Mar 19, 2017 7:23:42 GMT -8 Quozzo said:

I wouldn't recommend to hard code the width and height into the textarea and/or td elements. I don't know how many you have but changing them all would take some time. That's what CSS was invented for. You can set the width and height of the specified textareas and if you need to change it you can just make the adjustment once.

If you're going down the CSS route I would remove the centre tags too, they're deprecated, and centre the text via CSS.

Just a thought.

Thanks for the thought. Unfortunately, I'm not certain how I would go about doing it in that way. I'm still only learning so I was thrilled to use what I learned to get the results that work for my goal. I'm not sure how to use the CSS (I'm assuming through the Advanced Styles & CSS of the Admin Panel) to format something I have in my Global Footer.

Would you be up to explaining this method? If so, I'm open to learning it.

[Quozzo]

For something small and to start learning, I would just put the CSS in the HTML directly.

<style></style>

You can then use CSS inside the tags to style the elements. You would need some way of targeting the table or textarea directly because you don't want to affect anything else on the page. To target the textarea you could just assign it a class and then use that class in CSS to affect it. Anything else with that class (like multiple textareas) will use the same CSS.

Add the class to the textarea
<textarea class='mixed-textarea'></textarea>

then add the CSS somewhere near. Usually best to place it at the top so the style can load before the elements that need them. It should go above the table but anywhere will do.


<style>
.mixed-textarea {
width: 100%;
}
</style>

The dot signifies we are looking for a class and then the name of the class. You don't need to use hyphens but putting your name in there is a good indicator that no one else has used the same class name in a plugin or theme.

If you want the textarea in the centre of the td then adding the text-align to the td will achieve that.

.home-info-table td {
text-align: center;
}


Notice how I targeted the td inside the table which already has a class. That will target all cells inside the table. We could then just place this CSS into our existing style tags. It should look something like this.


<style>
.home-info-table tr td:nth-child(1){
width: 90px;
}

.home-info-table tr td:nth-child(2){
width: 310px;
}

.home-info-table textarea {
width: 100%;
}
</style>

<table class="home-info-table">
<tr>
<td><a href="http://theconnectionhub.boards.net/" target="_blank" title="The Connection Hub"><img src="http://storage.proboards.com/6453911/images/NCSVA_4Cjh4cHyPnWXAp.gif" alt="The Connection Hub" border="0" width="88px" height="31px" /></a></td>
<td><textarea><a href="http://theconnectionhub.boards.net/" target="blank" title="The Connection Hub"><img src="http://storage.proboards.com/6453911/images/NCSVA_4Cjh4cHyPnWXAp.gif" alt="The Connection Hub" border="0" width="88px" height="31px" /></a>
</textarea></td>
</tr>
</table>

You can replace your existing table with the one above, including the CSS style tags, which should act as the original. Now if you add any more rows it will automatically include those style.

[Mixed]

OH! That's what you mean! I did something like that with the main table around this nested one named 'home-info-table'. I'm going to work to get all of this up into the style area above the body of the html.

Though I have another couple of questions then:

What is td:nth-child(1) and td:nth-child(2) for? 

            Nevermind. This is for the first and second cells in a row, are they not?

Can I still have an id with the text area with the style being determined by the container ID?

            My text area now has both an ID and Class. They seem to work together well enough, though I would not be surprised if there was a more elegant way of putting it.

I have an id on the text area so that I can have the whole thing highlight when clicked. I would still like to keep this feature. For now, I'm going to work on moving the style around in my complete Footer code to both implement your suggestions and keep the function I have. Thank you for your help.



Edit: So I've been playing with this for an hour now and I think I have all the <center> tags removed from the html and replaced them with CSS styling above. I think I actually have all the changes you recommended now implemented. However, I've come across something that I can't seem to figure without putting <center> tags right back in.

This little table home-info-table is nested inside a main table main-affzone-table. I had had it centered within one of the <td> elements using the hard coded tags (I think that's what you were calling them). Now, I'm using the text-align attribute to do all that as you suggested. All other <td> elements look to be following this rule. However, this <td> element with the nested home-info-table is not responding to it. Maybe you can find what I am missing?

I've included my full Footer code thus far and highlighted the nested table and the text-align I thought would be styling it to be center within its container. I know it is probably not the most elegant, but thank you for helping me learn.

<html>
    <head>
        <title>Affiliate Listing</title>
        <style>
            .main-affzone-table {
                width: 980px;
                border-collapse: collapse;
                }
            .main-affzone-table td {
                padding: 10px;
                border: 1px solid black;
                text-align: center;
                }
            .home-info-table td {
                padding: 10px;
                border: 1px solid black;
                text-align: center;
                }
            .home-info-table {
                width: 400px;
                }
            .home-info-table tr td:nth-child(1) {
                width: 90px;
                }
            .home-info-table tr td:nth-child(2) {
                width: 310px:
                }
            .ch-banner-code {
                height: 60px;
                width: 96%;
                }
        </style>
        <script type="text/javascript">
            function SelectAll(id)
            {
                document.getElementById(id).focus();
                document.getElementById(id).select();
            }
        </script>
    </head>
    <body>
        <center>
            <table class="main-affzone-table">
                <tr>
                    <th colspan="2"><font color="344242" size="5"><b>Affiliates</b></font></th>
                </tr>
                <tr>
                    <td><b>Fellow Directories</b></td>
                    <td><b>Static Connections</b></td>
                </tr>
                <tr>
                    <td>
                        DIRECTORY BANNER CODES
                    </td>
                    <td>
                        AFFILIATE BANNER CODES
                    </td>
                </tr>
                <tr>
                    <td><b><br />Our Button & HTML Code</b></td>
                    <td><b><br />Scrolling Connections</b></td>
                </tr>
                <tr>
                    <td><table class="home-info-table">
                        <tr>
                            <td><a href="http://theconnectionhub.boards.net/" target="_blank" title="The Connection Hub"><img src="http://storage.proboards.com/6453911/images/NCSVA_4Cjh4cHyPnWXAp.gif" alt="The Connection Hub" border="0" width="88px" height="31px" /></a></td>
                            <td>
                                <textarea class="ch-banner-code" id="chcode" onClick="SelectAll('chcode');" readonly>&lt;a href="http://theconnectionhub.boards.net/" target="blank" title="The Connection Hub"&gt;&lt;img src="http://storage.proboards.com/6453911/images/NCSVA_4Cjh4cHyPnWXAp.gif" alt="The Connection Hub" border="0" width="88px" height="31px" /&gt;&lt;/a&gt;</textarea></td>
                        </tr></table></td>
                    <td><marquee height="68" width="460" onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollamount="3");>
                        AFFILIATE BANNER CODES
                    </marquee></td>
                </tr>
            </table>
        </center>
    </body>
</html>

[Quozzo]

Mixed An element can have an ID and multiple classes, but only one ID and that ID must be unique on the page. You generally don't want to use both unless you have multiple textareas that you want styled and then you want a specific textarea to have something in addition to the others, so they still share the same style, just a bit extra flare.

Tables tend to be different. I'm honestly not that great when it comes to CSS, however if you want something centre aligned (I hope my English spelling didn't confuse you ) then setting a "margin" to "0 auto" usually works.

margin: 0 auto;

That will set the margin of the top and bottom to 0 and the sides will automatically get a margin that will centre the table/div/whatever in its parent.

Also, if this is a standalone page that only has the HTML you posted above then it should have the <!DOCTYPE html> tag at the very top of the page, before the html tag. If it's inside a custom page on PB then it shouldn't have the html or head or body or title tags.

Edit:
If you want extra columns in the table but only want the first to have 90px then you would need to set all the columns to have 310px and then the first to have 90px like so.


.home-info-table tr td {
   width: 310px:
}

.home-info-table tr td:nth-child(1) {
   width: 90px;
}

So the bottom rule with 90px will overwrite the top one with 310px;

[Mixed]

Quozzo,

I'm using the text area ID to target the text within that area in order to Select All upon clicking the text area. As for the class of the text area, this is to style the size of it. I doubt I'll be using more than one text area and I know I want only this one highlighted when it is clicked. It would be strange to see other text areas on the theme highlighted. But if I am getting you right, then I should be fine with it having both... I hope.

While I wasn't sure where you meant for me to place the margin: 0 auto;, playing around I figured where it needed to be to get the effect I was looking for. The margin is attributed to the nested table itself. Though reading your explanation again, I realize you meant for it to be on the nested to be centered in its parent.

I don't think this is standalone since this code is in the Global Footer to make an affiliation area at the bottom of my forum, but I will definitely keep in mind the need for <!DOCTYPE html> in the future. Actually, I'll put it in my notes.

Since it is in the footer for the forum and not on a custom page on ProBoards, do I still need to remove the html, head, body, and title tags?

With respect to your last addition, while I don't believe I'll be adding additional columns, I've applied your recommendation just in case that changes in the future. Thank you for the pointers.


P.S. You're English spelling didn't confuse me. Living in Europe for a few years was good practice for swapping between the versions of the language.

[Quozzo]

There's no harm in having a class and ID on the same element. I just thought you might have been using both to style it.

If it's in the footer then yes, take out the html, head, body and title tags. A page should only have one of them.

[Mixed]

Mar 20, 2017 14:48:00 GMT -8 Quozzo said:

There's no harm in having a class and ID on the same element. I just thought you might have been using both to style it.

Oh, right. No, I have the ID included because I thought that was the only way to properly target it for the script. But that's a perspective from a limited knowledge so I'm glad it works.

Mar 20, 2017 14:48:00 GMT -8 Quozzo said:

If it's in the footer then yes, take out the html, head, body and title tags. A page should only have one of them.

So then, the <style> and <script> tags don't need to be contained in <head> tags to function? I hope to be able to keep the styling with the table so it's easy to cross-reference and tweak. Can I keep the styling just above the table?

Edit: No worries on my question. I've tried it and found my answer. And as a plus, everything still works they way I want so I didn't break anything.

Thank you so much for your help!

[Kami]

Mixed - Tbh you really shouldn't need to use style tags for the most part since you have access to the stylesheet for each theme. While it's not a huuuuge deal if you have style tags elsewhere, I'd still get into the practice of keeping it in the stylesheet as much as possible.

As far as the <head> tags, you don't need to for CSS and for a lot of JS it doesn't matter. Putting something in the head tags, from what I understand, simply ensures that the [thing] loads before the rest of the page.

[Quozzo]

Mar 20, 2017 16:20:24 GMT -8 Kami said:

Mixed - Tbh you really shouldn't need to use style tags for the most part since you have access to the stylesheet for each theme. While it's not a huuuuge deal if you have style tags elsewhere, I'd still get into the practice of keeping it in the stylesheet as much as possible.

As far as the <head> tags, you don't need to for CSS and for a lot of JS it doesn't matter. Putting something in the head tags, from what I understand, simply ensures that the [thing] loads before the rest of the page.

For just getting started on CSS the style tags aren't a big thing, but style sheets are better because they are stored in a file and are only downloaded once, unlike HTML which is downloaded every time the page refreshes. The <style> tag itself is HTML. 

The head tags will load scripts and sheets before moving onto the body. style and script tags work anywhere. It is even considered bad practice nowadays by putting scripts into the head! It means the user has to wait for something to load before they are allowed to see the page which causes a "bad user experience". Scripts don't usually work until they are loaded after the page (D.O.M.) has loaded anyway, so putting them at the bottom of the page is considered the best practice, since it doesn't cause the user to wait and you don't need to force the scripts to wait.

[Mixed]

Mar 20, 2017 16:20:24 GMT -8 Kami said:

Mixed - Tbh you really shouldn't need to use style tags for the most part since you have access to the stylesheet for each theme. While it's not a huuuuge deal if you have style tags elsewhere, I'd still get into the practice of keeping it in the stylesheet as much as possible.

As far as the <head> tags, you don't need to for CSS and for a lot of JS it doesn't matter. Putting something in the head tags, from what I understand, simply ensures that the [thing] loads before the rest of the page.

Oh! I think I understand now! I thought the head was a place for styling kind of like a backstage in theater where the body would be the cast. Makes sense now as a "load this first" dock.

As for your first point, I'd like to think out loud for a bit. I had started to think, in the back of my mind, of putting it into the Style Sheet for consistency sake, but then I'd need to include that bit in every theme's style sheet. With that in mind, doesn't it make sense to keep the styling for a footer that should be applied to all themes (it's an affiliation area) with the code for that footer? Maybe I'm thinking too little like a coder, but that's where I'm at.

Thank you for the tips all the same. I just learn best by application.

[Kami]

Quozzo - Man I am getting conflicting messages re: scripts in the head tags haha. Some places I read it doesn't matter, others say not to put it in the head tags ever at all, others are 'it depends' <_>;'

And yeah, I knew that about the CSS (not sure if you were correcting or adding on)