Adding vertical space between two HREF boxes

🚧 Developers Coding Questions
1

The problem I'm having is how to add some vertical space between the two HREF boxes on the same line.

image
image1060×177 6.2 KB

Here is the code of one of the lines...

href name: "configMorningPreEventsHref", page: "configMorningPreEvents",
    title: "${btnIcon('pi-angle-left')} ${btnIcon('pi-sun')} Morning Pre Event Actions", description: "", width: 4, newLine: false 
href name: "configMorningEventsHref", page: "configMorningEvents",
    title: "${btnIcon('pi-sun')} ${btnIcon('pi-angle-right')} Morning Event Actions", description: "", width: 4, newLine: false

I tried adding a paragraph statement in between but that of course makes a new line automatically. I'm not very good with CSS and containers and was trying to maybe have some CSS just before those buttons, add some padding and closing the container after, but I just can't figure it out.

Any help would be appreciated.

2

Could try something like:

href name: "configMorningPreEventsHref", page: "configMorningPreEvents",
    title: "${btnIcon('pi-angle-left')} ${btnIcon('pi-sun')} Morning Pre Event Actions", description: "", width: 4, newLine: false 
input name: "spacer", type:"hidden", title:" ",width:1, newline:false
href name: "configMorningEventsHref", page: "configMorningEvents",
    title: "${btnIcon('pi-sun')} ${btnIcon('pi-angle-right')} Morning Event Actions", description: "", width: 4, newLine: false
3

Thanks, that does work but is a bit of a large space, with the width changed to 3 for the buttons, it does look better but not exactly the vision in my head, sometimes you have your hands tied and need to work with what you have. Hope we will one day more control over the layout of the menus.

image
image956×164 6.09 KB

4

Takes a little more work but:

image
image850×55 4.79 KB

                String l1 = buttonLink("configMorningPreEvents", "${btnIcon('pi-angle-left')} ${btnIcon('pi-sun')} Morning Pre Event Actions",'','','',20)
                String l2 = buttonLink("configMorningEvents", "${btnIcon('pi-sun')} ${btnIcon('pi-angle-right')} Morning Event Actions",'','','',20)
                paragraph "<table><tr><td>$l1</td><td>&nbsp;</td><td>$l2</td></tr></table>"
                if(state.configMorningPreEvents){
                    state.configMorningPreEvents = false
                    paragraph "<script>window.location.replace('${appLocation()}/configMorningPreEvents')</script>"
                }
                if(state.configMorningEvents){
                    state.configMorningEvents = false
                    paragraph "<script>window.location.replace('${appLocation()}/configMorningEvents')</script>"
                }

String buttonLink(String btnName, String linkText, color = "#1A77C9", bkColor = "#FFFFFF", font = "15px", bWidth=15) {
	"<div class='form-group'><input type='hidden' name='${btnName}.type' value='button'></div><div><div class='submitOnChange' onclick='buttonClick(this)' style='border-radius:25px;color:$color;background-color:$bkColor;cursor:pointer;font-size:$font; border-style:outset;width:${bWidth}em;'>$linkText</div></div><input type='hidden' name='settings[$btnName]' value=''>"
}

def appButtonHandler(btn) {
    switch(btn) {
          case 'configMorningPreEvents':
                    state.configMorningPreEvents = true
                    break
          case 'configMorningEvents':
                    state.configMorningEvents = true
                    break
          default: 
              log.error "Undefined button $btn pushed"
              break
      }
}

String appLocation() { return "http:${location.hub.localIP}/installedapp/configure/${app.id}/mainPage" }
5

This is one of the reasons why I made this post below.
Which I know you already have found and are working on.

1 Like
6

ok thanks guys, I finally got Jeffs' code to work correctly as stated in the other thread he linked to.