How do I modify properties (container width and column widths) of the New Individual Form/Box

Question

I'd like to know which file(CSS?), and within the file which element/variable etc. I can edit to adjust the properties of the New Individual Container/Form.

I'd like to do 2 things: 1 -Make the Container wider. By default it is 500px, I want to increase it to 60opx. 2 - Adjust the width of the columns to make the 1st one wider so the question is not all jumbled up, to make it a bit more user friendly/readable.

I am hoping someone can tell which file and which element needs to be edited please - I am guessing civicrm.css but the only entry I found that referenced 500px by default didn't do anything when I changed it.

Thanks!

Answer 1

That dialog box has it's dimensions set in a style tag of the html that's generated by javascript (which is why you won't see it in the source of the page or any of the css). There's probably a setting in a config file somewhere that controls it. The class of that div is "ui-dialog ui-widget ui-widget-content ui-corner-all ui-front crm-container ui-draggable ui-resizable ui-dialog-buttons" in case that provides any hints, I'd guess it's from jquery_ui.

On other hand, you probably don't want to mess with it - I suspect it would just be easier adjust your workflow, and create the new contact first before registering him/her.

If you are determined to fix it, I'd recommend instead you look at "bootstrap" (as in getbootrap.com), which CiviCRM is adopting in various ways. With a bootstrap style of form, it would have a better layout and put the labels above the fields. You could do that just with a bit of css override, or you could go whole hog and look at civihr and the bootstrap interface component of that.

Answer 2

Making the container wider won't necessarily solve your problem. Depending on what theme you are using for your administration, the field labels will wrap even if there is clearly more room available. I suggest you try adding (or modifying) a custom css file and link to it at Home » CiviCRM » Administer CiviCRM » Settings - Resource URLs. We keep ours in [cms.root]/sites/default/files/custom_civicrm.css.

Here are some of the CSS rules with which you may want to experiment:

 .crm-container .crm-section .label {
     float: none;
 }
 .ui-dialog label {
     white-space: nowrap;
 }

The float:none prevents the label from being jammed over to the left. Ironically, this "floats" the label above the field in a nice way. The white-space: nowrap forces the entire label to display on a single line, which overrides the word-wrap: break-word you might have in another css file.

If .ui-dialog ends up being too broad (creating strange effects elsewhere in your CiviCRM system), you might also try .CRM_Profile_Form_Edit. This should have the same effect, but will have a much more limited score. There may be other pop-up dialog boxes that have the same word-wrapping problem, and they will likely have different classes. You could copy the CSS for each class you find, or inspect the element using Chrome to find the most broad class that doesn't give you any undesired effects.