Button Size Issue in WordPress

Elements
1

Hi,

I’m having an issue where buttons in my Hype documents are appearing about 50% their actual height when viewed on a WordPress (ver 4.3) site (using div, I’d rather not use iframe). The documents look fine when previewing. The issue is present regardless of browser. See shots below. On the top is how it looks in preview, on the bottom in WP.

The issue only started recently. I’ve tried numerous fixes, including:

  • deactivating all WP plugins
  • downgrading WP to 4.2.4 (buttons were working prior to 4.3 update)
  • remove all custom CSS

The only workaround I’ve found is to increase the button size by roughly 50%. Then they appear “normal” size.

Thanks for any help! .zip is below

atom.hype.zip (533.2 KB)

2

Can you share a URL where they appear? My guess is that this is a box-sizing CSS issue.

3

http://www.chemiftry.com/topic/the-nucleus/

Thanks, Daniel.

4

That page doesn’t seem to work – sorry for the delay in getting back to you.

5

No worries. I had maintenance mode on earlier (sorry). I’ve switched it off.

In this link, I removed the buttons and replaced them with shape elements to resolve the issue.

http://www.chemiftry.com/topic/the-nucleus/

In this link, you can see the button issue.

http://www.chemiftry.com/topic/wave-particle-duality-of-electrons/

Thanks!

6

It looks like this CSS style was affecting how buttons appeared in your document:

*,input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

We should probably insulate buttons better from this external style.

To override this, you can set this CSS style anywhere in the head of your document:

.HYPE_element {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
 }
1 Like
7

Hi, I'm having the same problem as @darrell but this code didn't work for me. Here is the WordPress build : Combine Anthro With… • Anthropology • Iowa State University and here is the Dropbox version which is fine: https://dl.dropboxusercontent.com/spa/d8qni8yutqmw6x2/Exports/AnthroCombo/AnthroCombo.html

Any thoughts?
Thanks!

8

check your wordpress and you’ll find that @Daniel is right.
your boxsize-property within the theme is box-sizing: border-box;

1 Like