Formatting

twc57's picture

I'm having a bit of a formatting problem. When using the ' Drag Text' module, in the editing view, all of the selected words appear at the bottom of the paragraph... in the position that I want them to be. However, after publishing, all the selected words appear as a long list to the right of the paragraph. I would prefer the selected words to appear on the webpage as they do in the editing view. I have included a png. shot to display the problem. Thank you for the help.

BV52's picture

Hi TWC57,

Can you please re-attach the screenshots.

-BV52

twc57's picture

Hi BV52... thank you very much for getting back to me. I have re-attached the screenshots. Also link to page: https://avatutor.com/annie-quiz-one/

fnoks's picture

Hi,

There is some logic in this content type that tries to figure out if it is best to place the words on the side or on the bottom. From your example, it clearly doesn't always choose the best alternative. A workaround is to wrap the H5P inside a DIV with a max width of e.g. 800 pixels, like this:

<div style="max-width: 800px">[h5p id="2"]</div>
twc57's picture

Hi fnoks...  Thank you for the information. I gave that a try. Everything reformatted correctly at 700px. The only problem is that from an aesthetic point of view of it kind of throws everything off unless I squeeze all the other elements on the page down to that size as well. Ultimately, it is not a big problem in that my main target is mobile users and even without the fix the H5P content displays properly on the mobile devices which I have tested. It would be nice however to have everything display properly on both desktops and mobile devices. Once again, thank you for the help. Tim

 

fnoks's picture

I agree, it's not the best solution. I am thinking the best solution would be a possibility for the author to set the placement of the words. I.e bottom or right (and maybe even top and left).

twc57's picture

That would be very nice indeed. Perhaps eventually, a dev out there will give the program a tweak to bring about that happy solution!