Tries to improve a few gripes I have with Netsuite's UI.
I did this for just myself originally but figured it might help someone else...
Netsuite UI Improvements by Vgirard
Details
AuthorVgirard
LicenseNo License
Categoryapp.netsuite
Created
Updated
Code size4.3 kB
Code checksumed4e5583
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Features
-
Tabs
- Now flex-wraps instead of going off-screen
- Now sticks to the top of the screen when scrolling past
- "Display all tabs" button is now hidden
-
Records
- Categories now have a background and border for better readability
- Top bar now sticks to the top of the screen
- Top and bottom bars now flex-wraps when there are too many buttons.
- Upper-right buttons won't overflow outside of viewports with shorter width
-
Multi-selects & Dropdowns
- Were made wider to show all text instead of cutting it off
- Uses smaller font to fit more lines in the view
-
Timeout Popup has a red border to be more visible if you are using an extension that removes the blur effect.
-
Tooltips
- Made info tooltips readable when using the Dark Reader browser extension
-
Tables
- Minimized header width to fit more info in the page
- Made the headers sticky
- Added vertical lines to differentiate columns
- The buttons for editing tables now stay in the viewport when scrolling right
v11:
- Made buttons on the left of editable tables stay in the screen when scrolling right
v10: (Made some tables better, others will be improved someday when I get to it)
- Made some table headers sticky
- Minimized table header width to fit more info in the page
(At the price of having weird high headers so they don't get hidden behind other stickies) - Added vertical lines to better differentiate columns
v9:
- Added red border on timeout popup
v8:
- Fixed issue with grey box / padding above tabs
v7:
- Wrap the buttons on records top and bottom bar when there are too many.
v6:
Reverted: Made text input fields use the full length of their container
caused too many issues with other fields
v5:
- Made info tooltips readable when using Dark Reader
- Made text input fields use the full length of their container
v4:
- Added a minimum width to dropdowns and selects, so that "fit-content" does not shrink them to 0px when empty.
v3:
- Made the top bar of records sticky
- Fixed v2 issue of invisible background on certain tab headers
- Containers of multi-selects now scale accordingly to fit the box so it doesn't hide other elements
v2:
- Made the grey box transparent instead, for the few cases where it would hide informations
- Changed list selects to fit their content to show all text instead of cutting it off
- Made list selects font-size smaller to fit more text and lines in the view
Known Issues:
- Tabs headers might float near the top of the screen under certain contexts
v1:
- Tabs now wrap instead of going off-screen
- Tabs will stick to the top of the screen when scrolling past
- Hides the "Display all tabs" button
- Put a background and border on record categories for better readability
Known issues:
- Adds a grey box above sub-tabs so they don't end-up hidden behind tabs
Source code
/* ==UserStyle==
@name Netsuite UI Improvements
@version 20250404.16.53
@namespace https://userstyles.world/user/Vgirard
@description Tries to improve a few gripes I have with Netsuite's UI.I did this for just myself originally but figured it might help someone else...
@author Vgirard
@license No License
==/UserStyle== */
@-moz-document url-prefix("https://docs.oracle.com/") {
body > .noscript, body > .noscript ~ * {
opacity: 1 !important;
}
}
@-moz-document regexp(".+(.)app(.)netsuite(.)com(\\/).+") {
#timeoutpopup {
border: solid red 2px;
}
#ReadablePopupWithDarkMode,
#nlpopupsimple {
color: black !important;
}
#WrapRecordsTopAndBottomBarButtons,
td.uir-header-buttons > table > tbody > tr,
td.uir-secondary-buttons > table > tbody > tr {
display: flex !important;
flex-wrap: wrap;
gap: 0.5rem 0;
width: calc(100vw - 3rem) !important;
}
#FitTitleWidthToViewport,
.uir-page-title {
width: calc(100vw - 3rem) !important;
}
#StickyRecordsTopBar,
#div__body > form > table > tbody > tr:first-child {
position: sticky;
top: -1px;
z-index: 8;
background-color: var(--darkreader-neutral-background, white);
}
#KeepRecordListTopBar,
.uir-list-title--collapsed {
height: 33px;
opacity: 1;
margin-top: 14px !important;
}
#StickyTabs,
#FirstLevel,
#div__body > table.uir-table-block.uir_form_tab_container > tbody > tr:nth-child(1) {
position: sticky;
top: -1px;
z-index: 10;
min-height: 58px
}
#SecondLevel,
#results_tab_div > div > table > tbody > tr:nth-child(1),
.nltabcontent > .uir-table-block > tbody > tr:nth-child(1) {
position: sticky;
z-index: 10;
top: 53px
}
#ThirdLevel,
#StickTableHeaderAndImprovements,
.uir-machine-table-container {
& table {
& td {
border-right: solid 1px #8886 !important;
vertical-align: middle;
height: max-content
}
& > thead > tr,
& > tbody > .uir-machine-headerrow {
position: sticky;
top: 0;
background: #888;
z-index: 100 !important;
height: 3rem;
& > td,
.uir-list-header-td:not(#div__scrollbarSpacer) {
padding: 6px !important;
padding-top: 86px !important;
text-align: center;
vertical-align: bottom;
& div {
text-wrap: wrap;
word-break: keep-all;
width: min-content;
margin: auto;
}
}
}
}
}
#ImproveTables,
.uir-list-body {
& td {
border-right: solid 1px #8886 !important;
vertical-align: middle;
}
& .uir-list-headerrow > td {
padding: 6px !important;
text-align: center;
vertical-align: bottom;
& div {
text-wrap: wrap;
word-break: keep-all;
width: min-content;
margin: auto;
}
}
}
#wrap-tabs,
.bgtabbar > tbody > tr,
.bgsubtabbar > tbody > tr {
display: flex;
flex-wrap: wrap;
}
#HideShowAllTabsButton,
td.uir-unroll-tabs-button {
display: none;
}
#CategoriesBoxes,
.uir-tab-fields > tbody > tr > td {
padding: 2.5px !important
}
.nltabcontent table {
border-collapse: collapse;
}
.uir-fieldgroup-content {
box-shadow: inset 0 0 7px #8883;
background-color: #8888880a;
}
#FixDropdownSelect,
.dropdownDiv {
width: fit-content !important;
min-width: 300px;
}
.dropdownDiv {
min-height: 350px;
}
.uir-multiselect-option {
font-size: 75% !important;
height: 20px;
}
#SitckyLineEditOptions,
.machineButtonRow {
position: sticky;
left: 0;
}
#item_buttons {
float: left;
}
}