UI Builder -Why does Document Display component overlay entire tab?

bradwestvig
Giga Guru

I'm looking to use the Document Display component to show our users a document while they are working on a related record.  I would like it to stay in the sidebar, similar to the attachment list or templates.  But no matter where I've tried to use Document Display it uses the entire tab, and you can't see the related content.

 

Here you see add the component document display and set an attachment for reference.

2023-01-05_11-52-32.png

 

The side bar shows 

2023-01-05_11-53-02.png

Then when you click on it this happens

2023-01-05_11-53-43.png

 

Is there a better approach?

1 ACCEPTED SOLUTION

Hello @bradwestvig@tstocking and @Stephen Farrar, I managed to solve this by creating a container (Layouts -> Flexbox) with the following CSS settings for the internal layer:

 

 

{
    display: flex;
    flex-direction: column;
    height: 1500px;
    position: relative;
    width: 100%;
    
}

 

 

 

The key here is the position: relative; property. You can adjust the other settings based on your needs and requirements. Inside this container, insert the Document Viewer component, and it will stay within the container. Hope this helps others who may encounter the same issue.

View solution in original post

9 REPLIES 9

Sorry for the delayed response @bradwestvig  - we ended up just keeping the document display full screen for now, customer seems to be happy enough with that for now.

 

I didn't try, but given the modal seemed to contain it probably you could create a custom sized modal and put the document display component inside that and it might achieve what you're after.

Hi Brad,

 

We are running into the same issue. Were you ever able to get around not using an iframe and you are using an iframe, would you mind sharing the code to get it to display a document related to the current record?

 

Thanks in advance,

Todd

Hi @tstocking , I need to display the documents related to a record when a user selects a particular record. Did you find any solution. please share the solution if you got any.

 

Thanks in advance,

Ani

Hello @bradwestvig@tstocking and @Stephen Farrar, I managed to solve this by creating a container (Layouts -> Flexbox) with the following CSS settings for the internal layer:

 

 

{
    display: flex;
    flex-direction: column;
    height: 1500px;
    position: relative;
    width: 100%;
    
}

 

 

 

The key here is the position: relative; property. You can adjust the other settings based on your needs and requirements. Inside this container, insert the Document Viewer component, and it will stay within the container. Hope this helps others who may encounter the same issue.

mmserenityt
Tera Contributor

@Stephen Farrar by any chance did you get a "canvas error" when using the document display in a modal?  this happens when I use the delete button on the preview.  the attachment is removed and the modal closes(via event) but the i get a "canvas error"