I’d like to place a help button on every screen of my app. My preference is for this to be fixed in the lower-right corner of the screen.
I’ve seen this post on how to fix a menu to the bottom of the screen using the following CSS applied to a row, however I can’t get my button far enough to the right edge.
I’ve placed the link button in a two column row and shrunk the right column with the button to its smallest size, but it’s still approximately 200px from the right edge of the screen. I’ve tried adding negative 200px to right padding and margin of the column and row, but neither have an effect.
Try this…no guarantees it will work since I quickly worked it up
In your Layout page builder add an HTML component below the “Page content goes here” page container component.
Follow the instructions in the “Make footer with menu stuck on bottom” posting
Add the following in the HTML component: <p style="text-align: right; padding-right: 50px;"><a class="btn btn-danger btn-med" href="https://www.google.com"><i class="far fa-file-export"></i> Help</a></p>
The button classes are default from the Tadabase…you can edit them as you see fit. Alternately, you can build your own button class in the CSS tab but that will take a bit more work than leveraging the native button classes. If you want to see what button classes you have, go to the “Settings” in your app and choose “Themes”. The btn-XXX follows the theme button examples (default, primary, success, etc.). The size of the button options are btn-sm, btn-med, etc.
The “i class” is from the native font awesome icon library built into Tadabase. Just got to Search | Font Awesome and review the options (only the free ones). Most will work in Tadabase (I can’t remember what version of icons Tadabase has installed).
Hope this helps,
Adam
P.S. I am sure there is a much more robust option available if the rest of the Community team wants to chime in.
