Add a left and right icon for responsive horizontal scroll menu on table records
Application Type
Traditional Web

I would like to add a left and right icon for my table records that onclick it scrolls the table horizontally.

Also everytim I change the width of the cells in the Table records, doesnt seem to change when I edit the width for each cell. As a result the column text is squashed together and doesnt appear on one line.

Thanks 

Solution

Hii @Yats 

Thanks for your confirmation. Please follow the below steps to achieve this. I have attached app sample as well (If you need to take reference but still the steps will be useful)


We will achieve this in 3 steps:

Step 1: Setup the Div (You can use Web Block for the Reusability)

  • Please create 2 Div - 1) myDiv 2) content
  • Place your Table in the "content" div as I have placed the text
  •  Add two actions button using container
  • Action Buttons will be used to Navigate the Table. 

Now, do a sample Publish of application. Once published copy exact Div ID for myDIV and content from browser. 


Step 2: Setup the CSS and JS

CSS: (add in Webblock Style Sheet)

#myDIV { /* USE THE EXACT DIV ID COPIED FROM BROWSER */
  height: 550px; /* MANAGE HEIGHT AS YOU WANT */
  overflow: auto;
}

#content { /* USE THE EXACT DIV ID COPIED FROM BROWSER */
  height: 800px;
  width: 2000px;
  background-color: coral;
}


JS (Add in web block JS)

function myFunction() {
  var elmnt = document.getElementById("<Enter Exact myDiv ID>");
  elmnt.scrollLeft += 50;
  elmnt.scrollTop += 0;
}
function myFunctionR() {
  var elmnt = document.getElementById("<Enter Exact myDiv ID>");
  elmnt.scrollLeft -= 50;
  elmnt.scrollTop += 0;
}


Step 3: Setup Navigation 

  • Add onclick property for navigation (Put actions in container)
    • onclick = "myFunction()" for container to move Right
    • onclick = "myFunctionR()" for container to move Left


Publish the app and it will work. You can do the CSS Changes for Design. You may need to remove bg color. 

If you are still facing the issues, please give me access to the page where you have table. I will give you the exact code to use.

Thanks

HorizontalScroll.oap

Please follow these instruction for Horizontal Scroll

 

Thank you, will you be able to share a oml or image just so it’s more clear. That would be great. 

Okay, give me sometime. I will share the app with you that will have one button to click and click will scroll container horizontally. I will able to develop it for you either by tonight or tomorrow morning. Thanks  

Thank you, the data that im scrolling through is a table records in a container that has too many columns to view on the screen.


I had origianally added this to the container but didnt meet all the requirements needed. The example you have given is perfect with the two icons scrolling through but just not sure how to implement it 

"overflow-x: auto; display:block;"


Thanks again 

Solution

Hii @Yats 

Thanks for your confirmation. Please follow the below steps to achieve this. I have attached app sample as well (If you need to take reference but still the steps will be useful)


We will achieve this in 3 steps:

Step 1: Setup the Div (You can use Web Block for the Reusability)

  • Please create 2 Div - 1) myDiv 2) content
  • Place your Table in the "content" div as I have placed the text
  •  Add two actions button using container
  • Action Buttons will be used to Navigate the Table. 

Now, do a sample Publish of application. Once published copy exact Div ID for myDIV and content from browser. 


Step 2: Setup the CSS and JS

CSS: (add in Webblock Style Sheet)

#myDIV { /* USE THE EXACT DIV ID COPIED FROM BROWSER */
  height: 550px; /* MANAGE HEIGHT AS YOU WANT */
  overflow: auto;
}

#content { /* USE THE EXACT DIV ID COPIED FROM BROWSER */
  height: 800px;
  width: 2000px;
  background-color: coral;
}


JS (Add in web block JS)

function myFunction() {
  var elmnt = document.getElementById("<Enter Exact myDiv ID>");
  elmnt.scrollLeft += 50;
  elmnt.scrollTop += 0;
}
function myFunctionR() {
  var elmnt = document.getElementById("<Enter Exact myDiv ID>");
  elmnt.scrollLeft -= 50;
  elmnt.scrollTop += 0;
}


Step 3: Setup Navigation 

  • Add onclick property for navigation (Put actions in container)
    • onclick = "myFunction()" for container to move Right
    • onclick = "myFunctionR()" for container to move Left


Publish the app and it will work. You can do the CSS Changes for Design. You may need to remove bg color. 

If you are still facing the issues, please give me access to the page where you have table. I will give you the exact code to use.

Thanks

HorizontalScroll.oap

Welcome Mate. I found its use and developed Component for the Reactive: https://www.outsystems.com/forge/component-overview/10356/horizontal-scroll-reactive


Hahahaha.. Thanks :) 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.