image field destroys layout of node edit form [#1330618]

I altered the document type "story" by adding a image field to the document type.

Since then, the layout of the node edit form does not look like expected.
Please have a look at the screenshots.

In the settings I set "Image field alignment" to "left". (If I set it to "none" all is ok in the edit form, but the image does not float in the view mode too).

Comment	File	Size	Author
	edit story.jpg	128.89 KB	smitty
	create new story.jpg	126.97 KB	smitty

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Jeff Burnz CreditAttribution: Jeff Burnz commented 3 November 2011 at 22:08

Category:

bug

» feature

Is there a reason to use the front end theme for the admin?

This is actually a feature request because the very concept of using the front end theme for content creation is a feature that some themes might choose to offer, and honestly I think its an edge case since we have Seven and AT ships with a pretty good admin theme as well.

Comment #2

smitty CreditAttribution: smitty commented 4 November 2011 at 14:51

Well you are right: There is no need to use the front end theme for the admin.

BUT: Content editing is not only the task of the admin. In a community also the members of a community are going to edit content. So I think the create and edit content forms should work well in every theme.

I had another look at the problems and detected that the problem of "edit story.jpg" is independent of the "Image field alignment". I went though the css and found out, that all is well, if I put this into the css:

.image-widget-data div.form-item {
  width:530px;
}

.image-widget-data .form-item .description {
  white-space: normal;
}

The only problem (as far as I see) with this solution is that it works only for a specific width and you have to adjust the css if you change the page width or the widths of the sidebars.

Has anybody a better solution?

Comment #3

Jeff Burnz CreditAttribution: Jeff Burnz commented 8 November 2011 at 02:18

On line 161 of pixture_reloaded.settings.style.css you can add these two lines of CSS which will fix the issue - I have no problem including this in the next update:

  float: none !important;
  margin: 0;

The whole declaration looks like this (with the above additions):

/* Reset node form image fields */
form.node-form div.field-type-image,
form.node-form div.field-type-image img {
  text-align: left !important;
  float: none !important;
  margin: 0;
}

Comment #4

smitty CreditAttribution: smitty commented 10 November 2011 at 11:15

Hi Jeff,

thanks for the two lines to add. This works fine and solves the issue with the "create new story.jpg".

Please include it in the next update.

I am still looking for a better for the width-problem (edit story.jpg; #2). Any suggestions?

Comment #5

Jeff Burnz CreditAttribution: Jeff Burnz commented 10 November 2011 at 14:16

Yeah, its kind of tricky to work around because we don't know the width, all I can say is get rid of the blocks in the sidebar, you can use something like this in the visibility settings:

Show on all pages except for...