Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table aligned left, doesn't clear the float after it #12387

Closed
fmonts opened this issue Nov 28, 2018 · 4 comments
Closed

Table aligned left, doesn't clear the float after it #12387

fmonts opened this issue Nov 28, 2018 · 4 comments
Labels
[Block] Table Affects the Table Block [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed [Type] Enhancement A suggestion for improvement.

Comments

@fmonts
Copy link

fmonts commented Nov 28, 2018

See the following screenshot.
If I align a table to left (or right), there should be a clear: both after it so I can add blocks below it.
Now I can't find any way to do this.

image

@swissspidy swissspidy added Needs Testing Needs further testing to be confirmed. [Block] Table Affects the Table Block labels Nov 28, 2018
@designsimply
Copy link
Member

Tested and confirmed that a left-aligned table block is floated left with content wrapping around it. I am not sure clearing the float is the correct route and would like to explore other potential solutions such as being able set the width of a table because it's also possible that someone would want to add a table that is left-aligned that does not clear the float:

screen shot 2018-11-28 at 2 14 55 pm
Tested with WordPress 4.9.8 and Gutenberg 4.5.1 master @ e4fd51cb5 using Firefox 63.0.3 on macOS 10.13.6.

Now I can't find any way to do this.

You can do this by adding an additional CSS class for the block that comes after your table block by clicking on that block, going to Settings > Block > Advanced, adding a class name such as clearfix, then going to Appearance > Customize > Additional CSS and adding CSS such as .clearfix { clear:both; }.

@designsimply designsimply added Needs Design Feedback Needs general design feedback. and removed Needs Testing Needs further testing to be confirmed. labels Nov 28, 2018
@kjellr
Copy link
Contributor

kjellr commented Apr 9, 2019

Thanks, @fmonts! We discussed this ticket in the design triage this week (A slack login may be necessary to view that link), and I want to share a few notes:

  • I believe this applies to all floated blocks. This is generally the way that floats behave, and isn’t necessarily a Gutenberg issue.
  • That doesn't mean we can't solve it though. We should consider giving the user options to adjust this sort of thing, but caveat that it’s an advanced issue. Most non-technical users will not understand what it means to "clear" a "float" (We just present these as "Alignments" in the UI).
  • While not directly related, it may also be worth keeping an eye on Two blocks with align attribute are not being cleared correctly. #13784, which also asks some float-clearing questions.

@joyously
Copy link

I suggested this two years ago, but I'll do it again here: Add an alignment option for Clear, alongside all the other alignments. It can apply to any block easily. It would not be mutually exclusive of the other alignments, but additive. It's just a class for clear:both. Or if you want to get fancy, make it a choice of clearleft, clearright, clearboth.

@designsimply designsimply added [Type] Enhancement A suggestion for improvement. and removed Needs Design Feedback Needs general design feedback. labels Aug 20, 2019
@talldan
Copy link
Contributor

talldan commented Aug 21, 2019

I'm closing this as a duplicate of #10299, which covers the issue for all blocks that have alignments (not just the table block).

@talldan talldan closed this as completed Aug 21, 2019
@talldan talldan added the [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed label Aug 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Table Affects the Table Block [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

6 participants