CSS for Form Scroll Bar
AnsweredAnybody know the CSS I would use to change the color of the right hand scroll bar on the form?
-
Official comment
Hi Brad,
You can use the below CSS snippet either as part of Global CSS so that it is applicable to all applications across the platform or you can use it in the inline CSS Injector if your requirement is only for one application.
.nicescroll-rails > div {
background-color: red !important; //Color of your choice
}In addition, the scroll bar is implemented with the help of an external library called "Nice Scroll". While discussing with the product team about the CSS options, we were informed that the product team is planning to move away from the third party library file and implement native scroll. Therefore, the provided solution holds good as of today's AgilePoint Version (NX v7 SU2.5).
Hope this helps.!
Thanks,
Varun AgasthyaComment actions -
You may have to use JavaScript and in the OnSectionNavigation function, change the CSS with JS, as the secondary sections might not have elements created when the form is first loaded, and might not be affected by the same CSS as is above.
Additionally, if you use the Console window in your Browser, you can search through the elements and discover if the secondary section scroll bars are indeed the same as the primary section scroll bar to see if you just need a little more robust CSS snippet than was provided up above
-
https://documentation.agilepoint.com/00/appbuilder/cloudformEvents.html
Look for onSectionNavigation there, and you'll put your actions in there.
It'll be something like this (this is untested and probably not perfect)
$('.nicescroll-rails > div').css('background-color', 'blue');
-
I placed the following code in the Shared Javascript section, but it didn't work. I also tried substituting eventArgs with eventArgs.previousSection, but that thru an unexpected token error. Again, not well versed in JS. Also, if possible, I'd like to use a hex value for the color.
eFormEvents.onSectionNavigation = function (eventArgs)
{
$('.nicescroll-rails > div').css('background-color', 'blue');
} -
My IT guy reworked the JS to what I have shown below. The original snippet from Casey was accurate. The problem is that it tries to call that function before the section loads. We put in a timer to delay the call, which seems to work. The smallest amount of time we could set it to that would still allow it to work was 1500ms. What my IT guy wasn't sure about is if the timer could be replaced by something else, such as a section load. This is where I would presume "eventArgs.previousSection" comes into play, but we couldn't figure out how to use it. Thoughts?
eFormEvents.onSectionNavigation = function (eventArgs)
{
setTimeout(function(){ $('.nicescroll-rails > div').css('background-color', '#521c1a') }, 1500);
}
Please sign in to leave a comment.
Comments
13 comments