Selecting a html button in a form cell

customaware

I have a html cell on a form like.....

The css for this is...

.BuyPlanButton {
background-color:#89c403;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #74b807;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Tahoma;
font-size:18px;
padding:4px 7px;
text-decoration:none;
text-align: center;
width: 100px;
}
.BuyPlanButton:hover {
background-color:#77a809;
}
.BuyPlanButton:active {
position:relative;
top:1px;
}

For some weird reason when I go to click the button, only the top half of the button is active. If I move the mouse onto the button from the bottom, the active is not sensed until I am near the vertical center of the button.
If I bring the mouse over the button from the top then the active is sensed as soon as the mouse touches the top of the button.

Been tearing the hair out trying to fix this to no avail.

Any ideas would be appreciated please.

Squiffy

Not sure this helps, but it works fine on a raw HTML test page :

<head>

<style>
        .BuyPlanButton {
                background-color:#89c403;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                border-radius:5px;
                border:1px solid #74b807;
                display:inline-block;
                cursor:pointer;
                color:#ffffff;
                font-family:Tahoma;
                font-size:18px;
                padding:4px 7px;
                text-decoration:none;
                text-align: center;
                width: 100px;
        }
        .BuyPlanButton:hover {
                background-color:#77a809;
        }
        .BuyPlanButton:active {
                position:relative;
                top:1px;
        }

</style>

</head>


<body>
    <button type="button" class="BuyPlanButton" role="button">Buy</button>
</body>

customaware

Thanx David.

Yes. That is correct. In fact that is where I tested it before putting it in a cell on an Aware Form.

I suspect it is a small Kendo glitch.

weblike

Hi Mark,

As a workaround I use bootstrap buttons with:
<button type="button" class="btn btn-primary" onClick="AwareApp.startProcessFromForm ('ProcessName','main', this, false)" title="Button description">Click Me</button>

This looks great and works for me.

Bye,

customaware

Thanx George.

I will try that.

customaware

Tried it George.....

Exactly the same problem.

I might do up a small demo to show the issue.

weblike

eagles9999 wrote
Tried it George.....

Exactly the same problem.

I might do up a small demo to show the issue.

Just thinking.
Tested your app and I have seen that the image above the buttons is not responsive. Can you try and make it responsive?
Try the buttons without the image above...
It's just a thought.