I have recently installed the FAQ field module and noticed that the fields are pushing outside the main container in the Seven theme.

https://www.drupal.org/project/faqfield
https://stackoverflow.com/questions/48319990/modifying-drupal-8-administ...
table overflowing in seven theme

I'm not sure how to actually fix this here for this specific field, but I reckon if we used flexbox to layout that page instead of floating divs we'd solve it very quickly. Now that we don't support IE9 and IE10 we can do this.

CommentFileSizeAuthor
#20 After_patch.png25.13 KBvikashsoni
#20 Before_patch.png28.72 KBvikashsoni
#17 Claro After Patch.png33.72 KBLokender Singh2
#17 Seven After Patch.png32.79 KBLokender Singh2
#17 Seven Before Patch.png43.69 KBLokender Singh2
#15 chrome_seven.png506.33 KBkiran.kadam911
#12 Installation error.png184.88 KBpriyanka.sahni
#12 Safari_Seven.png228.08 KBpriyanka.sahni
#12 Patch #10.png126.55 KBpriyanka.sahni
#12 Chrome_Seven.png453.89 KBpriyanka.sahni
#12 Chrome_Claro.png398.41 KBpriyanka.sahni
#10 seven.png435.25 KBkiran.kadam911
#10 claro.png495.45 KBkiran.kadam911
#10 form-field-spilling-over-content-pane-2937996-10.patch2.05 KBkiran.kadam911
#9 Screenshot 2020-06-05 at 8.00.08 PM.png220.08 KBkiran.kadam911
#8 Screen Shot 2018-02-04 at 12.08.16.png68.35 KBmarkconroy
#8 Screen Shot 2018-02-04 at 12.06.50.png83.83 KBmarkconroy
#7 Screen Shot 2018-02-04 at 11.56.41.png77.54 KBmarkconroy
#6 seven2.zip1.07 KBzeezack
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

zeezack created an issue. See original summary.

cilefen’s picture

cilefen CreditAttribution: cilefen as a volunteer commented
Issue tags: -https://www.drupal.org/project/faqfield/issues/2937994
Related issues: +#2937994: Form fields pushing out of main container
cilefen’s picture

cilefen CreditAttribution: cilefen as a volunteer commented
Component: forms system » Seven theme
zeezack’s picture

zeezack CreditAttribution: zeezack commented
Priority: Normal » Critical
cilefen’s picture

cilefen CreditAttribution: cilefen as a volunteer commented
Priority: Critical » Normal

Do not abuse the priority field. I’ve almost closed this as a duplicate of the issue you opened in the module’s queue. We don’t need two efforts to solve the same problem. It has not yet been shown this is a defect of Drupal core.

zeezack’s picture

zeezack CreditAttribution: zeezack commented
FileSize
seven2.zip1.07 KB

I've made a subtheme for seven to fix this.

markconroy’s picture

markconroy CreditAttribution: markconroy as a volunteer and at Annertech commented
Issue summary: View changes
FileSize
Screen Shot 2018-02-04 at 11.56.41.png77.54 KB

I'm not sure if this is an issue with Seven or not. It's happening because a table is being used with drag/drop handles making that field item wider than the available content space.

here's a screenshot:
table overflowing in seven theme

markconroy’s picture

markconroy CreditAttribution: markconroy as a volunteer and at Annertech commented
FileSize
Screen Shot 2018-02-04 at 12.06.50.png83.83 KB
Screen Shot 2018-02-04 at 12.08.16.png68.35 KB

From a quick playaround with flexbox, we'd end up with something like this:
FAQ Field (table field)
seven layout with flexbox

Standard body field:

seven layout with flexbox

kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
CreditAttribution: kiran.kadam911 at QED42 for Drupal India Association commented
Assigned: Unassigned » kiran.kadam911
Status: Active » Needs work
FileSize
Screenshot 2020-06-05 at 8.00.08 PM.png220.08 KB

Look like this is an issue in seven core I also checked by following steps to reproduce using seven as admin theme and table overlapping issue exists. Also, issue because of the input text size attribute which is 100.

Pls check the attached screenshot & feel free to add your opinion.

kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
CreditAttribution: kiran.kadam911 at QED42 for Drupal India Association commented
Assigned: kiran.kadam911 » Unassigned
Status: Needs work » Needs review
FileSize
form-field-spilling-over-content-pane-2937996-10.patch2.05 KB
claro.png495.45 KB
seven.png435.25 KB

Kindly review the attached patch.

Even drupal 8.9.x dev having this issue. The best solution to solve this issue keeping width 100% of table form-element(Target every .form-element input that parent is a form-item of a table cell.) as per implementation in the claro theme.

priyanka.sahni’s picture

priyanka.sahni CreditAttribution: priyanka.sahni at Srijan | A Material+ Company for Drupal India Association commented
Assigned: Unassigned » priyanka.sahni
priyanka.sahni’s picture

priyanka.sahni CreditAttribution: priyanka.sahni at Srijan | A Material+ Company for Drupal India Association commented
FileSize
Chrome_Claro.png398.41 KB
Chrome_Seven.png453.89 KB
Patch #10.png126.55 KB
Safari_Seven.png228.08 KB
Installation error.png184.88 KB

Verified by applying the patch #10.It was applied successfully for Drupal 8.0.x-dev.
Patch#10

But i was not able to test the issue fixed for Drupal 8.0.x-dev.Facing below issue.
Set up

@kiran.kadam911 Agree with you point.This issue exists for 8.9.x.It is working fine in Safari but the for chrome it exists.

Refer to the screenshots for Chrome and Safari for drupal 8.9.x.

Chrome_Seven
Chrome_Seven_D_8.9

Chrome_Claro
Chrome_Claro_D_8.9

Safari_Seven
Safari_Seven_D_8.9

priyanka.sahni’s picture

priyanka.sahni CreditAttribution: priyanka.sahni at Srijan | A Material+ Company for Drupal India Association commented
Assigned: priyanka.sahni » Unassigned
kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
CreditAttribution: kiran.kadam911 at QED42 for Drupal India Association commented
Assigned: Unassigned » kiran.kadam911
Status: Needs review » Needs work
kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
CreditAttribution: kiran.kadam911 at QED42 for Drupal India Association commented
Assigned: kiran.kadam911 » Unassigned
Status: Needs work » Needs review
FileSize
chrome_seven.png506.33 KB

Hey @priyanka.sahni

As i am able to see in your screenshot(inspect element) of chrome_seven for that faq question input field(field inside table) not having new css as per added in patch. I tested patch again on my local chrome browser and it's working fine. Adding screenshot for your reference see the inspect element section and css at right side.

Thanks!

Version: 8.0.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Branches prior to 8.8.x are not supported, and Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Lokender Singh2’s picture

Lokender Singh2 CreditAttribution: Lokender Singh2 at Srijan | A Material+ Company for Drupal India Association commented
FileSize
Seven Before Patch.png43.69 KB
Seven After Patch.png32.79 KB
Claro After Patch.png33.72 KB

Thanks all for working on this.

I have tested the patch in #10 on chrome and its is working as expected . This is RTBC from my side. Screenshots has been attached for Claro and Seven themes.

Pasqualle’s picture

Pasqualle
Location 🇭🇺 Budapest
CreditAttribution: Pasqualle as a volunteer commented
djsagar’s picture

djsagar CreditAttribution: djsagar at OpenSense Labs commented
Assigned: Unassigned » djsagar
vikashsoni’s picture

vikashsoni CreditAttribution: vikashsoni as a volunteer and at Zyxware Technologies commented
FileSize
Before_patch.png28.72 KB
After_patch.png25.13 KB

Applied and verified patch #10 working fine for reference sharing screenshot .....

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

smustgrave’s picture

smustgrave CreditAttribution: smustgrave at Mobomo commented
Project: Drupal core » Seven
Version: 9.4.x-dev » 1.0.0-alpha1
Component: Seven theme » Code

This appears to be specific to seven theme from what I can tell. Since seven is removed in D10 moving to the contrib module

djsagar’s picture

djsagar CreditAttribution: djsagar at OpenSense Labs commented
Assigned: djsagar » Unassigned