You need to sign in to do that
Don't have an account?
Karthik j
How to make the docker composer to stay on the page.
In LWC Onclick of a button, I have written a code to open docker composer but it does not stay on the page. This is my code.
<template if:true={showRatingPage}>
<div class="slds-docked_container">
<section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open slds-has-focus" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
<header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
<div class="slds-media slds-media_center slds-no-space">
<div class="slds-media__figure slds-m-right_x-small">
<span class="slds-icon_container">
<svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
<use xlink:href="/_slds/icons/standard-sprite/svg/symbols.svg#note"></use>
</svg>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-truncate" id="dialog-heading-id-1" title="Header"><b>Customer Rating Service</b></h2>
</div>
</div>
<div class="slds-col_bump-left slds-size_1-of-4 slds-shrink-none">
<button class="slds-button slds-button_icon slds-button_icon" title="Minimize window">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
</svg>
<span class="slds-assistive-text">Minimize Composer Panel</span>
</button>
<button class="slds-button slds-button_icon slds-button_icon" title="Expand Composer">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
</svg>
<span class="slds-assistive-text">Expand Composer Panel</span>
</button>
<button class="slds-button slds-button_icon slds-button_icon" title="Close">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">Close Composer Panel</span>
</button>
</div>
</header>
<div class="slds-docked-composer__body" id="dialog-content-id-1">
<div class="slds-m-top_small slds-m-bottom__small">
<div class="slds-p-vertical_medium lgc-bg">
<br>
<lightning-card>
<lightning-tile label="Customer" type="media">
<lightning-avatar slot="media" variant="circle" size="small" src={CX_Image} fallback-icon-name="standard:person_account"
alternative-text="Customer"></lightning-avatar>
<div class="rate">
<input type="radio" id="star5" value="5" onchange={handleRating} />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" value="4" onchange={handleRating} />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" value="3" onchange={handleRating} />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" value="2" onchange={handleRating} />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" value="1" onchange={handleRating} />
<label for="star1" title="text">1 star</label>
</div>
</lightning-tile>
</lightning-card>
</div>
</div>
</div>
</section>
</div>
</template>
Please help me, Thanks.
<template if:true={showRatingPage}>
<div class="slds-docked_container">
<section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open slds-has-focus" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
<header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
<div class="slds-media slds-media_center slds-no-space">
<div class="slds-media__figure slds-m-right_x-small">
<span class="slds-icon_container">
<svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
<use xlink:href="/_slds/icons/standard-sprite/svg/symbols.svg#note"></use>
</svg>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-truncate" id="dialog-heading-id-1" title="Header"><b>Customer Rating Service</b></h2>
</div>
</div>
<div class="slds-col_bump-left slds-size_1-of-4 slds-shrink-none">
<button class="slds-button slds-button_icon slds-button_icon" title="Minimize window">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
</svg>
<span class="slds-assistive-text">Minimize Composer Panel</span>
</button>
<button class="slds-button slds-button_icon slds-button_icon" title="Expand Composer">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
</svg>
<span class="slds-assistive-text">Expand Composer Panel</span>
</button>
<button class="slds-button slds-button_icon slds-button_icon" title="Close">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">Close Composer Panel</span>
</button>
</div>
</header>
<div class="slds-docked-composer__body" id="dialog-content-id-1">
<div class="slds-m-top_small slds-m-bottom__small">
<div class="slds-p-vertical_medium lgc-bg">
<br>
<lightning-card>
<lightning-tile label="Customer" type="media">
<lightning-avatar slot="media" variant="circle" size="small" src={CX_Image} fallback-icon-name="standard:person_account"
alternative-text="Customer"></lightning-avatar>
<div class="rate">
<input type="radio" id="star5" value="5" onchange={handleRating} />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" value="4" onchange={handleRating} />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" value="3" onchange={handleRating} />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" value="2" onchange={handleRating} />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" value="1" onchange={handleRating} />
<label for="star1" title="text">1 star</label>
</div>
</lightning-tile>
</lightning-card>
</div>
</div>
</div>
</section>
</div>
</template>
Please help me, Thanks.