Pages Missing Components

Well, the app I created the page from data did. Apparently, that’s not auto-configured. Still weird to see “screen” as an option for restrictions.

In addition, when I created the App, it added a table to my database, without my knowledge or consent. Weird… I checked, and this table was not in my original app…

I just started migrating (*completely rebuilding) my (classic?) app to the new iteration of Glide and can confidently say that the growing pains are real. Does anyone know why the hint component only displays ONE text source now?

image image

For my app, I need both. Is there a workaround that anyone knows of or am I just missing a renamed component?

2 Likes

I’ve made my own with some html and I display it in a rich text component. Needed some more flexibility for my use case. Not exactly the same as the old hint component, but you can alter it as needed. I use it in a custom collection, but you could use it anywhere.


image

<div style="background-color:{color};padding:10px;border-radius: 10px;padding-top:15px;">
<h4>{text}</h4>
</div>

I have an IF column to set the color code based on different conditions.

3 Likes

Hey Jeff - thanks for the quick response. All I want to do is have a second line of text in the component, like I already do in my current (but soon to be deprecated) app… do I understand correctly that I can’t use CSS anymore to crowbar one in unless I upgrade my personal plan to a Business Plan?

CSS to alter existing Glide components is only available on Business and Enterprise plans.
HTML with Inline CSS is not restricted. You could do the same with my code, but add a line break in between the pieces of text. I didn’t need two lines in my case. I just needed larger bolder text.

It’s relatively trivial to change the contents within the DIV tags to fit your needs, such as adding two separate lines of text with differing text sizes.

The problem with that, at least the way I understand it (and I could definitely be misunderstanding it), is that I have a title and text that are dynamic based on USCs. What you’re describing is static text separated by a line break - would I be able to use your code and get the results that I need?

Notice in my screenshots, it’s fully dynamic. The text and color replacements are handled in a template column. The template column feeds the rich text component. Nothing static about it.

1 Like

Here’s an example with a header and content. Put it in a template column and replace the tags with your column values. Then use that template column in a rich text component.

<div style="background-color:#daede2;padding:10px;border-radius: 10px;">
<h4>{Header}</h4>
</p>
{Content}
</div>

You may prefer to use font and font color tags to alter the text size and color as opposed to header tags. It’s up to you how you want it to look.

2 Likes

1 Like

so on the free plan, if I wanted to use html and css, I couldn’t use something like the below? It all has to be inline?

table { width: 100%; border-collapse: collapse; }
  th, td {
    width: 31px; /* 100% divided by 13 (12 holes plus total) */
    text-align: center;
    border: 1px solid black;
    padding: 5px;
  }

  th:first-child, td:first-child {
    width: 7.69%; /* Hole column */
  }

  th:last-child, td:last-child {
    width: 7.69%; /* Total column */
  }

th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}

*course*

Hole 1 2 3 4 5 6 7 8 9 Tot
Par 5 4 4 4 3 5 3 4 4 36
Index 7 13 11 5 15 1 17 3 9
Score s1 s2 s3 s4 s5 s6 s7 s8 s9 F9Tot
Hole 10 11 12 13 14 15 16 17 18 Tot
Par 5 4 3 4 4 5 4 3 4 36
Index 12 4 18 14 10 2 8 16 6
Score b10 b11 b12 b13 b14 b15 b16 b17 b18 B9Tot

Correct. I don’t believe you can use a stylesheet style of CSS to globally set the styles. You can only do it inline.

1 Like

Will this be changed in the future? Just because it is really inefficient to style html this way and if there’s ever a need to change things in the future, it can become very tedious.

You can set global styles on Enterprise and (I think) Business Plans, but I think it’s extremely unlikely that it will ever be an option on the lower plans.

For your use case, I assume that you’re using computed columns to construct your tables? It shouldn’t be that difficult to maintain.

I’m using a template column to place hole scores onto scorecard and then rich text component to display it. This way I can show scores in real time as players enter them. I was able to update my table with all inline styles and now when golfers are entering scores they can see their scorecard update along with their totals in real time

1 Like

yep, I figured it was something like that.

I have a very similar set of tables in one of my Apps:

I haven’t converted mine yet, but I’m not particularly concerned as I know it will be possible.

Thanks Jeff! I got it to work but I’m running into one issue:

If you squint hard enough, you’ll see the word, “Dextrose,” above the 25 gm. The SPAN tag isn’t changing the font color of both lines like I need it to. Please help! :pray:

Your SPAN tag starts inside the DIV tags and ends outside of it. Not sure if that’s the problem, but should be corrected nonetheless, by moving it inside.

The other problem could be that the span tag might not act on heading tags. You might have to use a font size tag instead.

1 Like

HA! You were correct: the SPAN tag doesn’t affect the heading. I looked at how the hint component is setup in my other app and realized that I only need the heading to be bold (with the same font size) so I changed it to use a BOLD tag and it looks great!

image

Thank you, sir!!

2 Likes

Hi @J_Serap !
Thank you for beatiful Tab.
Can you explain please how you make it more detail? How you drow the lines for Table e.g.? And how you put the exact data on the right place?
And where we can learn such tricks about HTML & CSS?
Than you in advance)

Wow @Darren_Murphy !
Fantastic Table, thank you! Exciting…
Can you explain how to make this? Or where to read how to do?