Beautiful Design App

Uzo · July 10, 2021, 12:36am

try to put that code in test CSS tab

ThinhDinh · July 10, 2021, 12:38am

The second part of that code either needs to be pointed to a template column to get the right {X} and {Y}, or I need to see the number of components on the screen to get the right value, hence I asked for a copyable app.

Uzo · July 10, 2021, 12:39am

got you… but there is no way to target the active components to change color?

ThinhDinh · July 10, 2021, 12:58am

Yeah I tried to find that “active” choice but can’t find a way. The class name is also random so I had to go for the long con.

Uzo · July 10, 2021, 1:02am

ok, nice work guys!

ThinhDinh · July 10, 2021, 1:04am

I’m gonna share a copyable app your way soon.

Edit: Found a bug that’s only in the live version and not in the editor so gonna spend time to fix that.

ThinhDinh · July 10, 2021, 1:29am

Thanks Uzo without you I wouldn’t have noticed the transparent bug in the live app.

It should work well now.

Uzo · July 10, 2021, 1:42am

can you do 8x8 grid?

ThinhDinh · July 10, 2021, 1:44am

Choice components can only render 5 in a row, so best I can do is 5 x whatever number of rows you need.

Uzo · July 10, 2021, 1:45am

7 would be nice to do calendars… 8 for board games…

Jeff_Hager · July 10, 2021, 2:29am

Well, you can do that with horizontal lists, but it gets gross and causes come other issues. The only reason it works is because you can render a horizontal list with an unlimited number of items in the same row. Choice components are limited to whatever is already contained within the div tag, which is a max of 5 items. CSS can only alter to the extent of what’s already rendered by the underlying code.

Uzo · July 10, 2021, 2:31am

yes, I’m using your concept sometimes… is nice! lots of work there…
I wish we can sale these kind of apps as a templates in store… I have many like that.
Glide should open special section in templet store for Apps with CSS and scripts. these kind of apps are the most valuable!
Many experts here could make living out of Glide if that would be possible.

Jeff_Hager · July 10, 2021, 2:41am

Yeah, we’re limited with the use of CSS, and I understand the vulnerability and complexity that newer users may not understand and be able deal with if it doesn’t work properly. However, I do like freely sharing ideas and seeing people build upon those ideas and share their enhancements, with the hopes that it becomes popular enough for Glide to make them built in features.

Uzo · July 10, 2021, 2:43am

It could be sold as a working App, with contact for author if explanation or update is needed

Jaybird_Farrow · July 11, 2021, 8:53pm

you can also use a tool called Licecap to create your own…

Darren_Murphy · July 12, 2021, 7:38am

@Manu.n maybe you can help me with this one?

I’m using CSS tables to represent a golf scorecard. Essentially I’m trying to mimic the table that’s shown here:

Notice that some of the numbers will have squares or circles around them. There are 4 different possibilities, which can be seen in the legend at the bottom of the table.

After much fiddling and trial and error, I have something that looks just about right:

The problem I have is that if I have two adjacent cells with squares/circles around the numbers, then the values in those cells become merged:

And I haven’t been able to figure out how to solve that - any ideas?

Here is the current version of the HTML:

<div class="scorecardRows outerTableFooter">
  <div class="tableFootStyle">
    <div class="links">Scorecard</div>
  </div>
