<a href="/wiki/pages/viewpage.action?pageId=2338376450">Cookie Settings Dialog (Quartz)</a>
- Created by Milanov, Kalin, last modified on Nov 16, 2022
Table of Contents
Overview
The Cookie Dialog allows you to easily manage the cookie settings according to the needs of the specific product.
Look and Feel
<p><div> <div>Quartz Light</div> <div>I’m</div> </div> <div> <div><strong>Quartz Dark</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/cookie-settings-dialog-quartz/media1_1145a22c4692c412aa8ec9b488639bdd96bba4d79.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1145a22c4692c412aa8ec9b488639bdd96bba4d79.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1145a22c4692c412aa8ec9b488639bdd96bba4d79.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/cookie-settings-dialog-quartz/media%5C_1145a22c4692c412aa8ec9b488639bdd96bba4d79.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/cookie-settings-dialog-quartz/media_1145a22c4692c412aa8ec9b488639bdd96bba4d79.png?width=750&format=png&optimize=medium</a>" width="1097" height="951"> </picture> </div> </div> <div> <div><strong>Quartz HCB</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/cookie-settings-dialog-quartz/media1_1560f88bdb83cbe86a4914292b7368146b3c40578.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1560f88bdb83cbe86a4914292b7368146b3c40578.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1560f88bdb83cbe86a4914292b7368146b3c40578.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/cookie-settings-dialog-quartz/media%5C_1560f88bdb83cbe86a4914292b7368146b3c40578.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/cookie-settings-dialog-quartz/media_1560f88bdb83cbe86a4914292b7368146b3c40578.png?width=750&format=png&optimize=medium</a>" width="1097" height="951"> </picture> </div> </div> <div> <div><strong>Quartz HCW</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/cookie-settings-dialog-quartz/media1_1b1cee520ddc2cb18fd8c544532a2b51ac951e33a.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1b1cee520ddc2cb18fd8c544532a2b51ac951e33a.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1b1cee520ddc2cb18fd8c544532a2b51ac951e33a.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/cookie-settings-dialog-quartz/media%5C_1b1cee520ddc2cb18fd8c544532a2b51ac951e33a.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/cookie-settings-dialog-quartz/media_1b1cee520ddc2cb18fd8c544532a2b51ac951e33a.png?width=750&format=png&optimize=medium</a>" width="1097" height="951"> </picture> </div> </div></p>
Layout and Structure
For more information about the Cookie Settings Dialog see the Design System article.
<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div>A</div> <div>Modal Dialog</div> <div>The dialog control interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.For more details see <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2033847432">Dialog (Fiori 3)</a></div> </div> <div> <div>B</div> <div>Sap.m.page</div> <div>The sap.m.Page is the building block of simple applications.<br>It consists of a Header, Subheader, Content area and a Footer. For more details see <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2038595095">Page (Fiori 3)</a></div> </div> <div> <div>B1</div> <div>All-round Padding Classes</div> <div> <p>All-round padding appear on all sides of the container they are applied to.</p> <p>height: 1rem</p> <p>width: 1rem</p> </div> </div> <div> <div>B2</div> <div>Spacing Between Containers</div> <div>height: 1rem</div> </div> <div> <div>C</div> <div>Grid List</div> <div>Grid List utilizes the CSSGrid and inherits the behavior from the sap.m.List.The content area is a blank canvas that accepts all kind of content.For more information see <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2048486665">GridList (Fiori 3)</a></div> </div> <div> <div>D</div> <div>Switch</div> <div>The switch control mimics a physical switch that allows users to turn things on or off. For more details see <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2033867295">Switch (Fiori 3)</a></div> </div> <div> <div>E</div> <div>Panel</div> <div>The Panel is a container control that is usually used to group and organize content.It consists of Header (A) and Content area (B). A panel can expand and collapse.When one panel is expanded it automatically collapse when another one is expanded. For more details see <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2040117220">Panel (Fiori 3)</a></div> </div> <div> <div>F</div> <div>Tree Table</div> <div>The TreeTable control provides a comprehensive set of features to display hierarchical data and it is structured in rows and columns and grouped into nodes.For more details see <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2060038188">Tree (Fiori 3)</a> and <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2Fvisualcore%2FTable%2B%2528Fiori%2B3%2529%2B-%2BGeneral%2BSpecification">Table (Fiori 3) - General Specification</a></div> </div> <div> <div>G</div> <div>Padding in Container</div> <div> <p>height: 1rem</p> <p>width: 1rem</p> </div> </div>
When setting up a Modal Dialog for displaying Cookie Dialog consider the following properties and their recommended values. Adjust the values if needed to best fit your scenario.
<div> <div>Property</div> <div>Size S</div> <div>Size M</div> <div>Size L</div> <div>Size XL</div> <div>Notes</div> </div> <div> <div>Width</div> <div> <p>min-width: 19rem;</p> <p>width: 95%</p> </div> <div>width: 75%</div> <div>width: 55%</div> <div> <p>width: 45%</p> <p>max-width: 60rem;</p> </div> <div>Do not change min-width value to ensure proper size on mobile devices.</div> </div> <div> <div>Height with expand panel</div> <div> <p>height: 90%</p> <p>max-height: 32rem</p> </div> <div> <p>height: 60%</p> <p>max-height: 30rem</p> </div> <div> <p>height: 50%</p> <p>max-height: 32rem</p> </div> <div> <p>height: 50%</p> <p>max-height: 34rem</p> </div> <div></div> </div>