Get help on Discord

Issue with split pane right button after adding iframe preview plugin

10 replies
Last updated: Oct 21, 2022
I’m getting a split pane right button in the editor after adding the iframe preview plugin, which is giving this error when clicked. If I remove the iframe preview code the button goes away. I’d prefer to remove the button again with iframe preview active, but not sure how.
AI Update

The "Split pane right" button appears when you add custom views to your documents using the Structure Builder's defaultDocumentNode configuration. When you install the iframe preview plugin, it typically adds a second view (the iframe preview) alongside the default form view, which triggers Sanity Studio to show the split pane button.

Here's what's happening: When a document has multiple views defined, Sanity Studio automatically adds UI controls to let users toggle between viewing them side-by-side or individually. The split pane button is part of this built-in functionality.

To remove the split pane button

Unfortunately, there isn't a direct way to disable just the split pane button while keeping multiple views active. However, you have a few options:

Option 1: Only show one view at a time (Recommended)

If you don't want the split pane functionality, you can configure your defaultDocumentNode to only return a single view. You'll need to choose whether you want just the form or just the iframe preview:

// In your structure configuration
import type {DefaultDocumentNodeResolver} from 'sanity/structure'

export const getDefaultDocumentNode: DefaultDocumentNodeResolver = (S, {schemaType}) => {
  // Only for specific document types
  if (schemaType === 'post') {
    return S.document().views([
      S.view.form() // Only show the form view
    ])
  }
  
  return S.document()
}

Option 2: Configure the iframe plugin to not add views automatically

Check your iframe pane plugin configuration in sanity.config.ts. Some versions of the plugin allow you to control whether it automatically adds itself as a view. You may need to manually configure which documents get the iframe preview instead of having it apply globally.

Option 3: Use custom CSS to hide the button (Not recommended)

As a last resort, you could hide the split pane button with custom CSS in your Studio, though this is fragile and may break with Studio updates:

/* In your studio's custom CSS */
[data-ui="SplitPaneButton"] {
  display: none !important;
}

The split pane button is controlled by the Structure Builder's views configuration, and it appears automatically whenever you have more than one view defined for a document. The cleanest solution is to be intentional about which views you want to offer for each document type using the defaultDocumentNode resolver.

Relevant code. If I remove 
.child
the button is gone. Not sure why it appears from adding the iframe preview
well of course because the child has a button defined in the 
reload: { button: true,…}

The error might be occurring in your 
productionUrl
or the 
Iframe
component.Or did you not intend to add the 
preview
in the 
pane
as a 
view
to every 
page
doc?
you can also remove the button by setting 
bottom: false,
Hi, I think we are talking about different buttons here. I’ll add a screenshot for the one I mean. The “Split pane right” button appears after adding the child with the iframe preview. The button you see in the config is the reload button shown on the line below, setting that to false does not remove the “Split pane right”.
When pressing the split pane right I get the error posted initially. When removing the whole child part the split pane right is not there.
I don’t really know what the split pane right button is supposed to do, I don’t really need it. But as long as its there people will press it and report an issue that its not working
ah okay, I did not think of that button at all! This is why we have screenshots I guess 😁I will ask the team who works on that part of sanity if it is possible
Thanks 😄
A couple of thoughts here! You don't need to specify your child on an 
S.documentList()
. It'll automatically generate those for you. However, if you do want to use that method, here's an example you can tweak:
S.documentList()
          .title('Pages')
          .filter('_type == "category"')
          .child(id =>
            S.document()
              .documentId(id)
              .schemaType('category')
.views([S.view.form(), //other views])
          )
Another way would be to leave off the `child function entirely and use a 
getDefaultDocumentNode
function to handle your views.
export const getDefaultDocumentNode = () => S.document().views([
    S.view.form(),
    //insert custom view here
  ]);
};
export default S.list()
  .title('Example')
  .items([
    S.listItem()
      .title('Pages')
      .child(
        S.documentList()
          .title('Pages')
          .filter('_type == "category"')
  ])
user M
brilliant, problem solved! thank you!
You're welcome!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?