CSS for Form Scroll Bar

Answered

Follow

Brad Harr

• August 11, 2020 21:00

Anybody know the CSS I would use to change the color of the right hand scroll bar on the form?

0

• Official comment

  

  Varun Agasthya

  • August 12, 2020 07:04

  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 Agasthya

  Comment actions Permalink
• 

  Brad Harr

  • August 12, 2020 15:23

  Varun,

  This partially worked.  When I open my form, the scroll bar is now the color I want.  However, my form has multiple sections.  When I switch to section 2, for example, the scroll bar goes back to the default color and remains that way, even if I go back to section 1.

  Thoughts?

  0

  Comment actions Permalink
• 

  Casey Kolowinski

  • August 12, 2020 15:26

  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

  1

  Comment actions Permalink
• 

  Brad Harr

  • August 12, 2020 16:20

  It doesn't look like the element names change when the section is changed.  I'm not that versed in JavaScript.  If you have a moment to provide direction, I would be grateful :)

  0

  Comment actions Permalink
• 

  Casey Kolowinski

  • August 12, 2020 16:24

  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');

  1

  Comment actions Permalink
• 

  Brad Harr

  • August 12, 2020 18:02

  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');
  }

  0

  Comment actions Permalink
• 

  Casey Kolowinski

  • August 12, 2020 18:07

  Gimme a day and I'll see if I can get it for you. The rest of my day is too busy.

  0

  Comment actions Permalink
• 

  Sampat Patil

  • August 13, 2020 05:23

  Hi Brad,
  Please give a try with below css 
  .oob, .nicescroll-rails > div { background-color: red !important; }

  Let me know if this works.

   

  1

  Comment actions Permalink
• 

  Brad Harr

  • August 13, 2020 14:35

  I get an Unexpected Token error on Line 3:

  eFormEvents.onSectionNavigation = function (eventArgs)
  {
  .oob, .nicescroll-rails > div { background-color: red !important; }
  }

  0

  Comment actions Permalink
• 

  sysberry GmbH

  • August 13, 2020 15:43

  Hi Brad,
  You are now mixing css and JavaScript. Try in the console to build the right selector inside $('') and with this selector modify css parameters as earlier.
  Regards
  Alexey

  1

  Comment actions Permalink
• 

  Brad Harr

  • August 13, 2020 16:17

  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);
  }

  0

  Comment actions Permalink
• 

  Sampat Patil

  • August 13, 2020 17:40
  • Edited

  Hi Brad,

  
  This do not require script, below one line of css will help in changing color of scroll bar.
  
  

  .oob, .nicescroll-rails > div { background-color: red !important; }

   

  Let me know if this works.

   

  1

  Comment actions Permalink
• 

  Brad Harr

  • August 13, 2020 17:58

  Gotcha!  That was the ticket, thank you very much!

  1

  Comment actions Permalink

Please sign in to leave a comment.