cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
stapes
Post Prodigy
Post Prodigy

Gallery grid appears not to be a straight line, & gaps appear between rows.

I am continuing with the project described in the link below, and trying to create an overlay of simple grid lines.

I figured I could use the Border property to provide the gridlines.

 

https://powerusers.microsoft.com/t5/Building-Power-Apps/Clickable-Image-is-this-possible-with-Power-...

 

The data for the grid is loaded here:

 

ClearCollect(colMapPins,IPL_GetMapLocations.Run());
ClearCollect(colGridMap,
	{id:1,location:"r1,c1",xCoords:0,yCoords:33},
	{id:2,location:"r1,c2",xCoords:48,yCoords:33},
	{id:3,location:"r1,c3",xCoords:96,yCoords:33},
	{id:4,location:"r1,c4",xCoords:144,yCoords:33},
	{id:5,location:"r1,c5",xCoords:192,yCoords:33},
	{id:6,location:"r1,c6",xCoords:240,yCoords:33},
	{id:7,location:"r1,c7",xCoords:288,yCoords:33},
	{id:8,location:"r1,c8",xCoords:336,yCoords:33},
	{id:9,location:"r1,c9",xCoords:384,yCoords:33},
	{id:10,location:"r1,c10",xCoords:432,yCoords:33},
	{id:11,location:"r1,c11",xCoords:480,yCoords:33},
	{id:12,location:"r1,c12",xCoords:528,yCoords:33},
	{id:13,location:"r1,c13",xCoords:576,yCoords:33},
	{id:14,location:"r1,c14",xCoords:624,yCoords:33},
	{id:15,location:"r1,c15",xCoords:672,yCoords:33},
	{id:16,location:"r1,c16",xCoords:720,yCoords:33},
	{id:17,location:"r1,c17",xCoords:768,yCoords:33},
	{id:18,location:"r1,c18",xCoords:816,yCoords:33},
	{id:19,location:"r1,c19",xCoords:864,yCoords:33},
	{id:20,location:"r1,c20",xCoords:912,yCoords:33},
	{id:21,location:"r1,c21",xCoords:960,yCoords:33},
	{id:22,location:"r1,c22",xCoords:1008,yCoords:33},
	{id:23,location:"r1,c23",xCoords:1056,yCoords:33},
	{id:24,location:"r2,c1",xCoords:0,yCoords:81},
	{id:25,location:"r2,c2",xCoords:48,yCoords:81},
	{id:26,location:"r2,c3",xCoords:96,yCoords:81},
	{id:27,location:"r2,c4",xCoords:144,yCoords:81},
	{id:28,location:"r2,c5",xCoords:192,yCoords:81},
	{id:29,location:"r2,c6",xCoords:240,yCoords:81},
	{id:30,location:"r2,c7",xCoords:288,yCoords:81},
	{id:31,location:"r2,c8",xCoords:336,yCoords:81},
	{id:32,location:"r2,c9",xCoords:384,yCoords:81},
	{id:33,location:"r2,c10",xCoords:432,yCoords:81},
	{id:34,location:"r2,c11",xCoords:480,yCoords:81},
	{id:35,location:"r2,c12",xCoords:528,yCoords:81},
	{id:36,location:"r2,c13",xCoords:576,yCoords:81},
	{id:37,location:"r2,c14",xCoords:624,yCoords:81},
	{id:38,location:"r2,c15",xCoords:672,yCoords:81},
	{id:39,location:"r2,c16",xCoords:720,yCoords:81},
	{id:40,location:"r2,c17",xCoords:768,yCoords:81},
	{id:41,location:"r2,c18",xCoords:816,yCoords:81},
	{id:42,location:"r2,c19",xCoords:864,yCoords:81},
	{id:43,location:"r2,c20",xCoords:912,yCoords:81},
	{id:44,location:"r2,c21",xCoords:960,yCoords:81},
	{id:45,location:"r2,c22",xCoords:1008,yCoords:81},
	{id:46,location:"r2,c23",xCoords:1056,yCoords:81},
	{id:47,location:"r3,c1",xCoords:0,yCoords:129},
	{id:48,location:"r3,c2",xCoords:48,yCoords:129},
	{id:49,location:"r3,c3",xCoords:96,yCoords:129},
	{id:50,location:"r3,c4",xCoords:144,yCoords:129},
	{id:51,location:"r3,c5",xCoords:192,yCoords:129},
	{id:52,location:"r3,c6",xCoords:240,yCoords:129},
	{id:53,location:"r3,c7",xCoords:288,yCoords:129},
	{id:54,location:"r3,c8",xCoords:336,yCoords:129},
	{id:55,location:"r3,c9",xCoords:384,yCoords:129},
	{id:56,location:"r3,c10",xCoords:432,yCoords:129},
	{id:57,location:"r3,c11",xCoords:480,yCoords:129},
	{id:58,location:"r3,c12",xCoords:528,yCoords:129},
	{id:59,location:"r3,c13",xCoords:576,yCoords:129},
	{id:60,location:"r3,c14",xCoords:624,yCoords:129},
	{id:61,location:"r3,c15",xCoords:672,yCoords:129},
	{id:62,location:"r3,c16",xCoords:720,yCoords:129},
	{id:63,location:"r3,c17",xCoords:768,yCoords:129},
	{id:64,location:"r3,c18",xCoords:816,yCoords:129},
	{id:65,location:"r3,c19",xCoords:864,yCoords:129},
	{id:66,location:"r3,c20",xCoords:912,yCoords:129},
	{id:67,location:"r3,c21",xCoords:960,yCoords:129},
	{id:68,location:"r3,c22",xCoords:1008,yCoords:129},
	{id:69,location:"r3,c23",xCoords:1056,yCoords:129},
	{id:70,location:"r4,c1",xCoords:0,yCoords:177},
	{id:71,location:"r4,c2",xCoords:48,yCoords:177},
	{id:72,location:"r4,c3",xCoords:96,yCoords:177},
	{id:73,location:"r4,c4",xCoords:144,yCoords:177},
	{id:74,location:"r4,c5",xCoords:192,yCoords:177},
	{id:75,location:"r4,c6",xCoords:240,yCoords:177},
	{id:76,location:"r4,c7",xCoords:288,yCoords:177},
	{id:77,location:"r4,c8",xCoords:336,yCoords:177},
	{id:78,location:"r4,c9",xCoords:384,yCoords:177},
	{id:79,location:"r4,c10",xCoords:432,yCoords:177},
	{id:80,location:"r4,c11",xCoords:480,yCoords:177},
	{id:81,location:"r4,c12",xCoords:528,yCoords:177},
	{id:82,location:"r4,c13",xCoords:576,yCoords:177},
	{id:83,location:"r4,c14",xCoords:624,yCoords:177},
	{id:84,location:"r4,c15",xCoords:672,yCoords:177},
	{id:85,location:"r4,c16",xCoords:720,yCoords:177},
	{id:86,location:"r4,c17",xCoords:768,yCoords:177},
	{id:87,location:"r4,c18",xCoords:816,yCoords:177},
	{id:88,location:"r4,c19",xCoords:864,yCoords:177},
	{id:89,location:"r4,c20",xCoords:912,yCoords:177},
	{id:90,location:"r4,c21",xCoords:960,yCoords:177},
	{id:91,location:"r4,c22",xCoords:1008,yCoords:177},
	{id:92,location:"r4,c23",xCoords:1056,yCoords:177},
	{id:93,location:"r5,c1",xCoords:0,yCoords:225},
	{id:94,location:"r5,c2",xCoords:48,yCoords:225},
	{id:95,location:"r5,c3",xCoords:96,yCoords:225},
	{id:96,location:"r5,c4",xCoords:144,yCoords:225},
	{id:97,location:"r5,c5",xCoords:192,yCoords:225},
	{id:98,location:"r5,c6",xCoords:240,yCoords:225},
	{id:99,location:"r5,c7",xCoords:288,yCoords:225},
	{id:100,location:"r5,c8",xCoords:336,yCoords:225},
	{id:101,location:"r5,c9",xCoords:384,yCoords:225},
	{id:102,location:"r5,c10",xCoords:432,yCoords:225},
	{id:103,location:"r5,c11",xCoords:480,yCoords:225},
	{id:104,location:"r5,c12",xCoords:528,yCoords:225},
	{id:105,location:"r5,c13",xCoords:576,yCoords:225},
	{id:106,location:"r5,c14",xCoords:624,yCoords:225},
	{id:107,location:"r5,c15",xCoords:672,yCoords:225},
	{id:108,location:"r5,c16",xCoords:720,yCoords:225},
	{id:109,location:"r5,c17",xCoords:768,yCoords:225},
	{id:110,location:"r5,c18",xCoords:816,yCoords:225},
	{id:111,location:"r5,c19",xCoords:864,yCoords:225},
	{id:112,location:"r5,c20",xCoords:912,yCoords:225},
	{id:113,location:"r5,c21",xCoords:960,yCoords:225},
	{id:114,location:"r5,c22",xCoords:1008,yCoords:225},
	{id:115,location:"r5,c23",xCoords:1056,yCoords:225},
	{id:116,location:"r6,c1",xCoords:0,yCoords:273},
	{id:117,location:"r6,c2",xCoords:48,yCoords:273},
	{id:118,location:"r6,c3",xCoords:96,yCoords:273},
	{id:119,location:"r6,c4",xCoords:144,yCoords:273},
	{id:120,location:"r6,c5",xCoords:192,yCoords:273},
	{id:121,location:"r6,c6",xCoords:240,yCoords:273},
	{id:122,location:"r6,c7",xCoords:288,yCoords:273},
	{id:123,location:"r6,c8",xCoords:336,yCoords:273},
	{id:124,location:"r6,c9",xCoords:384,yCoords:273},
	{id:125,location:"r6,c10",xCoords:432,yCoords:273},
	{id:126,location:"r6,c11",xCoords:480,yCoords:273},
	{id:127,location:"r6,c12",xCoords:528,yCoords:273},
	{id:128,location:"r6,c13",xCoords:576,yCoords:273},
	{id:129,location:"r6,c14",xCoords:624,yCoords:273},
	{id:130,location:"r6,c15",xCoords:672,yCoords:273},
	{id:131,location:"r6,c16",xCoords:720,yCoords:273},
	{id:132,location:"r6,c17",xCoords:768,yCoords:273},
	{id:133,location:"r6,c18",xCoords:816,yCoords:273},
	{id:134,location:"r6,c19",xCoords:864,yCoords:273},
	{id:135,location:"r6,c20",xCoords:912,yCoords:273},
	{id:136,location:"r6,c21",xCoords:960,yCoords:273},
	{id:137,location:"r6,c22",xCoords:1008,yCoords:273},
	{id:138,location:"r6,c23",xCoords:1056,yCoords:273},
	{id:139,location:"r7,c1",xCoords:0,yCoords:321},
	{id:140,location:"r7,c2",xCoords:48,yCoords:321},
	{id:141,location:"r7,c3",xCoords:96,yCoords:321},
	{id:142,location:"r7,c4",xCoords:144,yCoords:321},
	{id:143,location:"r7,c5",xCoords:192,yCoords:321},
	{id:144,location:"r7,c6",xCoords:240,yCoords:321},
	{id:145,location:"r7,c7",xCoords:288,yCoords:321},
	{id:146,location:"r7,c8",xCoords:336,yCoords:321},
	{id:147,location:"r7,c9",xCoords:384,yCoords:321},
	{id:148,location:"r7,c10",xCoords:432,yCoords:321},
	{id:149,location:"r7,c11",xCoords:480,yCoords:321},
	{id:150,location:"r7,c12",xCoords:528,yCoords:321},
	{id:151,location:"r7,c13",xCoords:576,yCoords:321},
	{id:152,location:"r7,c14",xCoords:624,yCoords:321},
	{id:153,location:"r7,c15",xCoords:672,yCoords:321},
	{id:154,location:"r7,c16",xCoords:720,yCoords:321},
	{id:155,location:"r7,c17",xCoords:768,yCoords:321},
	{id:156,location:"r7,c18",xCoords:816,yCoords:321},
	{id:157,location:"r7,c19",xCoords:864,yCoords:321},
	{id:158,location:"r7,c20",xCoords:912,yCoords:321},
	{id:159,location:"r7,c21",xCoords:960,yCoords:321},
	{id:160,location:"r7,c22",xCoords:1008,yCoords:321},
	{id:161,location:"r7,c23",xCoords:1056,yCoords:321},
	{id:162,location:"r8,c1",xCoords:0,yCoords:369},
	{id:163,location:"r8,c2",xCoords:48,yCoords:369},
	{id:164,location:"r8,c3",xCoords:96,yCoords:369},
	{id:165,location:"r8,c4",xCoords:144,yCoords:369},
	{id:166,location:"r8,c5",xCoords:192,yCoords:369},
	{id:167,location:"r8,c6",xCoords:240,yCoords:369},
	{id:168,location:"r8,c7",xCoords:288,yCoords:369},
	{id:169,location:"r8,c8",xCoords:336,yCoords:369},
	{id:170,location:"r8,c9",xCoords:384,yCoords:369},
	{id:171,location:"r8,c10",xCoords:432,yCoords:369},
	{id:172,location:"r8,c11",xCoords:480,yCoords:369},
	{id:173,location:"r8,c12",xCoords:528,yCoords:369},
	{id:174,location:"r8,c13",xCoords:576,yCoords:369},
	{id:175,location:"r8,c14",xCoords:624,yCoords:369},
	{id:176,location:"r8,c15",xCoords:672,yCoords:369},
	{id:177,location:"r8,c16",xCoords:720,yCoords:369},
	{id:178,location:"r8,c17",xCoords:768,yCoords:369},
	{id:179,location:"r8,c18",xCoords:816,yCoords:369},
	{id:180,location:"r8,c19",xCoords:864,yCoords:369},
	{id:181,location:"r8,c20",xCoords:912,yCoords:369},
	{id:182,location:"r8,c21",xCoords:960,yCoords:369},
	{id:183,location:"r8,c22",xCoords:1008,yCoords:369},
	{id:184,location:"r8,c23",xCoords:1056,yCoords:369}
);	

 

Items collection of the gallery: colGridMap

The grid points themselves are based on an Icon, with its x property set to ThisItem.xCoords, an y set to ThisItem.yCoords.

Theoretically, all the icons in the top row should be at position 33, but as you can see, they are slowly going downhill.

drunkGrid.png

 

Also, a gap has appeared between the rows.

The coordinates are exactly 48 units apart, horizontally & vertically, so where has the extra padding come from?

All the Padding properties are set to 0!

0 REPLIES 0

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Top Solution Authors
Top Kudoed Authors
Users online (1,659)