ch5-button stretch height

When the stretch attribute is set to height, the ch5-button stretches in height, as much as its parent allows.

<div class="ch5-btn-container1">
    <ch5-button type="success" label="stretch height" shape="rectangle" stretch="height"></ch5-button>
</div>

.ch5-btn-container1{
    width:30vw;
    height:20vh;
    border: 1px dashed green;
}

Execute JS before HTML

ch5-button stretch width

When the stretch attribute is set to width, the ch5-button stretches in width, as much as its parent allows.

<div class="ch5-btn-container2">
    <ch5-button type="success" label="stretch width" shape="rectangle" stretch="width"></ch5-button>
</div>

.ch5-btn-container2{
    width:30vw;
    height:20vh;
    border: 1px dashed green;
}

Execute JS before HTML

When the stretch attribute is set to both, the ch5-button stretches in both width and height, as much as its parrent allows.

<div class="ch5-btn-container3">
    <ch5-button type="success" label="stretch both" shape="rectangle" stretch="both"></ch5-button>
</div>

.ch5-btn-container3{
    width:30vw;
    height:20vh;
    border: 1px dashed green;
}

Execute JS before HTML