Long text form field (Brooklyn)

Solved
Highlighted
Excursionist
21 0 2
Hello,

We would like to add this long text form field to our brooklyn product page:  https://prnt.sc/rwrwe4
 
This is the code we are using (From Shopify UI elements generator) : 
 <p class="line-item-property__field">
<label for="drawing-notes-describe-clothing-background-face-pose-etc-any-changes-to-drawing-notes-after-your-order-may-result-in-additional-charges">Drawing Notes (Describe clothing, background, face, pose etc..) Any changes to drawing notes after your order may result in additional charges.</label>
<textarea id="drawing-notes-describe-clothing-background-face-pose-etc-any-changes-to-drawing-notes-after-your-order-may-result-in-additional-charges" name="properties[Drawing Notes (Describe clothing, background, face, pose etc..) Any changes to drawing notes after your order may result in additional charges.]"></textarea>
</p>
 
And get this result:  https://prnt.sc/rx1u95
 
Any idea how i can get the text into the square like original example and that it disappears when they start writing?
 
 
0 Likes
Highlighted
Shopify Partner
1023 214 463

This is an accepted solution.

@TroWul 

 

Send me your store URL, so I can check and provide you exact solution.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Shopify Partner
1023 214 463

This is an accepted solution.

@TroWul 

 

Replace your code with following:

<p class="line-item-property__field">
<label for="drawing-notes-describe-clothing-background-face-pose-etc-any-changes-to-drawing-notes-after-your-order-may-result-in-additional-charges">Drawing Notes (Describe clothing, background, face, pose etc..) Any changes to drawing notes after your order may result in additional charges.</label>
<textarea id="drawing-notes-describe-clothing-background-face-pose-etc-any-changes-to-drawing-notes-after-your-order-may-result-in-additional-charges" name="properties[Drawing Notes (Describe clothing, background, face, pose etc..) Any changes to drawing notes after your order may result in additional charges.]" placeholder="Drawing Notes (Describe clothing, background, face, pose etc..)"></textarea>
</p>

Also, add following code in theme.scss.liquid file:

.product-single__form textarea{width:100%;}

Thank you,

Tejas

 

 

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Excursionist
21 0 2

Works exactly how i wanted, thanks for the code!

You also answered what was gonna be my second question to get the width style to look better :D ! 

Thank you,

TroWul

0 Likes