# How can I extend a horizontal list with several elements? **URL:** \ **Category:** Ask for Help\ **Created:** [February 23, 2023, 7:28pm UTC](https://community.glideapps.com/t/how-can-i-extend-a-horizontal-list-with-several-elements/58397 "2023-02-23T19:28:07Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Braska\_Tube](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/braska_tube/32/53599_2.png) [@Braska\_Tube](https://community.glideapps.com/u/Braska_Tube)\ **Post date:** [February 23, 2023, 7:28pm UTC](https://community.glideapps.com/t/how-can-i-extend-a-horizontal-list-with-several-elements/58397/1 "2023-02-23T19:28:07Z")
I want to create a matrix that changes colour depending on whether a value is reached or exceeded. My problem is that I can’t make the grid big enough. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/4/94d9b0db805e1c1fb797200238294abc20530ef1.png) Is it possible to expand the table on the right with several columns? There should be about 15 more columns. In other words, you should be able to swipe to the right. ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [February 23, 2023, 8:00pm UTC](https://community.glideapps.com/t/how-can-i-extend-a-horizontal-list-with-several-elements/58397/2 "2023-02-23T20:00:35Z")
Not possible unless you’re creating some sort of grid in a 3rd party app (like quickcharts or charts.js) that is then displayed in an image/webview component (depending on the platform utilized.) ---
**Author:** ![Braska\_Tube](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/braska_tube/32/53599_2.png) [@Braska\_Tube](https://community.glideapps.com/u/Braska_Tube)\ **Post date:** [February 23, 2023, 8:34pm UTC](https://community.glideapps.com/t/how-can-i-extend-a-horizontal-list-with-several-elements/58397/3 "2023-02-23T20:34:12Z")
Thank you for the answer. Looking forward to a new tutorial from you ^^ ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [February 23, 2023, 8:52pm UTC](https://community.glideapps.com/t/how-can-i-extend-a-horizontal-list-with-several-elements/58397/4 "2023-02-23T20:52:06Z")
You could dynamically generate an html table with the appropriate formatting and display that on the screen. This won’t allow you to interact with the matrix, but it would be useful for display purposes. ---
**Author:** ![Braska\_Tube](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/braska_tube/32/53599_2.png) [@Braska\_Tube](https://community.glideapps.com/u/Braska_Tube)\ **Post date:** [February 23, 2023, 9:02pm UTC](https://community.glideapps.com/t/how-can-i-extend-a-horizontal-list-with-several-elements/58397/5 "2023-02-23T21:02:01Z")
Thanks unfortunately some calculations have to take place through the cells for it to work. I had imagined it something like this: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/1/418fa9d73822af8fbabcdfc8a6a68553cda84b36.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/a/9adf2bfdf37fc3de689fe30afaabaeba298a7e08.png) thank you for the support ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [February 23, 2023, 9:11pm UTC](https://community.glideapps.com/t/how-can-i-extend-a-horizontal-list-with-several-elements/58397/6 "2023-02-23T21:11:59Z")
Still should be doable. It’s just a matter of using IF columns and Template columns to build out each `` tag for each cell (with some inline CSS styling based on the calculated value), then wrapping it in a `` tag for each row, and finally wrap the whole thing in a `` tag. Then display it using a rich text component. Not an easy setup, but doable. ---
**Author:** ![Braska\_Tube](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/braska_tube/32/53599_2.png) [@Braska\_Tube](https://community.glideapps.com/u/Braska_Tube)\ **Post date:** [February 26, 2023, 11:34am UTC](https://community.glideapps.com/t/how-can-i-extend-a-horizontal-list-with-several-elements/58397/7 "2023-02-26T11:34:34Z")
That’s too high for me, after all, I have now bought a book on HTML and CSS. Thank you all ---
**Author:** ![Braska\_Tube](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/braska_tube/32/53599_2.png) [@Braska\_Tube](https://community.glideapps.com/u/Braska_Tube)\ **Post date:** [February 28, 2023, 7:53am UTC](https://community.glideapps.com/t/how-can-i-extend-a-horizontal-list-with-several-elements/58397/8 "2023-02-28T07:53:07Z")
I found something in the CODEBOOK APP. For dynamic uses replace values in a Temp.Col. ``` #customers { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } #customers td, #customers th { border: 1px solid #ddd; padding: 4px; text-align: right; } #customers tr:nth-child(even){background-color: #f2f2f2;} #customers tr:hover {background-color: #f2f2a2;} #customers th { padding-top: 9px; padding-bottom: 9px; text-align: center; background-color: #04AA6D; color: white; } ## Items for sale: | Item | Price | QTY | Total | | --- | --- | --- | --- | | Digital Air Fryer | $120.00 | 1 | $120.00 | | Slot Toaster | $14.99 | 2 | $29.98 | | Webcam | $159.99 | 5 | $799.95 | | Printer | $199.99 | 1 | $199.99 | | Monitor | $155.99 | 3 | $467.97 | Not so pretty but should work ``` ---
**Author:** ![Jesus\_Valenzuela\_Dia](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jesus_valenzuela_dia/32/22582_2.png) [@Jesus\_Valenzuela\_Dia](https://community.glideapps.com/u/Jesus_Valenzuela_Dia)\ **Post date:** [February 17, 2024, 3:57pm UTC](https://community.glideapps.com/t/how-can-i-extend-a-horizontal-list-with-several-elements/58397/9 "2024-02-17T15:57:39Z")
Hi @Robert_Petitto, it may be a stupid question, How charts.js can be integrated in glide pages using web view component? I have worked only with quickscharts only but want to start using charts.js. Appreciate your help! ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [February 18, 2024, 12:07am UTC](https://community.glideapps.com/t/how-can-i-extend-a-horizontal-list-with-several-elements/58397/10 "2024-02-18T00:07:38Z")
What I usually do is work on a function in Github. Define your input variables, setup a variable to store your HTML, CSS and JS code, and return it as URI. > Here’s a sample function I made a while ago.