Resize Button to Match?

sandshakimi
sandshakimi used Ask the Experts™
on
I need the Cancel button to have the same dimension as the Save button.

Screen Capture
Here's the markup:

<div class="form-actions form-wrapper" id="edit-actions"><button type="button" value="Cancel" onClick="javascript: history.go(-1)">Cancel</button><input type="submit" id="edit-submit" name="op" value="Save" class="form-submit" /></div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Senior Software Developer
Commented:
The issue is that one is a <button> and the other is an <input> element. You can solve this by using a little CSS

Here's a jsfiddle that demonstrates

http://jsfiddle.net/x3g7skjc/
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
No points.  A small update to Russ's code.

Make both buttons instead of button and input.  Make buttons same height and width and added padding.

http://jsbin.com/lepayi/edit?html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>experts-exchange.com/questions/28695080</title>
  <style>
    button
{
    height: 40px;
    width: 80px;
    padding:10px;
}
  </style>
</head>
<body>
<div class="form-actions form-wrapper" id="edit-actions">
  <button type="button" value="Cancel" onClick="javascript: history.go(-1)">Cancel</button>
  <button type="submit" id="edit-submit" name="op"  class="form-submit">Save</button>
</div>
</body>
</html>

Open in new window

sandshakimi

Author

Commented:
These are dynamically generated so Russ's approach is the one I was able to use.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial