I add a line in the html
EDIT ::
I think that before each class eagle, birdie, … it must be wrapped with a tag
<div class = "divTableCell"><div class="eagle..........> </div>
3 Likes
oooh, yes! of course, that’s it! (so obvious, hahaha)
Thank you!!!
2 Likes
Hey people, I’m facing a little issue here, I have an overlay with a message that has a scroll component. I’m trying to hide the button, and only show it once I’ve reached the bottom. Here’s a quick video to show you what I mean, thanks in advance
In your CSS you need to find the code that is referring the button and change the position from “fixed” to maybe 70% or something.
Doesn’t work
1 Like
Do any of these work?
Can you send us the CSS so we can test it ourselves? Thank you.
If I’m not wrong, scroll action in CSS is based in animation keys, and the master on it is @hisashi.fujita
1 Like
As @ThinhDinh points out, I think it’s difficult to provide an effective workaround without checking the CSS that is actually used.
This is the code I’m using:
<a style="top:180px;">
<div style="
position:fixed;
top:50px;
left:-5%;
margin: 0%;
padding:100%;
background-color: white;
backdrop-filter: blur(4px);
opacity:0.8;"></style></div>
<div style =" position: fixed;
top: 150px;
overflow-y: scroll;
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:500px;
background-color: #e5f8fb;
backdrop-filter: blur(8px);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>
<br>
<p style="black; font-size:15px;text-align: left;">@</p>
<pre><span><style>
[data-test="app-button-view"] {
position: fixed;
top: 600px;
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-58%, -50%);
width:38%;
}
.fab-target >* {
display:none;
}
</style></span></pre>
This is what makes the screen scroll: overflow-y: scroll;, but as you can see the position of the button is fixed, I’ve tried various ways to hide it until the “bottom is reached” but no luck
Please try this.
Copy and paste the CSS below into rich text.
Good luck to you.
★Don’t forget to set the action for rich text.
<div class="box"></div>
<div class="text">
<div class="title">
Scroll by concatenating text and buttons.
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div class="button_a">
button_a</div></div>
<pre><span><style>
.box,.text{
top: 8rem;
}
.box{
position: fixed;
width: 90%;
height:400px; /*◀Outer box height*/
background-color: #e5f8fb;
border-radius: 10px;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
}
.text{
position: fixed;
overflow-y: scroll;
width: 80%;
margin-left:5%;
height:360px; /*◀Inner text height*/
margin-top:5%;
font-size: 0.9rem;
line-height:1.2rem;
text-align: left;
}
.title{
font-size: 1.3rem;
line-height:1.5rem;
font-weight:bold;
margin-bottom:0.5rem;
}
.button_a {
margin-top: 1rem;
width: 60% ;
margin-left: 20%;
font-size: 1rem;
text-align: center;
border-radius: 0.7rem;
font-weight: bold;
background: #000;
padding: 4% 2% 4% 4%;
color: #fff !important;
}
4 Likes
Hi @hisashi.fujita , thank you for your efforts, however, here I lose the whole purpose of a button, I would need to have the action in the button and not in the whole richtext component…which it is the case. I’d need to add a button component in glide and hide it until I scroll to the bottom
I see. That’s too bad
The current glide does not allow you to enclose text and standard button components in “div” etc.
Therefore, I think it is difficult for now to fulfill your wishes.
If javaScript becomes available in glide in the near future, your wishes may come true.
3 Likes
I hope this comes true!!
1 Like
Perhaps one of you can help me… I am trying to style a list relation button to stand out more inside a form…
any ideas?
1 Like
Try this:
<pre><span><style>
[data-test="list-item"] {
background: #FF8000;
}
2 Likes
thank you… that worked! much appreciated
1 Like
Thanks! THANKS! T H A N K S !!! MERCI 
Hola gente!!!
Does anyone have a code to achieve this?
There’s a code on the forum but it is not working.
@ThinhDinh @Manu.n @Lucas_Pires @Robert_Petitto
Thanks guys!
1 Like
Hi, what is the original code ??