mirror of
				https://github.com/django/django.git
				synced 2025-10-31 09:41:08 +00:00 
			
		
		
		
	Fixed #34383 -- Fixed layout of admin fieldsets with multiple fields on the same line.
Thanks Antonio Candido Nazareth junior for the report.
Regression in 96a598356a.
Co-authored-by: Mariusz Felisiak <felisiak.mariusz@gmail.com>
			
			
This commit is contained in:
		
				
					committed by
					
						 Mariusz Felisiak
						Mariusz Felisiak
					
				
			
			
				
	
			
			
			
						parent
						
							21757bbdcd
						
					
				
				
					commit
					d687febce5
				
			| @@ -22,11 +22,15 @@ form .form-row p { | ||||
|     padding-left: 0; | ||||
| } | ||||
|  | ||||
| .form-row > div { | ||||
| .flex-container { | ||||
|     display: flex; | ||||
|     flex-wrap: wrap; | ||||
| } | ||||
|  | ||||
| .form-multiline > div { | ||||
|     padding-bottom: 10px; | ||||
| } | ||||
|  | ||||
| /* FORM LABELS */ | ||||
|  | ||||
| label { | ||||
| @@ -191,7 +195,6 @@ form .aligned table p { | ||||
| } | ||||
|  | ||||
| fieldset .fieldBox { | ||||
|     float: left; | ||||
|     margin-right: 20px; | ||||
| } | ||||
|  | ||||
|   | ||||
| @@ -390,10 +390,6 @@ input[type="submit"], button { | ||||
|         display: none; | ||||
|     } | ||||
|  | ||||
|     form .form-row p.datetime { | ||||
|         width: 100%; | ||||
|     } | ||||
|  | ||||
|     .datetime input { | ||||
|         width: 50%; | ||||
|         max-width: 120px; | ||||
| @@ -564,8 +560,6 @@ input[type="submit"], button { | ||||
|  | ||||
|     .aligned .form-row, | ||||
|     .aligned .form-row > div { | ||||
|         display: flex; | ||||
|         flex-wrap: wrap; | ||||
|         max-width: 100vw; | ||||
|     } | ||||
|  | ||||
| @@ -573,6 +567,10 @@ input[type="submit"], button { | ||||
|         width: calc(100vw - 30px); | ||||
|     } | ||||
|  | ||||
|     .flex-container { | ||||
|         flex-flow: column; | ||||
|     } | ||||
|  | ||||
|     textarea { | ||||
|         max-width: none; | ||||
|     } | ||||
|   | ||||
| @@ -170,7 +170,6 @@ form .wide input + div.help { | ||||
| } | ||||
|  | ||||
| fieldset .fieldBox { | ||||
|     float: right; | ||||
|     margin-left: 20px; | ||||
|     margin-right: 0; | ||||
| } | ||||
|   | ||||
| @@ -32,7 +32,7 @@ | ||||
|  | ||||
| <div class="form-row"> | ||||
|   {{ form.password1.errors }} | ||||
|   <div>{{ form.password1.label_tag }} {{ form.password1 }}</div> | ||||
|   <div class="flex-container">{{ form.password1.label_tag }} {{ form.password1 }}</div> | ||||
|   {% if form.password1.help_text %} | ||||
|   <div class="help"{% if form.password1.id_for_label %} id="{{ form.password1.id_for_label }}_helptext">{% endif %}{{ form.password1.help_text|safe }}</div> | ||||
|   {% endif %} | ||||
| @@ -40,7 +40,7 @@ | ||||
|  | ||||
| <div class="form-row"> | ||||
|   {{ form.password2.errors }} | ||||
|   <div>{{ form.password2.label_tag }} {{ form.password2 }}</div> | ||||
|   <div class="flex-container">{{ form.password2.label_tag }} {{ form.password2 }}</div> | ||||
|   {% if form.password2.help_text %} | ||||
|   <div class="help"{% if form.password2.id_for_label %} id="{{ form.password2.id_for_label }}_helptext"{% endif %}>{{ form.password2.help_text|safe }}</div> | ||||
|   {% endif %} | ||||
|   | ||||
| @@ -5,27 +5,30 @@ | ||||
|     {% endif %} | ||||
|     {% for line in fieldset %} | ||||
|         <div class="form-row{% if line.fields|length == 1 and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}"> | ||||
|             {% if line.fields|length == 1 %}{{ line.errors }}{% endif %} | ||||
|             {% if line.fields|length == 1 %}{{ line.errors }}{% else %}<div class="flex-container form-multiline">{% endif %} | ||||
|             {% for field in line %} | ||||
|                 <div{% if not line.fields|length == 1 %} class="fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}"{% elif field.is_checkbox %} class="checkbox-row"{% endif %}> | ||||
|                 <div> | ||||
|                     {% if not line.fields|length == 1 and not field.is_readonly %}{{ field.errors }}{% endif %} | ||||
|                     {% if field.is_checkbox %} | ||||
|                         {{ field.field }}{{ field.label_tag }} | ||||
|                     {% else %} | ||||
|                         {{ field.label_tag }} | ||||
|                         {% if field.is_readonly %} | ||||
|                             <div class="readonly">{{ field.contents }}</div> | ||||
|                         {% else %} | ||||
|                             {{ field.field }} | ||||
|                         {% endif %} | ||||
|                         <div class="flex-container{% if not line.fields|length == 1 %} fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}{% elif field.is_checkbox %} checkbox-row{% endif %}"> | ||||
|                             {% if field.is_checkbox %} | ||||
|                                 {{ field.field }}{{ field.label_tag }} | ||||
|                             {% else %} | ||||
|                                 {{ field.label_tag }} | ||||
|                                 {% if field.is_readonly %} | ||||
|                                     <div class="readonly">{{ field.contents }}</div> | ||||
|                                 {% else %} | ||||
|                                     {{ field.field }} | ||||
|                                 {% endif %} | ||||
|                             {% endif %} | ||||
|                         </div> | ||||
|                     {% if field.field.help_text %} | ||||
|                         <div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}> | ||||
|                             <div>{{ field.field.help_text|safe }}</div> | ||||
|                         </div> | ||||
|                     {% endif %} | ||||
|                 </div> | ||||
|                 {% if field.field.help_text %} | ||||
|                     <div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}> | ||||
|                         <div>{{ field.field.help_text|safe }}</div> | ||||
|                     </div> | ||||
|                 {% endif %} | ||||
|             {% endfor %} | ||||
|             {% if not line.fields|length == 1 %}</div>{% endif %} | ||||
|         </div> | ||||
|     {% endfor %} | ||||
| </fieldset> | ||||
|   | ||||
| @@ -33,12 +33,12 @@ | ||||
|  | ||||
| <div class="form-row"> | ||||
|     {{ form.old_password.errors }} | ||||
|     <div>{{ form.old_password.label_tag }} {{ form.old_password }}</div> | ||||
|     <div class="flex-container">{{ form.old_password.label_tag }} {{ form.old_password }}</div> | ||||
| </div> | ||||
|  | ||||
| <div class="form-row"> | ||||
|     {{ form.new_password1.errors }} | ||||
|     <div>{{ form.new_password1.label_tag }} {{ form.new_password1 }}</div> | ||||
|     <div class="flex-container">{{ form.new_password1.label_tag }} {{ form.new_password1 }}</div> | ||||
|     {% if form.new_password1.help_text %} | ||||
|     <div class="help"{% if form.new_password1.id_for_label %} id="{{ form.new_password1.id_for_label }}_helptext"{% endif %}>{{ form.new_password1.help_text|safe }}</div> | ||||
|     {% endif %} | ||||
| @@ -46,7 +46,7 @@ | ||||
|  | ||||
| <div class="form-row"> | ||||
|     {{ form.new_password2.errors }} | ||||
|     <div>{{ form.new_password2.label_tag }} {{ form.new_password2 }}</div> | ||||
|     <div class="flex-container">{{ form.new_password2.label_tag }} {{ form.new_password2 }}</div> | ||||
|     {% if form.new_password2.help_text %} | ||||
|     <div class="help"{% if form.new_password2.id_for_label %} id="{{ form.new_password2.id_for_label }}_helptext"{% endif %}>{{ form.new_password2.help_text|safe }}</div> | ||||
|     {% endif %} | ||||
|   | ||||
| @@ -353,13 +353,13 @@ class TestInline(TestDataMixin, TestCase): | ||||
|         ) | ||||
|         # The div containing the position field is hidden. | ||||
|         self.assertInHTML( | ||||
|             '<div class="fieldBox field-position hidden">' | ||||
|             '<div class="flex-container fieldBox field-position hidden">' | ||||
|             '<label class="inline">Position:</label>' | ||||
|             '<div class="readonly">0</div></div>', | ||||
|             response.rendered_content, | ||||
|         ) | ||||
|         self.assertInHTML( | ||||
|             '<div class="fieldBox field-position hidden">' | ||||
|             '<div class="flex-container fieldBox field-position hidden">' | ||||
|             '<label class="inline">Position:</label>' | ||||
|             '<div class="readonly">1</div></div>', | ||||
|             response.rendered_content, | ||||
| @@ -382,14 +382,14 @@ class TestInline(TestDataMixin, TestCase): | ||||
|         # The whole line containing position field is hidden. | ||||
|         self.assertInHTML( | ||||
|             '<div class="form-row hidden field-position">' | ||||
|             "<div><label>Position:</label>" | ||||
|             '<div class="readonly">0</div></div></div>', | ||||
|             '<div><div class="flex-container"><label>Position:</label>' | ||||
|             '<div class="readonly">0</div></div></div></div>', | ||||
|             response.rendered_content, | ||||
|         ) | ||||
|         self.assertInHTML( | ||||
|             '<div class="form-row hidden field-position">' | ||||
|             "<div><label>Position:</label>" | ||||
|             '<div class="readonly">1</div></div></div>', | ||||
|             '<div><div class="flex-container"><label>Position:</label>' | ||||
|             '<div class="readonly">1</div></div></div></div>', | ||||
|             response.rendered_content, | ||||
|         ) | ||||
|  | ||||
|   | ||||
| @@ -8105,11 +8105,13 @@ class TestLabelVisibility(TestCase): | ||||
|         self.assert_field_visible(response, "second") | ||||
|  | ||||
|     def assert_field_visible(self, response, field_name): | ||||
|         self.assertContains(response, '<div class="fieldBox field-%s">' % field_name) | ||||
|         self.assertContains( | ||||
|             response, f'<div class="flex-container fieldBox field-{field_name}">' | ||||
|         ) | ||||
|  | ||||
|     def assert_field_hidden(self, response, field_name): | ||||
|         self.assertContains( | ||||
|             response, '<div class="fieldBox field-%s hidden">' % field_name | ||||
|             response, f'<div class="flex-container fieldBox field-{field_name} hidden">' | ||||
|         ) | ||||
|  | ||||
|     def assert_fieldline_visible(self, response): | ||||
|   | ||||
		Reference in New Issue
	
	Block a user