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

.float-right doesn't work inside a .row #25829

Closed
ghost opened this issue Mar 12, 2018 · 11 comments
Closed

.float-right doesn't work inside a .row #25829

ghost opened this issue Mar 12, 2018 · 11 comments

Comments

@ghost
Copy link

ghost commented Mar 12, 2018

The button in the HTML below (codepen.io) remains left-aligned despite the float-right class.

<!DOCTYPE html>
<html>
<head>
  <title>.float-right issue</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <style>.row { background-color: #ff8621; }</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <button class="btn btn-primary float-right">To the right!</button>
    </div>
  </div>
</body>
</html>

Firefox 58.0.2, linux/amd64

@Kout
Copy link
Contributor

Kout commented Mar 12, 2018

I am afraid, it cannot work, as floats in flexbox context don’t work by principle. But you can achieve floating behaviour by adding margin: auto in desired direction. So in your case (to let the element float right) add margin-left: auto to it. Adding .ml-auto on the button, should get you there.

See example here: https://stackoverflow.com/a/36606694/2296044

@ghost
Copy link
Author

ghost commented Mar 12, 2018

@Kout In this case I think it should be documented somewhere or other.

@ghost
Copy link
Author

ghost commented Mar 12, 2018

Also, the float-right class doesn't have to use the float CSS property internally.

@Kout
Copy link
Contributor

Kout commented Mar 12, 2018

@opennota You mean something like:

.float-right {
    float: right !important;

    . row > & {
        margin-left: auto !important;
    }
}

?

Well, it deserves more discussion and thinking. Personally I am not up for it. It is kinda workaround/hack which can cause more harm than good in the end. Simply: don’t expect floats to work inside flexbox.

@kevinruscoe
Copy link
Contributor

The problem is floating doesn't work like flex-boxes auto margins. Take https://codepen.io/anon/pen/aYOrMO for example, the DOM order is 1, 2. But if you float of these right then the order becomes 2, 1. Whereas if you auto-margined to push them to the right, they'll retain their DOM position. So, I think it's a bad idea to assume .float-right on flex works the same way as `.float-right' on non-flex items.

@danijelGombac
Copy link

You can use order classes (.order-) with auto-margin.

@Kout
Copy link
Contributor

Kout commented Mar 12, 2018

@kevdotbadger These are exactly my worries of mixing two principles: flexbox and floats. I think nowdays with even better support of CSS grid, float should be really used mostly for its original purpose: floatning blocks inside text. For layout it’s been a hack (very clever though).

@opennota Looking again at your code: why do you use .row actually? If there is just button it should be direct child of the .container. In terms of how the BS grid system works, there should be “only” .col-s as direct descendants of the .row element. Think of it as ul (~ .row) and li (~ .col).

@ghost
Copy link
Author

ghost commented Mar 12, 2018

@Kout
My concern is that the documentation on floats doesn't say anything about it not working well with the new flex/grid system.

@kevinruscoe
Copy link
Contributor

@opennota Is that the documentations' problem though? Flex and float generally don't work well together anyway. There's a couple of assumptions here:

1 - The developer knows enough about CSS to know the quirks
2 - The developer doesn't know enough about CSS to use flex and float together.

I don't think we need to hand-hold the developer and tell them what doesn't work well together.

@mdo
Copy link
Member

mdo commented Mar 12, 2018

Not the documentation's fault IMO, but I'm always open to changes to help clarify. Few things, though:

  • In our grid docs, we explicitly state only columns can be immediate children of rows. Your opening example has a row for no reason and a button within. Ditch the row, and you can float.
  • Float utilities are for the float property. Internally, they must use that CSS and nothing else.
  • Utilities are immutable, they cannot change based on their parent's context.
  • Lastly, float and flex are two different layout approaches. They don't mix, and they require some background knowledge for the history there.

So, all told, only thing we could do is on the float utilities page is to mention floats don't mix with miscellaneous layout modules (flex, likely grid, probably table, etc).

@ghost
Copy link
Author

ghost commented Mar 12, 2018

@mdo

So, all told, only thing we could do is on the float utilities page is to mention floats don't mix with miscellaneous layout modules (flex, likely grid, probably table, etc).

SGTM.

Varunram added a commit to Varunram/bootstrap that referenced this issue Mar 23, 2018
@mdo mdo closed this as completed in abe44dc Mar 31, 2018
eazyrepo added a commit to eazyrepo/bootstrap that referenced this issue Jun 27, 2018
* Use Jekyll's markdownify filter instead of a custom plugin (twbs#25319)

* Allow to change `.table-striped` `odd` or `even` (twbs#25333)

* Remove -Pre from Nuget install

* dist

* rearrange and override extra borders

* tweak html

* Update dropdown.js to allow referenceElement (twbs#25219)

* ignore case (twbs#25373)

Less on 2 symbols

* Remove escaping selector and add a warning to inform folks to escape their selectors (twbs#25390)

* Use variables for theme-color-level function

Closes twbs#25313

* Add missing flex-fill utility

* Document .flex-fill class in flex utils

* Add CSS Utility for `auto` width and height Properties (twbs#24249)

Currently bootstrap only provides 4 variations of `width` and `height` css utilities, which are:

1. 25%
2. 50%
3. 75%
4. 100%.

Here, I'm adding `auto` to the list. This is useful when we need to reset the width/height value
back to the browser default value at some point.

* Allow to customize vertical margin of `nav-divider` mixin

* v4.1: Add .dropdown-item-text (twbs#22965)

* Add .dropdown-item-text class

* Add example of plain text within a .dropdown-menu, too

* reorganize, simple/clearer headings

* Feature: Add carousel fade option (twbs#22958)

* Move helpful code comments

* Add .carousel-fade option to Sass

* Document example of the fade carousel

* more logical warning of the .active class on carousel items

* Update devDependencies. (twbs#25371)

* Fix typo in navs.md (twbs#25404)

* Update jQuery to v3.3.1. (twbs#25398)

* Fix typo in approach.md (twbs#25492)

* Update devDependencies and gems. (twbs#25502)

* Fix example Blog post card text overflowing for medium screen size. (twbs#25416)

* Replace unicode character in _hover.scss (twbs#25503)

* Fix "CVV" label pointing to wrong field (twbs#25518)

* Clarify stacked-to-horizontal in layout/grid.md (twbs#25520)

- Fixes typo with "with at" in "horizontal with at the small breakpoint"

* Add FontAwesome to icon list. (twbs#25451)

* Examples: Prevent focus into closed offcanvas (twbs#25524)

* Prevent focus into closed offcanvas

* Override .custom-select width in .form-inline (twbs#25414)

Fixes twbs#25413

* close twbs#25534

* Fix pagination buttons hover z-index (twbs#25532)

* Clarify migration docs to remove mention of .table-responsive being for the parent element vs the table element itself (twbs#25539)

* Update devDependencies and gems. (twbs#25551)

* Enable `scss/dollar-variable-default` rule (twbs#25542)

This checks if all variables are `!default`.

* Fix the incorrect id in center modal example

* Remove `show` class from example code (twbs#25570)

* Create a variable for label margin bottom (twbs#25561)

* use $input-bg for $custom-select-bg (twbs#25564)

* use $input-bg for $custom-select-bg

* Update themeing docs for more clearly how to remove from map (twbs#25589)

* Add note about insert position of "map-remove"

* Use optional keys instead of required keys

* set color to form-control-plaintext (twbs#25565)

* set color to `.form-control-plaintext`
* fixes readability on dark themes like ‘darkly’
  * https://bootswatch.com/darkly/index.html#forms
  * https://bootswatch.com/slate/index.html#forms
  * https://bootswatch.com/superhero/index.html#superhero
  * https://bootswatch.com/solar/index.html#forms

/cc @thomaspark

* dist

* Update `.sr-only` mixin and utility (twbs#25197)

* Remove clip-path from .sr-only utility as it causes perf regressions in Chrome

* change snippet to example

* Fix border-radius on Browse button for custom file input inside input groups (twbs#25356)

* Update stylelint config to add missing properties (twbs#25572)

* add missing properties

list of new properties:
align-content
animation-fill-mode
appearance
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
direction
fill
flex-shrink
orphans
page-break-after
page-break-before
page-break-inside
perspective
src
stroke
unicode-bidi
widows

* fix invalid JSON config

add curly brackets

* Update .stylelintrc

* Dropdown - Allow to disable Popper.js style (twbs#24092)

* Dropdown - Allow to disable Popper.js style

* Update dropdown.js

* Update dropdown.html

* copy changes

* Prevent word-wrap (twbs#25248)

Fixes twbs#25235

* Update position.md (twbs#25607)

2 small typos

* Reword alert and list group text to avoid "a/an" problems

Closes twbs#25611

* [Docs] Clarify suggested use of custom validation styles, add note about resetting form appearance after validation (twbs#25628)

* Expand/clarify recommendation for using custom validation styles

Seems support for correctly announcing browser default navigation bubbles/notifications has improved recently. Now it seems only Chrome (at least on Win and Android, not tested on macOS) is the odd one out.

However, we should really make sure the custom validation messages are also tied correctly to their relevant form controls - need to dig out the PR that will ensure that.

* Add note about resetting form appearance after submission

xref twbs#25626

* Add `type="button"` to `<button>`s in accordion example (twbs#25643)

For consistency. Closes twbs#25642

* Fix carousel transition duration (twbs#25218)

* Custom range input (twbs#25600)

* added the styling

* added the documentation

* update for one rule per line

* fix hound error: trailing whitespace

* trimmed off vendor prefixes

* Add note about track and thumb

* Psuedo-elements must be split across multiple rulesets to have an affect

* Fix firefox inner focus

* Seems that FF is the only one affected by this

* Add support for gradients

* Add labels, clarify min/max changes

* add step example

* add custom range vars

* Be more explicit where to find variables  (twbs#25624)

* Tell where to find the variables to override

* Be consistent with path to _variables.scss

* Get rid of some 'our' in the doc

Replaced by 'Boostrap's' when relevant

* Add color variable for caption (twbs#25657)

* dist

* make it a var

* Consistent usage of $(document.body) instead of $('body') (twbs#25671)

* Brush up vertical rhythm of form-check in docs. Closes twbs#25546

This adds `form-group` to add the same vertical space to the `form-check` as in other grouped controls
used in form sample markup.

Thanks!

* Remove disabling of stylelint rule

This file no longer has intentional indentation errors

* Add focus states to custom docs buttons

* Fix typo of example in hiding doc

* dist

* Fixes twbs#25703

* Add tabindex attribute to disabled buttons sample. Closes twbs#23361 (twbs#25680)

As discussed in issue's comment:
https://git.io/vAuPW

Thanks!

* Remove unused variable (twbs#25670)

This variable is not used anywhere.

Leftover from twbs#18373.

* docs skippy partial (twbs#25750)

* load skippy markup from includes

* display on xl viewport

See issue twbs#25711

* Fix leftover reference to v4.0.0-alpha.6

Running `./build/change-version.js v4.0.0-alpha.6 v4.0.0` fixed this,
so the version change script works fine. I'm presuming instead this
change was just omitted from 35f80bb, and then wouldn't have
been caught by subsequent runs of `change-version`, since it only
ever replaces the exact old version string specified.

* Replace img-fluid by w-100 to conform with HTML

* Adding a variable to handle the change of a modals border-radius. (twbs#25691)

* dist

* Fix twbs#25746

* Update blockquote migration docs to reflect twbs#22949

Fixes twbs#25669, closes twbs#25779.

* Update devDependencies and gems. (twbs#25708)

* add code coverage

* Add a bit of documentation on how to run the code coverage (twbs#25783)

* Update webpack.md

Minor edits for style and consistency

* style: align some vars (twbs#25785)

* add Icons8 to icon options (twbs#25763)

[Icons8](https://icons8.com/) is a great resource for icons.

They provide 15 different icon styles, exportable as fonts or svg

* Collapse with flex elements - simple approach (twbs#25806)

* twbs#22600: prevent display:block for visible content

* allow transition for elements with show class

* re-use gray for bd-example border / background (twbs#25751)

* Fix caret alignment (twbs#25719)

* Allow customization of breadcrumb border radius (twbs#25807)

* Clean shell scripts (twbs#25704)

* Replace "loose" HEX values with their respective variables (twbs#25672)

* Fix examples' issues twbs#25664 and twbs#25388 (twbs#25665)

* Prevent sign-in form from going outside viewport (twbs#25388)

* Workaround IE centering bug

* Disable link functionality on disabled `btn-link` (twbs#25645)

Future-proof disabling of clicks on disabled `btn-link`. Fixes twbs#25639
ensuring consistency between `btn-link` `<button>`s and `<a>`s when disabled.

* Add basic position to dropup/right/left and dropdown-menu-right (twbs#25400)

* Rename `.custom-file-control` to `.custom-file-label` (twbs#25736)

* Use callout without custom Jekyll plugin.

* callout.html: drop whitespace and better usage comment.

* Use bugify without custom Jekyll plugin (twbs#25334)

* Clarify the necessary `data-target`/`href` attribute for carousel controls (twbs#25690)

* Variable transition durations (twbs#25662)

* fix get the transition duration parent

* saucelabs-unit-test.js: tweak failed tests message (twbs#25836)

* approach.md: Fix empty link.

* approach.md: Use normal apostrophes.

They are converted when building.

* Add Sinon to do better unit test

* Document `.form-control-range`. (twbs#25839)

* Remove custom example plugin. (twbs#25784)

* Enable docsearch in development env.

Previously a search redirected to `https://getbootstrap.com/...`

* Alternative solution.

Rely on `site.url` which is different for production. In that case do nothing with the search result, otherwise when in development remove our url from it.

* Fix order of Save/Close buttons in modal code example (twbs#25855)

* Update vertical pills example (twbs#25852)

Add the column/grid to the example code (which is what makes it vertical in the first place)

* theming.md Typo Fix (twbs#25875)

it's ≠ its

* Separate issue templates, add support doc (twbs#25705)

* Update issue template to break down by bug and template, add support doc to close twbs#23133

* add links from readme for bug and feature templates

* Making use of `prefers-reduced-motion` media query (twbs#25641)

* Making use of `prefers-reduced-motion` media query

As discussed in twbs#25249 - if a user (Who is using Safari / iOS) requests
reduced motion in their system settings, we should avoid transitions.

* Ignoring prefers reduced motion for CSS Linting
* Updating copy clarifying the reduce motion functionality in accessibility.md

* Use transitionEnd in QUnit since we moved away from PhantomJS

* throw error when coverage is under our thresholds

* Update dependencies.

* tests: use QUnit from the jQuery CDN.

* Use sinon from cdnjs.

* Update to workbox 3.0 & fix breaking changes

* sw.js: fix TypeError with new workbox.

* Update workbox.js

* Update all devDependencies.

Kept back karma-qunit and qunitjs because tests fail.

* fix rollup config

* tests: load 3rd-party libs from the local node_modules folder.

This reduces duplication and the chances to forget to update something.

* Remove the local jquery-1.9.1.min.js.

* Fix skip element disabled via attribute when using keyboard navigation

* Fix duplicate `main` element.

* Fix spacing between Item and numbers

* fix bundle and run test against it

* Add .bg-transparent to docs

* docs: Switch to StackPath's URL.

While the old one will keep working, better switch to the new one.

* Revert "docs: Switch to StackPath's URL."

This reverts commit 7052085.

* Correct children selector

* fixes twbs#25918

* dist

* Add small not to float docs about mixing with flex items

Closes twbs#25829, closes twbs#25924

* fixes twbs#25343 by mentioning how collapse animates in docs

* Add .text-monospace util

* Remove navbar align

* Close twbs#25697

Removes the .justify-content-between from a navbar form example given it's the default style. Instead, mention how to adjust this and link to flex utils.

* add .text-body, fixes twbs#25412

* add 50% translucent black and white text

* document new text color utils

* Fix Chrome's rendering of .card-columns

Uses orphans/widows trick from @fran-worley at twbs#20925 (comment).

Fixes twbs#20925.

* Add new .flex-grow and .flex-shrink utils

* Mention browserslist config in our docs to close twbs#25429

* Add box-shadow utilities (twbs#25758)

* Deprecate .text-hide (twbs#26173)

* dist

* docs edit suggestion

* Tiny grammar and punctuation tweaks to a comment.

1. It's == "it is"

2. The subject of the sentence is "Only one" (not "these") so the verb must agree with it.

Feel free to do nothing with this change, use it, etc - I just saw this while reading through the code.

* Dashboard updates (twbs#26179)

* Update Dashboard example

- Replaces .sticky-top on .navbar with .fixed-top
- Adjusts padding on main content area and sidebar to account for fixed navbar
- Move to padding in sidebar instead of top: 48px; fixes Firefox rendering issue
- Adds new .shadow utility for a little extra cherry on top
- Moves sticky styles to separate feature query ruleset to avoid IE rendering issues

* Add .w-100 to chart to fix IE horizontal scroll from label that extended past viewport

* Update offcanvas example for IE support

- Replaces CSS variables with their appropriate hex values
- Fixes the broken navbar transition by moving from 2D translates to using position
- Fix broken IE navbar toggler placement with some utilities (not necessary anywhere else, but necessary given flexbox quirks)

* Allow non-string content as breadcrumb divider (twbs#25581)

* Allow url(), attr(), none,... as breadcrumb divider
* Update breadcrumb divider docs

* Pagination move `.page-link:focus` outline value to variable `$pagination-focus-outline` so we can unset it via Sass and don't have to re-implement browser defaults

* dist

* Use https when possible.

* Fix broken URI fragments and redirects.

* docs: Switch to StackPath's URL.

While the old one will keep working, better switch to the new one.

* Remove note about multiple inputs (twbs#26194)

* Remove note about multiple inputs

* patchs the PR and removes the word Also

* add examples to theming docs section on css vars in media queries, closes twbs#26205

* closes twbs#26213

* vnu.jar: Ignore all wrong language code warnings.

* Ship v4.1.0 (twbs#26218)

* update docs path from docs/4.0/ to docs/4.1/

* bump version to 4.1.0

* Update redirects to work for 4.1 docs move

* Update docs version switcher to include latest and link to 4.0 docs

* re-run dist

* Update package-lock.json

* Update docs-navbar.html

* Clean up globals.

Also, add a missing license header in build/workbox.js.

* v4 improve coverage (twbs#25945)

* Improve code coverage for our Button plugin

* improve coverage for our Alert plugin

* test tooltip update method

* test update and dispose for dropdown

* increase code coverage requirements

* Fix incorrect class name (twbs#26239)

Fixes twbs#26235

* Update dependencies and gems (twbs#26234)

* Fix incorrect value of Stylelint option (twbs#26192)

* update README.md - debug search option is now in application.js (twbs#26263)

* Dropdowns `display` default value (twbs#26272)

* modal use global scope for default

* Docs/examples: change links to Sass documentation and example.com to https

* fix issue related to Object.keys and Dropdown issue

* [trivial] Correct typos (twbs#26297)

* Remove `dialog` from the HTML5 shim style (twbs#26269)

`<dialog>`, in browsers that support it, has user agent styles of `dialog { display:block; ...} dialog:not([open]) { display:none; }`
by forcing it to `display:block` in the shim, the dialog is shown even when closed. There's no clean way to shim this for non-supporting browsers,
but arguably these browsers would have further problems with pure `<dialog>` usage anyway, and it's up to authors to then use different elements/shims.

* Resolve twbs#26262: Add deprecated warning (twbs#26292)

* Bump version to 4.1.0 for remaining files.

* breadcrumb.md: Remove trailing space.

* Suppress text-hide deprecation warning (twbs#26242)

* Update devDependencies. (twbs#26309)

* Update devDependencies. (twbs#26322)

* Be explicit in the docs for deprecating text-hide

* typo

* detect test exceeded maximum duration on Sauce Labs

* Update Jekyll to 3.8.0. (twbs#26352)

* Print color fix dark tables and dark theads (twbs#26193)

* workaround for IE that check indicator does not appear (twbs#25944)

* Replace reboot monospace hack with system font stack

* add validation styles for .form-control-file (twbs#26181)

* Remove unnecessary resetting of left round (twbs#26238)

* Closes twbs#26300: Add cursor pointer to carousel indicators

* Change accordion example id (twbs#26391)

for clarity/consistency with other similar examples

* Pass docs version to search form and switch to the new index.

Also, move the search code to a separate file.

* Add comment in docs JS files.

* Doc update - remove media-breakpoint-up(xs) (twbs#26316)

* Doc update - remove media-breakpoint-up(xs)

If media-breakpoint-down(xl) is not listed, then media-breakpoint-up(xs) does not need to be listed either.
The above 4 media queries are now aligned with the 4 media-breakpoint-up mixins (just like their media-breakpoint-down counterparts).

* Improve media-breakpoint-up/down docs

* Update README.md

* Simplify custom file inner height for generated browse button

* dist

* Bump version to v4.1.1

* Fix heading levels (twbs#26433)

H3 was used without preceding H2, breaking document flow.

* Fix z-index target (twbs#26361)

* fix(doc): typo in dropdowns.md

* [trivial] Rewording in tooltips. Closes twbs#26467 (twbs#26521)

* Fix double-transition bug (twbs#26452)

By applying the transition: CSS property only to classes that are
active during sliding, we avoid an unnecessary, non-zero-time
animation that although mostly invisible, does interfere with e.g.
z-index based parallax

* closes twbs#26543, fixes twbs#26542

* Fix/add more correct labels/descriptions for input group examples (twbs#26551)

Among other things, closes twbs#26548

* Update devDependencies and gems.

Downgrade bundlesize until they make brotli optional since it doesn't work with node.js 10.x yet.

So, babel, qunit/karma-qunit and bundle-size aren't the latest versions.

* chore(deps): update qunit and karma-qunit

* fix(tooltip): remove useless unit test

* Update again.

* Custom forms transition

* Add disabled bg color to disabled custom file

* Add coverall to follow our coverage

* fix branch for coveralls badge

* Run coveralls only on Travis and only once.

* Update package-lock.json.

* Remove the unused docs upload preview stuff. (twbs#26599)

* https link to editorconfig.org

* Fix inline labels with a custom select (twbs#26615)

Add an sr-only class to the label on inline labels with a custom select

* Changed Node.js download page (twbs#26638)

Link to the more user-friendly Node download page (rather than just the raw directory view)

* fix(tooltip): xss in container option

* fix(collapse): xss in parent option

* fix(scrollspy): xss in target option

* Generate safari-pinned-tab.svg again.

* refactor(plugins): improve how we query elements

* chore(bundlesize): increase bootstrap.js max size

* sw.js: change to a relative link for the workbox files.

This was broken after the docs refactoring.

* Stricter stylelint rules

* refactor(plugins): query elements without jquery

* Limit .close hover/focus to non-disabled controls (twbs#26654)

* Fix markdown code inside HTML code. (twbs#26662)

* HTTPS link (twbs#26663)

saves a redirect

* Add additional wording to the Introduction section of Bootstrap docs about the bootstrap bundle js (twbs#26688)

* Fix node_modules path (twbs#26653)

* Remove inkscape data from brand svgs (twbs#26708)

* Update package-lock.json with npm 6.3.1.

* Update gems.

* Update all devDependencies apart from bundlesize and babel.

Newer bundlesize versions still don't work with node.js 10.x.

babel has some bugs that we need to be fixed.

* Change karma tests to run sequential.

I was getting port in use errors.

* Update folder structure (twbs#26729)

* Remove disabled class from wrapper

`disabled` class is not needed for wrapper.

* dist

* Move `eslint-plugin-compat` to the extends array.

* Render inline svg like img (twbs#25874)

* Update box-shadows on .custom-select (twbs#26754)

- Fixes twbs#25656 where custom selects had the wrong focus shadow
- Fixes twbs#26668 where custom selects had no inset shadow (also closes twbs#26572 which had the wrong form classes on the first example anyway)

* Fixes Edge and IE label overlapping issue (twbs#25919)

The 'Floating labels' example is only supported on Chrome, Safari and Firefox. On Edge and IE the label is displayed always and any text input overlaps the label which makes it unreadable.

The fix here targets Edge and IE and makes the form behave normally, the labels are hidden and the placeholder color is standard.

* dist

* feat(dropdown): add original click event

* Add broken-link-checker.

* fix(tooltip): get tip on placement change
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants