hey

when you have really long descriptions or many file extensions for Filefield module, the layout of the filefield fieldset / tab expands outwards of the regular node-form.
the same happens with FileField ImageField module Alt and Description fields.
the problem is not solved with FileField UI Extras module.
and the problem becomes worse with Admin module enabled, and expanded...

but this patch / code does solve it ;)

at least for Firefox / Chrome
older versions of IE might have difficulty applying max-width and max-height CSS properties.

/* filefield */
div.node-form div.vertical-tabs-panes div.description {
  overflow: auto;
  max-width: 650px;
  max-height: 80px;
  word-wrap: break-word;
}
div.node-form div.vertical-tabs-panes div.filefield-element div.description {
  overflow: auto;
  max-width: 550px;
  max-height: 80px;
  word-wrap: break-word;
}
div.node-form div.vertical-tabs-panes div.filefield-element fieldset.fieldset-additional-info div.description {
  overflow: auto;
  max-width: 400px;
  max-height: 35px;
  word-wrap: break-word;
}

/* filefield (admin module expanded) */
body.admin-expanded div.node-form div.vertical-tabs-panes div.description {
  overflow: auto;
  max-width: 500px;
  max-height: 80px;
  word-wrap: break-word;
}
body.admin-expanded div.node-form div.vertical-tabs-panes div.filefield-element div.description {
  overflow: auto;
  max-width: 400px;
  max-height: 80px;
  word-wrap: break-word;
}
body.admin-expanded div.node-form div.vertical-tabs-panes div.filefield-element fieldset.fieldset-additional-info div.description {
  overflow: auto;
  max-width: 350px;
  max-height: 35px;
  word-wrap: break-word;
}
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

lpalgarvio’s picture

Status: Active » Patch (to be ported)

additionally, using this

div.node-form div.vertical-tabs-panes div.filefield-element fieldset.fieldset-additional-info div.description {
  overflow: scroll;
}
body.admin-expanded div.node-form div.vertical-tabs-panes div.filefield-element fieldset.fieldset-additional-info div.description {
  overflow: scroll;
}

instead of auto, will force the scroll bars to show. sometimes they don't for Alt and Description fields.

lpalgarvio’s picture

FileSize
1.56 KB

another quick fix. everything should be all right now

/* filefield */
div.node-form div.vertical-tabs-panes div.description {
  overflow: auto;
  max-width: 650px;
  max-height: 80px;
  word-wrap: break-word;
}
div.node-form div.vertical-tabs-panes div.filefield-element div.description {
  overflow: auto;
  max-width: 550px;
  max-height: 80px;
  word-wrap: break-word;
}
div.node-form div.vertical-tabs-panes div.filefield-element fieldset.fieldset-additional-info div.description {
  overflow: scroll;
  max-width: 400px;
  max-height: 35px;
  word-wrap: break-word;
}
div.node-form div.vertical-tabs-panes div.filefield-element div.widget-edit {
  max-width: 470px;
}

/* filefield (admin module expanded) */
body.admin-expanded div.node-form div.vertical-tabs-panes div.description {
  overflow: auto;
  max-width: 500px;
  max-height: 80px;
  word-wrap: break-word;
}
body.admin-expanded div.node-form div.vertical-tabs-panes div.filefield-element div.description {
  overflow: auto;
  max-width: 400px;
  max-height: 80px;
  word-wrap: break-word;
}
body.admin-expanded div.node-form div.vertical-tabs-panes div.filefield-element fieldset.fieldset-additional-info div.description {
  overflow: scroll;
  max-width: 200px;
  max-height: 35px;
  word-wrap: break-word;
}
body.admin-expanded div.node-form div.vertical-tabs-panes div.filefield-element div.widget-edit {
  max-width: 260px;
}
willhowlett’s picture

I found the following fixed this issue for me:

.form-item .description
{
	white-space: pre-line;
}
TravisCarden’s picture

Category: feature » bug
Status: Patch (to be ported) » Needs review
Issue tags: +Novice
FileSize
269 bytes

Nice, @willhowlett. That's a very elegant solution. I don't see any negative repurcussions from it. Attached is a patch that adds it to style.css. Please review.

@LPCA: Just so you know, the correct status to for a patch is "needs review". See Status settings for an issue. :)

TravisCarden’s picture

Category: bug » feature
Status: Needs review » Needs work

Oops. I forgot to test in IE8, and it doesn't quite get the job done there.

lpalgarvio’s picture

thanks! will test as soon as i get back to some old 6.x projects.

TravisCarden’s picture

Status: Needs work » Fixed

I believe this is fixed in the latest dev. Can anyone confirm?

Automatically closed -- issue fixed for 2 weeks with no activity.