Shrink the width of tabs to match contents

Support
1

If this is a bug report, please create it on GitHub instead. Follow this link:

on

Operating system

Windows

Joplin version

3.4.12

Desktop version info

Joplin 3.4.12 (prod, win32)

Device: win32, AMD Ryzen 7 5800H with Radeon Graphics
Client ID: 55ce0b2fbc8e4c0c8c573a6923b41b59
Sync Version: 3
Profile Version: 48
Keychain Supported: Yes
Alternative instance ID: -

Revision: e9a9f68

Backup: 1.4.4
Better Code Blocks: 2.0.1
CodeMirror Line Numbers: 2.0.0
Ez Table: 1.0.2
Favorites: 1.3.2
Freehand Drawing: 3.1.0
Insert Date: 1.0.1
Note list (Preview): 0.0.1
Note list and sidebar toggle buttons: 1.0.3
Note Tabs: 1.4.0
Outline: 1.5.14
Paste Special: 1.1.2
Persistent Editor Layout: 2.2.0
Remove Images: 0.0.2
Reset Checkboxes: 1.1.2
Rich Markdown: 0.16.3
Search & Replace: 2.2.0
Table Formatter Plugin: 1.2.1

What issue do you have?

I use the tabs plugin and I'm trying to add custom css so that the width of the tabs shrinks to the content (aka tab title) in order to save space.

I have tried

#tabs-container div {
     max-width: 10px!important;
     min-width: 30px!important;
}

The max-width does nothing and the min-width actually shrinks them down to 30px (which is what I would have expected max-width to do)

I also find it odd that all the tabs have an id of tab. I didn't think that was permitted.

image
image1042×583 41.1 KB

Any help would be appreciated.

2

Your max value is less than your min value. However I am not sure that you can always change the style for plugins using userstyle.css. Have a look at the the Note Tabs plugin settings (Advanced). It seems that the min and max values can be set there.

Screenshot
Screenshot957×600 47.6 KB

1 Like
3

I never even considered there were settings for the plugin.

Thank you so much!