Skip to main content
Question

box-ui-elements ContentPreview react component header is always hidden

  • May 22, 2025
  • 4 replies
  • 6 views
C
Forum|alt.badge.img

I am trying to use the ContentPreview react component of the box-ui-elements. I have successfully implemented the ContentPicker with no issues, I am now trying to add the ContentPreview and I believe I am using everything correctly, but no matter what settings I adjust I cannot get the header to display. I am trying to add the showAnnotations and showDownload features to the ContentPreview but I believe because the header is hidden that none of these options are working. See my code below:

 

fileId={fileId}
token={token}
header={'light'}
logoUrl={'box'}
showAnnotations={true}
showDownload={true}
language={'en-US'}
messages={enMessages}
/>

 

I am setting the fileId and token elsewhere in my code so those values are good, I am seeing the ContentPreview load and I see my file, the thing is like I mentioned before that non of the extra features or the header are shown, am I missing something for getting the header to display???

    4 replies

    C
    Forum|alt.badge.img

    This is what my current preview window looks like, just the file preview, no box logo, no header, no download/annotation/print buttons: 

    BOX_ft29y5fj7h4ghoiblbhzqg9yj68n7xez.png 

    Inspecting the HTML, it looks like any part of the header is hidden:

    BOX_e766stm53eu0b0nvnz01bbobfenk52gt.png

     

     

    I have looked at the examples as well as the box-ui-elements-demo which only provides a basic example, I cannot even find a working example or test of enabling the header, annotations, or download features with the react ContentPreview.

    C
    Forum|alt.badge.img

    Sorry for the mess. Unfortunately, we are still in the process of migrating some of the Preview library functionality (specially the header) over to the Preview React UI Element. Hence the header, logoUrl and showAnnotations properties have no effect at the moment. You can instead use a new boolean prop hasHeader instead as shown in this example https://github.com/box/box-content-preview-demo/blob/master/src/index.js. Please upgrade to UI Elements v7 via npm (and respective peer dependencies). I have added a note on the README.md https://github.com/box/box-ui-elements#props-3 for Preview options.

    C
    Forum|alt.badge.img

    Thanks alot, I'll check out the new version and see how it goes. Are the annotations still supported as well?

    C
    Forum|alt.badge.img

    Also, showDownload --> canDownload (which visually shows/hides the download and print button in the header), however this is defaulted to true, so you don't have to pass it in as a prop. Annotations button is missing in the header atm.

    Terms & ConditionsCookie settingsAccessibility statement