Html style of standard app buttons?

markp · April 15, 2023, 1:59pm

I have next to no experience with html/css, but I have nonetheless been able to create a simple table display in a custom app I've written. After searching these forums, I've managed to add some buttons to my screen that do what I want them to, but they look and act nothing like the buttons you get by using a standard input of type "button". I'm assuming it's just knowing the correct "style" setup for the button that will solve this issue, but I have no clue how to set that up.

Can anyone enlighten me?

Thanks!

FriedCheese2006 · April 15, 2023, 2:11pm

Are you trying to add buttons independent of the table or add them to the table?

I presume the latter. If so, maybe my code can get you in the right direction:

github.com

FriedCheese2006/EnergyCalculatorPlus/blob/main/EnergyCalculatorPlus.groovy

/**
 *
 * Energy Cost Calculator
 *
 * Copyright 2022 Ryan Elliott
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge,
 * publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * v0.1		RLE		Creation
 * v0.2		RLE		Substantial updates to the UI along with functionality. 
 * v0.3		RLE		Further UI overhauls. Added rate scheduling.
 * v0.3.5	RLE		Squashing bugs around variable types. Fixed an issue where state variables were not being populated until the app was opened the first time after installation.
 * v0.3.6	RLE		Added an option to select which day of the month that reset happens. Moved enum lists to use variable for the options.
 * v0.3.7	RLE		Limited day of month selection to 30 to prevent PICNIC errors.

This file has been truncated. show original

Lines 653-688. 680 and 681 are injecting buttons at the bottom of the table.

markp · April 15, 2023, 2:46pm

Thanks for the quick reply!

Actually, I think I can do either. If I want them in the table, I can just add the HTML in with that code. If I want them separate on a "normal" input screen, I can put the code in a "paragraph" (which is how I'm currently displaying my table).

I see and understand (at least a little!) what you're doing here, and I'm pretty sure I could implement something like that if needed, but...

My problem is that I want to duplicate the same appearance (3-D look, shading change on hover, size, font, etc.) of the buttons that a normal input statement creates (like a "Done" button or the "Refresh Table" button in your app). I assume I just need a "style" statement with the appropriate specifications, but I have no idea what those specifications are. I'd assume someone like @bravenel would know. For example, just playing around with it I added :

style='border: 2px solid black;font-size: 12px;'

to my <button> stuff, and it does what I told it to, but it is nowhere near correct. So I'm assuming I just need the "magic" stuff to put in there instead of my crap.

FriedCheese2006 · April 15, 2023, 2:54pm

Looks like this is the styling used for the system buttons

<button class="cancel btn btn-success mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
                    onclick="closeRemoveDeviceDialog()" data-dismiss="modal" style="margin-right: 0.5em;">
                Cancel
            </button>

sburke781 · April 15, 2023, 3:04pm

You'll need to track down some of the classes referenced there.... To get the actual styling. I doubt you will be able to reference the same classes, but may be worth a look

markp · April 15, 2023, 4:19pm

Thanks, guys! While you were writing that it suddenly occurred to me that I could just display the page source in chrome, but you isolated the necessary info for me nicely. A quick test looks like I'm headed for success!

system · April 14, 2024, 4:20pm

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.