CODEWITHSUNDEEP
docusaurus
Cristian
Cristian

Reputation: 1458

Override max width of specific docs (not all docs)

I have a specific "doc" in the "docs" section, for which I need the max width to be bigger (because it contains 2 IFrames side by side).

I see that the guy specifying the max-width is: DocPageLayouMain:

But this component doesn't receive as param a specific page. It is the same for all pages. A child of it, DocItem knows the current page (which may communicate via metadata that it needs the bigger size.

However, it doesn't have the "power" to make the width bigger.

Any hints of how I could achieve this?

Thanks in advance :)

Upvotes: 1

Views: 1452

Answers (3)

Stefan Wallin
Stefan Wallin

Reputation: 1539

I achieved my goals, that where similar to this question, by using the fact that head is managed by React-Helmet.

That way for those in a category or wherever I thought was necessary I simply included this snippet:

my-page-that-wants-full-width.mdx

---
description: Live demo
hide_table_of_contents: true
sidebar_position: 10
---

<head>
  <html class="fullWidthContent">
</head>

# Demo

...

Then I simply added a styling rule for that classname, fullWidthContent in my custom.css-file.

custom.css:

html.fullWidthContent main > .container {
  max-width: initial !important;
}

Upvotes: 0

feketebence
feketebence

Reputation: 19

Simply set a custom CSS rule to the specific document by using it's generated docs-doc-id. As of Docusaurus v3.1.1, every document gets a unique ID as an HTML class.

Inspect the page with DevTools and the root <html> tag will have a class named like this:
docs-doc-id-path/from/docs/folder/to/specific/markdown/file

For example, the document generated from /docs/getting-started/intro.md Markdown file, will have the docs-doc-id-getting-started/intro class.

To customize the parts of that document which was generated from Markdown, use the following in the src/css/custom.css file:

/* Adding custom style to specific documents */
.docs-doc-id-getting-started\/intro .markdown {
  color: blue;
}

In your case, to increase the max-width, do the following:

/* Adding custom style to specific documents */
.docs-doc-id-getting-started\/intro .markdown {
  max-width: 80%; /* or use pixel value: max-width: 800px */

  /* Another useful attribute to control the content width: */
  width: fit-content;
}

NOTE: I tested this with the @docusaurus/preset-classic, I don't know if using other presets change this behaviour.

Based on this issue thread on docusaurus' GitHub.

Upvotes: 1

Cristian
Cristian

Reputation: 1458

I achieved my goal w/ the following modifs. However, I don't like that I've swizzeled a component = DocItem/Layout marked as "unsafe".

Run docusaurus swizzle <insert theme> DocItem/Layout -- --wrap to swizzle wrap.

import React from 'react';
import Layout from '@theme-original/DocItem/Layout';
import {useDoc} from '@docusaurus/theme-common/internal';

export default function LayoutWrapper(props) {
  const doc = useDoc();
  return (
    <div class={doc.frontMatter.full_width ? "" : "container"}>
      <Layout {...props} />
    </div>
  );
}

custom.css:

main > .container {
  /* 
    We disable this on the "normal" container, i.e. DocPage/Layout/Main.
    We want ONLY for this, hence we base our selector on the parent, which is a DOM element: <main>.
    We want to reuse this class in DocItem/Layout.
   */
  max-width: initial !important;
}

my-page-that-wants-full-width.mdx

---
description: Live demo
hide_table_of_contents: true
sidebar_position: 10
full_width: true
---

# Demo

...

Upvotes: 2

Related Questions