Change the preset size of the textbox input area

GIntl
Shopify Partner
9 0 0

I generated text box input fields with the UI generator.  The formatting is a very small box that looks bad in the description area of the product.  Is there any way that I could change the standard size?

Replies 4 (4)
Jason
Shopify Expert
10438 169 2081

Hey GIntl,

The size of the textarea can be defined with CSS.

Consider posting a link to a page on your store that has the field in place. That will help the forum members offer advice on what styles you may need to change the size / appearance for your specific theme.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
GIntl
Shopify Partner
9 0 0

Sorry about my delay- but thanks so much for responding :).  My site is still under password  lock- "jodrem" https://gifting-intl.myshopify.com/products/personalized-photo-cookies.  

Please let me know what could be done.

Jason
Shopify Expert
10438 169 2081

Example CSS to use could be like this:

/* change line item property textarea size */
.line-item-property__field textarea {
    width: 100%;
    height: 10em;
}

^ That changes the width to 100% of the column that it's sitting in, and increases the height.

If you're not sure of the file to add it to - look for theme.scss.liquid in your themes asset folder. Add that CSS to the bottom of the file.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
lemonstand
Tourist
10 0 1

quick question, basically the same but the other way round: the textbox I hacked into my theme

 

<p class="line-item-property__field">
<label for="custom-message">box title</label>
<textarea required id="custom-message" name="properties[data name in heckoutc]"></textarea>
</p>

 

is too big for my taste. Your addition to the scss file can make it longer but not smaller. How can I make this textbox just one line high?