Increase lable width/space

Technical Support
1

Which product are you using?
PDF Express Js Plus

PDF.js Express Version
8.X.X.X

Detailed description of issue
i need to increase the width/space of the action button label for example, ```
{
type: ‘actionButton’,
label: ‘1’,
onClick: () => console.log(‘clicked’),
},

but currently it is breaking into 3 lines

**Expected behaviour**
 need to increase the width/space of the action button label for example, and arrange the action buttons one below the other```
{
        type: 'actionButton',
        label: '1',
        onClick: () => console.log('clicked'),
      },
```here in above code label = '1' instead of '1' i need to give 'Some text' with out line break,
and arrange the action buttons one below the other

**Does your issue happen with every document, or just one?**
Yes

**Link to document**
{Provide a link to the document in question if possible}

**Code snippet**
instance.UI.contextMenuPopup.update([
                {
                    type: 'actionButton',
                    label: 'Test1',
                   
                },
                {
                    type: 'actionButton',
                    label: 'Test2',
                   
                },
                {
                    type: 'actionButton',
                    label: 'Test3',
                  
                },
               
            ])
3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

Hi There,

Thanks for your question.

One thing you can do is create your own CSS file and put any style you want in the Context Menu Popup buttons. Following is a code snippet to guide you on how to make it.

WebViewer({
  ...options,
  css: '<path-to-your-css>',
}).then(instance => {
    ...
   instance.UI.contextMenuPopup.update([
      {
          type: 'actionButton',
          label: 'Test1',
      },
      {
          type: 'actionButton',
          label: 'Test2',
      },
      {
          type: 'actionButton',
          label: 'Test3',
      },  
    ])
})

I’m also adding a snapshot of a change there I made in the buttons’ style so you can see its selector. The highlighted part on the right side is the content of my CSS file.

Screen Shot 2022-05-02 at 6.32.06 PM
Screen Shot 2022-05-02 at 6.32.06 PM1389×650 121 KB

Let me know if this helps.

Thanks,
Dandara