function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Karthik jKarthik 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.User-added image 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.