Multiple choice (radio button overlaying with choices)

Hello everyone,

I am testing the multiple choice H5P pluging in Wordpress and I noticed that once published the radio buttons or checkboxes overlay with the choices text (see image attached).

Anything I'm doint wrong?

PS: I deliberatly avoided to embed the question in a row or table to make sure it' wasn't related to that.

Thanks

Michel

 

 

 

 

 

tim's picture

Hi Michel, could you attach the image again?

Hi Tim,

Thanks for your reply. I have attached the image as requested. It's made of one multiple choice (2). As you can see, the mext overlays with the checkboxes.

 

Attachments: 
tomaj's picture

Those rings should not be showing at all.

Which browser are you using?

- Tom

thomasmars's picture

Hi, it seems like your site has conflicting css with the Multiple Choice content type.
You can resolve this in multiple different ways:

  1. Change your site's theme
  2. Modify the css of your site's styling of lists
  3. Modify the css of Multiple Choice through a styling hook

@tomaj

I'm using Chrome but why should it be different from a browser to another ?

@thomasmars

I'm using H5p pluging along with the beaver plugin within the Tesseract theme. However, I made sure that the multiple choice is not inserted while using the beaver plugin So it shouldn't be an issue.

 

 

tomaj's picture

Hi,

  1. You could have been using something like IE10, which isn't suppored, and that might be where the artifacts came from.
  2. Are you familiar with the developer tools in Chrome? You should be able to right click on the web page, where the css is wrong, and click on "Inspect". You should now see the markup, but also a "Styles"-tab, where the styles for that element is listed. You will see the styles that comes from H5P. But you will also see some other styles. Are any of them "overwriting" the margin css property?

- Tom

Attachments: