Beautiful Design App

try to put that code in test CSS tab

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.

got youā€¦ but there is no way to target the active components to change color?

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.

1 Like

ok, nice work guys!

1 Like

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.

1 Like

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

It should work well now.

3 Likes

can you do 8x8 grid?

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

7 would be nice to do calendarsā€¦ 8 for board gamesā€¦ :wink:

1 Like

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.

3 Likes

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.

1 Like

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.

4 Likes

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

you can also use a tool called Licecap to create your ownā€¦

1 Like

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

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 :slight_smile: (@ThinhDinh @Lucas_Pires @Robert_Petitto)

3 Likes

Is it this cell that is causing the problem?

image

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

1 Like

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.

1 Like

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 :wink:

ARGGGGGGGGGGGGGGG itā€™s not your solution !!!

1 Like

haha, thatā€™s close!!

1 Like