Floating Form Button

Thanks for the tip @Robert_Petitto. Just implemented with [data-test="app-button-view"]. The only thing I had to do different was remove the double quotes around app-button-view for it to work. Not sure why, but it only worked without the quotes.

Now if I could figure out the same for stacked buttons. Right now I have to have each button at a different opacity level so they get assigned different sub-level CSS Class names. Now I’m using [data-test="app-button-view"] for all parameters except bottom position and setting the bottom position based on the sub class. This works for chrome on windows and android. Not sure about any other OS/Browser as it appears to be device specific…so eventually the bottom position part will break again and the buttons will overlap in some weird position on screen.

<span><style>
[data-test=app-button-view] {position:fixed;
                 width:60px;
                 height:60px;
                 right:5%;
                 border-radius:50px;
                 text-align:center;
                 box-shadow: 2px 2px 3px #999;
                 font-size:40px;
                 font-weight: normal;}
.ctLXSv{bottom:20%;}
.llngAz{bottom:10%;}
.ivGfwB{bottom:20%;}
.egCsbX{bottom:10%;}
</style></span>
1 Like