PatternLab (0.1.259)

# Textarea

# Default Textarea with Floating Label

.c-float-container.-has-textarea > .c-textarea

hide code 
<div class="c-float-container -has-textarea">
    <label class="c-label" for="textarea1">Floating Label</label>
    <textarea class="c-textarea" name="" id="textarea1" cols="30" rows="10" data-placeholder=".. and Placeholder Text"></textarea>
</div>

# Textarea on Dark Background

.c-float-container.-has-textarea.-light > .c-textarea.-light

hide code 
<div class="p-b-l h-highlight-block">
    <div class="c-float-container -has-textarea -light">
        <label class="c-label" for="textarea2">Floating Label</label>
        <textarea class="c-textarea -light" name="" id="textarea2" cols="30" rows="10" data-placeholder=".. and Placeholder Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
        </textarea>
    </div>
</div>

# Textarea "Old-Style"

# Default Plausi-Textarea

.c-textarea.-old

hide code 
<label class="c-label -old" for="example-textarea"></label>
<textarea class="c-textarea -old" id="example-textarea" name="" value="" />

# Autosize Textarea

TIP

Based on Autosize JS (opens new window). Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.

Use the class .flexible-textfield in plausi or initialize like this:

autosize($('#demo-autosize'));
1

hide code 
<label class="c-label -old" for="demo-autosize"></label>
<textarea rows="1" cols="40" class="flexible-textfield c-textarea -old" id="demo-autosize">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</textarea>

← Label →