</div>
<div class="divTable scorecardRows">
	<div class="divTableHeading">
		<div class="divTableRow">
			<div class="divTableHead">Hole</div>
			<div class="divTableHead">1</div>
			<div class="divTableHead">2</div>
			<div class="divTableHead">3</div>
			<div class="divTableHead">4</div>
			<div class="divTableHead">5</div>
			<div class="divTableHead">6</div>
			<div class="divTableHead">7</div>
			<div class="divTableHead">8</div>
			<div class="divTableHead">9</div>
		</div>
	</div>
	<div class="divTableBody">
		<div class="divTableRow">
			<div class="divTableCell">Par</div>
			<div class="divTableCell">4</div>
			<div class="divTableCell">3</div>
			<div class="divTableCell">4</div>
			<div class="divTableCell">4</div>
			<div class="divTableCell">4</div>
			<div class="divTableCell">5</div>
			<div class="divTableCell">3</div>
			<div class="divTableCell">5</div>
			<div class="divTableCell">4</div>
		</div>
		<div class="divTableRow">
			<div class="divTableCell">R1</div>
			<div class="divTableCell">4</div>
			<div class="birdie">3</div>
			<div class="divTableCell">4</div>
			<div class="eagle">4</div>
			<div class="divTableCell">4</div>
			<div class="bogie">5</div>
			<div class="divTableCell">3</div>
			<div class="double">5</div>
			<div class="divTableCell">4</div>
		</div>
    <div class="divTableRow">
			<div class="divTableCell">R2</div>
			<div class="divTableCell">4</div>
			<div class="divTableCell">3</div>
			<div class="birdie">4</div>
			<div class="eagle">4</div>
			<div class="divTableCell">4</div>
			<div class="bogie">5</div>
			<div class="divTableCell">3</div>
			<div class="double">5</div>
			<div class="divTableCell">4</div>
		</div>
	</div>
</div>

And here is the CSS:

<pre><span><style>
div.scorecardRows {
  font-family: font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #FFFFFF;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  table-layout: fixed;
}
.divTable.scorecardRows .divTableCell, .divTable.scorecardRows .divTableHead {
  border: 1px solid #FFFFFF;
  padding: 3px 2px;
}
.divTable.scorecardRows .divTableBody .divTableCell {
  font-size: 11px;
}
.divTable.scorecardRows .divTableRow:nth-child(even) {
  background: #000000;
}
.divTable.scorecardRows .divTableHeading {
  background: #0B6FA4;
  border-bottom: 1px solid #FFFFFF;
}
.divTable.scorecardRows .divTableHeading .divTableHead {
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #FFFFFF;
}
.divTable.scorecardRows .divTableHeading .divTableHead:first-child {
  border-left: none;
  width: 40px;
}

.scorecardRows .tableFootStyle .links a{
  display: inline-block;
  background: #0B6FA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 1px;
}

.eagle {
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 4px double #fff;
  color: #fff;
  text-align: center;
  font: 11px Arial, sans-serif;
}

.birdie {
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  font: 12px Arial, sans-serif;
  padding-top: 1px;
}

.bogie {
  border-radius: 0%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  font: 11px Arial, sans-serif;
  padding-top: 2px;
}

.double {
  border-radius: 0%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 4px double #fff;
  color: #fff;
  text-align: center;
  font: 11px Arial, sans-serif;
}

/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

Would appreciate some guidance from you or any of the other CSS gurus (@ThinhDinh @Lucas_Pires @Robert_Petitto)

Manu.n · July 12, 2021, 7:53am

Is it this cell that is causing the problem?

What would have to be displayed for the table to be correct?

Darren_Murphy · July 12, 2021, 8:15am

Yes, it happens any time I have two adjacent cells (next to each other, or above/below) with both having one of the “special” classes.
So in that case, the cell at R2:3 has the .birdie class, and the cell at R2:4 has the .eagle class. And so the values in those two cells have been merged, and the values in the rest of that row have been shifted one cell to the left, leaving the last cell empty.

Manu.n · July 12, 2021, 8:23am

I did a quick test and I replaced display

So check it out !! ??

EDIT
Ah I just changed the value 4 to 0 to differentiate it

ARGGGGGGGGGGGGGGG it’s not your solution !!!

Darren_Murphy · July 12, 2021, 8:45am

haha, that’s close!!

Topic		Replies	Views
Showcase Your Best Glide Pages – Inspire and Be Inspired! Project Showcase	3	139	January 27, 2025
Need UI design inspiration Ask for Help	10	297	June 9, 2024
Copyable: A Tribute To Chadwick Boseman & The World Of Randomness Ask for Help	27	2657	June 21, 2021
Greetings Community! Ask for Help	4	387	May 14, 2022
Beautiful ui designer Ask for Help	1	215	January 2, 2024

Beautiful Design App

Related topics