Register User Modal - customize rendered html

fishbd1
Participant II

I have a problem with the html being rendered in the register user modal. We have the Legal module enabled to display terms and conditions of use.

How can I customize the modal to display the terms properly? When the form is displayed in a page it renders properly. But when it displays in a modal the sizing is off causing the two lines to wrap.

Full Page

3663-register-user-page.png

MODAL

3661-register-user.png

I'm guessing I need to override a css in some form, but not sure where the register user modal settings are defined.

1 1 211
1 REPLY 1

What I would recommend:

use Firebug, or the Chrome dev tools, or the Microsoft Edge developer tools, or .... I guess Safari has something similar (but I've never used it) to inspect the elements that are visually offending.

Determine which CSS is leading to the problem. In most of these tools you can make dynamic changes to the CSS in the browser and see the effects in realtime. Once you figure out what needs to be changed, you can look in the debugger and find the source of the CSS. Then... map that to the filesystem file in the directory that holds your drupal repo, and modify that file. Then,

git commit

git push

refresh page

see the results!

I don't have a video /screencast demonstrating this. But I'd hope it's pretty straightforward to follow from this description.

The hardest part I think, is the CSS. You need to be handy with CSS in order to be able to tweak the styles to do what you want.

Just from the snaps you showed... I'd guess that there is a style that makes the "input" elements within the modal 'display:inline-block' and maybe 'width:100%' This will make the teeny little checkbox, a full width element. And maybe that CSS rule simply does not apply when the input element is displayed outside the modal. To fix this, you just need to add a css rule to make the 'width:auto', specifically for the checkbox when displayed in the modal. And maybe add 'margin-right:4px' so the checkbox doesn't crowd the following text.

good luck, and sorry about the delay in responding.