Everytime when a comment is added, the comment now button moves downwards which is undesirable. Can anybody please let me know the step by step procedure for applying the CSS file that Petitto has provided here to keep the comments bar fixed?
(Keep “Add Comment” button fixed on screen when scrolling - #6 by Robert_Petitto)
add a rich text component… switch to custom text… paste this code:
<pre><span><style>
div[id*='screenScrollView'] > div >:nth-of-type(1) {
position: fixed;
bottom: 0;
margin-bottom: 80px;
background: white;
width:100%;
box-shadow: 0px 0px 19px 5px rgba(199,197,199,1);
padding: 10px;
}
replace the type number with the position of your component.
This is the CSS I use for making “Comment chats”
[data-test="app-comments-preview"] {
display:flex;
flex-direction: column-reverse;
}
[data-test="app-comments-preview"] >:last-child {
padding: 0px 16px 16px 16px;
}
[data-test="app-comments-preview"] >:first-child{
display: none;
}
[aria-label="Add comment…"] > :nth-child(2) {
border:0px solid;
color: #aaa;
border-radius: 5px !important;
background: rgb(246, 246, 246);
padding: 10px 5px !important;
text-align: left;
width: 100%;
font-size: 0;
}
[aria-label="Add comment…"] > :nth-child(2):before {
border:0px solid;
color: #aaa;
border-radius: 5px !important;
background: rgb(246, 246, 246);
padding: 10px 2px !important;
text-align: left;
content: "Write a message..." !important;
visibility: visible !important;
font-size: 14px;
}
I fixed a little 
@Robert_Petitto
<pre><style>
[data-test="app-comments-preview"] {
display:flex;
flex-direction: column-reverse;
}
[data-test="app-comments-preview"] >:last-child {
padding: 0px 16px 30px 4px;
}
[data-test="app-comments-preview"] >:first-child{
display: block;
color:grey;
font-size:11px;
}
[aria-label="Add comment…"] > :nth-child(2) {
box-shadow: 1px 1px 9px;
padding: 5px 15px;
}
[aria-label="Add comment…"] > :nth-child(1) {
display: none !important;
}
Taking a look!
Could you please explain what you meant by “Replace the type number with the position” ?
in the code, you can notice type(x)… replace x with the position of your element in the glide editor… count from the top… be aware if the other elements are set to be visible… so the safest way is our second code that calls specific element regardless of position… but it will change all elements of this kind… unless you specify child… CSS is tricky, you must be aware of many surrounding conditions… also the type of device, OS, and browser
Thank you very very much Uzo
