👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Troubleshooting rendering issues with a static document in Sanity v3

6 replies
Last updated: Jan 18, 2023
hi guys,
i'm building my first tool in v3 which is a simple static how-to document, but i'm struggling with something very trivial. For some reason the document is rendered only for 100vh. This is apparently coming from the default styling. See the change from white to gray and the section highlighted in the styling.

Is there anything i can do here?
Jan 13, 2023, 5:55 AM
Hey
user R
! Can you share your code?
Jan 13, 2023, 6:35 PM
In the meantime, I would try• making sure there are explicitly stated widths even if they're just 100%
• maybe add an overflow : auto to pair with the height on #sanity
• add explicit display properties to #sanity
It's funny that there are things called "standards" for HTML and CSS when every single browser handles them differently but that can account for
some of the basics being handled by most browsers
It's also possible that something inside the resulting code in #sanity is throwing it off. I've seen Chrome forgive open/close brackets that Firefox won't, for example.
Jan 13, 2023, 7:12 PM
hey guys, sorry it's been a bit long. Here's a snapshot of the code.
I don't think i'm doing anything fancy just yet and i'm definitely not defining any styles. I think this behaviour comes from the defaults for the tools api

import {MdDashboard} from 'react-icons/md'
import {Card, Text, Stack, Heading, Container} from '@sanity/ui'

// import tutorialVideo from '../../../static/tutorial.MP4'
const videoUrl =
  '<https://cdn.sanity.io/files/q42ljy6v/production/304acb309bba8933769e16fee74cc52c1042e714.mov>'

export const usageGuide = () => {
  return {
    title: 'Sanity CMS Usage Guide',
    name: 'sanity-usage-guide', // localhost:3333/my-custom-tool
    icon: MdDashboard,
    component: (props) => {
      return (
        <>
          <Container>
            <Container paddingY={4}>
              <Stack space={4} padding={4}>
                <Heading>Quick Start Guide</Heading>
                <video controls width="100%" style={{maxWidth: '800px'}}>
                  <source src={videoUrl} type="video/mp4" />
                </video>
              </Stack>
            </Container>
            <Stack space={4} padding={4}>
              <Heading>Definitions:</Heading>
              <Heading>Sanity Concepts</Heading>
              <Text>Documents</Text>
              <Text>Object</Text>
              <Text>Reference</Text>
              <Text>Users & Roles</Text>
              <Heading>Properties</Heading>
              <Text>Villa Document</Text>
              <Text>Listings</Text>
              <Heading>Categories</Heading>
              <Text>Categories group villas into specific segments.</Text>
              <Heading>Collections</Heading>
              <Text>
                Collections are similar to categories, since they also help to segment villas into
                groups. The difference is that collections where conceive as 'landing page' approach
                that allows to quickly assign properties to each group to publish them.
              </Text>
            </Stack>
          </Container>
        </>
      )
    },
  }
}
Jan 17, 2023, 7:10 AM
I was actually able to reproduce this using the Sanity UI arcade. It seems to come down to the "space" prop on the highest-level Stack.
Not that it's an inherent issue, but tweaking that was the biggest way to throw things off. The actual "problem" is the flow of the parent containers. Somehow the Stack's padding ( which apparently is just a renamed grid-gap property) bust outside of the parent Container.

When I add
style={{height:'100%',overflow:'auto'}} to that overall parent container, it expands to meet the boundaries of everything contained inside of it.
I am unsure of the prop-based way to make that happen but for the time being it's a simple fix.
Jan 17, 2023, 3:31 PM
thanks
user S
, it did the job. I'm 99% sure i tried setting the height but apparently the overflow does the trick then.
Jan 18, 2023, 6:59 AM
No problem. Honestly it's one of those things I've learned to accept without explanation that I know works from experience. Just like it's 2023 and you still have to use six lines of CSS to center things sometimes instead of being able to write "center things" lol
Jan 18, 2023, 3:35 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?