# Increase lable width/space

**URL:** <https://pdfjs.community/t/increase-lable-width-space/1639>\
**Category:** Technical Support\
**Created:** [April 28, 2022, 8:36am UTC](https://pdfjs.community/t/increase-lable-width-space/1639 "2022-04-28T08:36:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Abhiramsa3](https://avatars.discourse-cdn.com/v4/letter/a/43a26b/32.png) [@Abhiramsa3](https://pdfjs.community/u/Abhiramsa3)\
**Post date:** [April 28, 2022, 8:36am UTC](https://pdfjs.community/t/increase-lable-width-space/1639/1 "2022-04-28T08:36:09Z")

</div>

**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’),  
},

````nohighlight
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',
                  
                },
               
            ])
````

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [April 28, 2022, 8:36am UTC](https://pdfjs.community/t/increase-lable-width-space/1639/3 "2022-04-28T08:36:13Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

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

Guides:
- [Customize toolbar in viewer - Header items - ActionButton](https://pdfjs.express/documentation/ui-customization/customizing-header.8#actionbutton)
- [Moving buttons into the header](https://pdfjs.express/documentation/ui-customization/move-button)
- [PDF.js Express Documentation - Customizing the UI](https://pdfjs.express/documentation#customizing-the-ui)

APIs:
- [UI.MenuOverlay - add(items [, dataElement])](https://pdfjs.express/api/UI.MenuOverlay.html#add__anchor)
- [Core.Tools.Tool - mouseDoubleClick(e)](https://pdfjs.express/api/Core.Tools.Tool.html#mouseDoubleClick__anchor)
- [Core.EventHandler - removeEventListener( [type] [, fn])](https://pdfjs.express/api/Core.EventHandler.html#removeEventListener__anchor)

Forums:
- [PDF file download progress callback](https://pdfjs.community/t/pdf-file-download-progress-callback/1207/4)
- [Help with Custom Rectangle tool button](https://pdfjs.community/t/help-with-custom-rectangle-tool-button/224/6)
- [Disable UI buttons in](https://pdfjs.community/t/disable-ui-buttons-in/1134/1)

---

<div class="post-metadata">

**Author:** ![dnavarro](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/dnavarro/32/707_2.png) [@dnavarro](https://pdfjs.community/u/dnavarro)\
**Post date:** [May 3, 2022, 1:51am UTC](https://pdfjs.community/t/increase-lable-width-space/1639/4 "2022-05-03T01:51:47Z")

</div>

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.

```javascript
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](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/cc18d190d5748608ef19d56fbafa271fe475c3b0.png)

Let me know if this helps.

Thanks,  
Dandara