Skip to content

Styling Layout

Flexible and Grid Layouts

document-reader and camera-snapshot components have width and height set to 100% by default and therefore try to fit their container element. This should not affect correct CSS Grid positioning, but for Flexbox make sure to style document-reader dimensions and set flex-basis.

See the example:

document-reader.flex-item {
    width: auto;
    height: auto;
    flex-basis: 500px; // distinct width of your choice
}

CSS Parts

To customize the component's element appearance, use the part attribute and define the desired CSS properties. For example:

document-reader::part(foo) {
    /* Styles to apply to the `foo` part */
    background: red;
}

Info

For more details about ::part() CSS pseudo-elements, see the article at MDN Web Docs.

See the different available customization examples by the following links.

Customize Icons

For more advanced customization, such as changing the default element's icon, you can combine ::part() with other CSS pseudo-elements and properties.

Consider the example of changing the camera button's icon.

1. On the web page, find the desired part element's name, using the Inspect Element functionality or the web browser's Developer Tools.

For example:

<button part="menu-from-camera-button" class="_button_73xxo_1 _camera-button_wghmy_46" data-e2e="from-camera">
    <span>Camera</span>
</button>

Info

For more details about browser developer tools, see the article at MDN Web Docs.

2. Use the named part attribute with the ::before pseudo-element and change the background-image property appropriately. See the examples below.

Set the new image directly in Base64 format:

document-reader::part(menu-from-camera-button)::before {
    background-image: url("data:image/svg+xml;base64,<BASE64_IMAGE_STRING>");
}

Define the absolute or relative path to image:

document-reader::part(menu-from-camera-button)::before {
    background-image: url("https://pictures.com/some_image.png");
}

Of course, any other CSS properties of the part elements are available too. For example, to resize the camera button's icon you can use:

document-reader::part(menu-from-camera-button)::before {
    width: 30px;
    height: 30px;
}

Next Steps