Hello to everybody, I´ve been trying to put an element to the right but < right> does not work at all, I know that this is elementary knowladge for you all, but you would help a lot with my problem if you give me the right way to put the code, thank´s in advance.
1 Like
Hi @Aron_Fuentes,
While I don’t have all information in terms of your issue, let me ask this question…
Did you use the Rich text component to display that “element” you want to put to the right…
If it is a text, why not use the native method of aligning text?
Whenever you want to use html or CSS in Glide, you have to use the Rich text component.
If this is not what you are looking for then maybe you can expand in your explanation in terms of what you want to achieve and where it is that you are stuck.
1 Like
This is the way to go.
If you want HTML/CSS then that should be “right: 0px” or “float: right” or <p align = "right"> though, I don’t believe <right> is a valid tag.
3 Likes
Hi @Luther, I was trying to put a rich text to right, normally I was using for marquee and it was working very well, but suddenly I could not tu put on right the text so I was searching a way to do it, I´ve tried with the codes that you sent to me but I could not douit alwell, sometimes I need to see some examples dude, thanks for helping. 
This was the onlñy one that worked but the text was too small.
You have to be more specific about what you are trying to align… post a screenshot and description.
As Uzo said, please post a screenshot of what you have now, describe what you are trying to achieve, what snippets of code you are using, basically more info so we can know your situation and give more recommendations.
with this template I have tried to insert it throught a rich text but the tex is not align to right even when I had added your codes, <left< works, <center< works, but no <right
So this is the final result, the red number can be at left and center but not to right, somebody could tell me how to doit,
those codes there were what I tried
“right: 0px” or “float: right” or <p align = "right"> though, I don’t believe <right> is a valid tag. the only one that worked for me was this one
but the text is too small.
<div class="text01">
Your Text Here
</div>
<pre><span><style>
.text01 {
font-family: 'Noto Serif JP', serif;
font-size: 1.3rem;
text-align: right;
font-weight: bold;
line-height: normal;
color: red;
text-shadow: 1px 1px grey;
}
1 Like
How to adapt the Glide app from Right to left?
As of the date of publication of this post, it is not possible for the platform to align the various components to the right naturally.
When the components are constantly on the left side and writing from right to left, the app is inconvenient to use and its visibility is crooked.
This can be resolved using the CSS code attached below.
(CSS template allows us to define styles for the various elements on the page such as text, images, etc.)
- Add to the page where we build a component called rich-text
- Change the default information displayed in the component to custom
- Copy the code below
- Paste the code inside the rich text component
- And there you go! The app is RTL!
Remarks
- The CSS code you paste may “break” if the company (Glade) decides to make substantial changes to any component.
- This site or its owner has no responsibility for any changes that may occur as a result of breaking the code.
- Do not rely on CSS code in the essential construction of the application but only for design.
- I try to update the code so that it will be adapted to the current version of Glade.
- The code should be pasted on each page individually, it will not work on your entire app automatically.
Code structure
["Component Name"] { text-align: right; direction: rtl; }
If you have an app that you would like to convert to RTL, contact me and I will be happy to help.
Copy the code below:
<p> <style>
[data-test = "glide-app-bar"]
{text-align: center;
direction: rtl;
}
</style> </p>
<p> <style>
[data-test = "app-text-box"] {
text-align: start;
direction: rtl;
}
</style> </p>
<p> <style>
[data-test = "app-checkbox-list-item"] {
text-align: start;
direction: rtl;
}
</style> </p>
<p> <style>
[class = "sc-bQdQlF dcOMra"] {
text-align: start;
direction: rtl;
}
</style> </p>
<p> <style>
[class = "sc-hqUewE irkNoB"] {
text-align: start;
direction: rtl;
}
</style> </p>
<p> <style>
[class = "label"] {
text-align: start;
direction: rtl;
}
</style> </p>
<p> <style>
[data-test = "tile-item"] {
text-align: center;
direction: rtl;
}
</style> </p>
<p> <style>
[data-test = "app-horizontal-list"] {
text-align: start;
direction: rtl;
}
</style> </p>
<p> <style>
[data-test = "app-switch-view"] {
text-align: start;
direction: rtl! important;
}
</style> </p>
<p> <style>
[data-test = "app-text-field"] {
text-align: right;
direction: rtl;
}
</style> </p>
<p> <style>
[data-test = "app-picker-button"] {
text-align: right;
direction: rtl;
}
</style> </p>
<p> <style>
[data-test = "app-switch-view"] {
text-align: right;
direction: rtl;
font-family: alef;
}
</style> </p>
<p> <style>
[data-test = "list-item-title"] {
text-align: right;
direction: rtl;
}
</style> </p>
<p> <style>
[data-test = "list-item"] {
text-align: right;
direction: rtl;
}
</style> </p>
<p> <style>
[class = "sc-kNnYhR WdOSc"] {
text-align: right;
direction: rtl;
}
</style> </p>
<p> <style>
[data-test = "app-inline-picker"] {
text-align: right;
direction: rtl;
}
</style> </p>
<p> <style>
[role = "row"] {
text-align: right;
direction: rtl;
}
</style> </p>
<p> <style>
[class = "sc-htmbXw fgLAlN"] {
text-align: right;
direction: rtl! important;
}
</style> </p>
<p> <style>
[data-test = "app-vertical-list"] {
text-align: right;
direction: rtl! important;
}
</style> </p>
<p> <style>
[class = "sc-httYMd dhAqBk"] {
text-align: right;
direction: rtl! important;
font-family: alef;
}
</style> </p>
<p> <style>
[class = "tbs-inner"] {
text-align: right;
direction: rtl! IMPORTANT;
}
</style> </p>```
1 Like
@Uzo’s code above should work for you. Just change “Your text here” to your desired text, in a template column.
1 Like
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.