Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Ken Haduch
@khaduch
With that property on the <div> parent element, as the paragraph says it will expand to contain all the floats. If it isn't there, then they are all collapsed to the left, so they are there but just hidden behind the first one.
@toianw - thanks for posting that link, by the way
CamperBot
@camperbot
khaduch sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 501 | @toianw |http://www.freecodecamp.org/toianw
imemoje
@imemoje
it will expand to contain all the floats?
what will expend ?
Ken Haduch
@khaduch
@imemoje - as you see, if you remove that property, then all of the floats / icons are collapsed to the left. The parent div is what expands. The <div class="icon-bar"> in your code.
The overflow:auto; is a property of the class .icon-bar
imemoje
@imemoje
uhhh it is maybe it is to complicated to me
let try this way
i am at the point where all a links are vertically
and now i want to make them horizontally
i do the float left to make them in one line, to glow right of first icon
i get that
and now i do not see them all, just the first element first icon
they do not have height ok i get that also
but first why all of them are not visible just first icon is
that is first thing that i do not understand
imemoje
@imemoje
why they all are collapsed on one icon?
isnt they supposed to be one next to other one?why all collapse in one?
5 icon in 1 why?
Ken Haduch
@khaduch
@imemoje - all I can say is that "floats" do strange things on a page. I try to avoid them as much as possible! In a case like this, I would use the formulaic approach that they outline on the page, all of the information about "clearing" floats seems like magic to me. I would take what works and use it. It would be good to understand it all in gory detail. You can read this article to learn more about floats...
imemoje
@imemoje
what approach would you use? what is formulaic approach?
Ken Haduch
@khaduch
@imemoje - exactly what they showed in this article, the thing that works in your example - use overflow: auto on the parent div...
but you are making me read more of the articles on float because I'm lacking in knowledge on this area... :)
imemoje
@imemoje
ok sory please
i hate float
with all my heart
i hate things that can be done in 15 ways
i hate things that are undefined and unclear
that hang in air
i hate things that are left to interpretation
and i hate things where there is no best way to do that thing
i hate float
Ken Haduch
@khaduch
@imemoje - well, take a look at this article: https://www.sitepoint.com/simple-clearing-of-floats/ - part of the way down there, the author describes a "revelation" about the overflow: auto; property on the parent being the way to do this... reading through it seems that there were many idea of how to accomplish this objective, but that method was a "surprise" to the author. The explanation is somewhat short on technical detail of why it works, see if you think that it seems that way to you?
imemoje
@imemoje
ok i will
thank you @khaduch
CamperBot
@camperbot
imemoje sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3621 | @khaduch |http://www.freecodecamp.org/khaduch
Hills
@Hillsie
Hello, can anyone advise me on how to do a screen grab? I want to be able to screen grab inside my project before posting to social media so that I capture a portion of the page in an image.
Nick Karnik
@theoutlander
which OS are you on
Tom
@moT01
@imemoje that's a nice little poem there
Ian
@toianw
@imemoje It works because setting overflow to any value other than visible (the default value) creates a new block formatting context. A block formatting context contains everything inside of the element creating it (including floats).
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context?redirectlocale=en-US&redirectslug=Web%2FCSS%2FBlock_formatting_context
https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/
If you don't like using floats try with flexbox instead.
Ian
@toianw
@imemoje The icons are not collapsed without 'overflow: auto'. It's just (I'm guessing) they are white icons against a white background. Try setting a background-color on the .icon-bar a elements to confirm this. You can see the first one only because it has a background set on the .active class. Without changing the overflow property on the parent it has no height, so you don't get the background color you expected.
frederickalcantara
@frederickalcantara
I need some help with a jest test case
Bigyan Karki
@bigyankarki
hi everyone. can anyone help me change the color tab pills in bootstrap 4
default is blue. but i want to be same as background color.
Ken Haduch
@khaduch
@toianw - good articles :point_up: December 23, 2017 11:41 PM
@bigyankarki - sure - do you have a URL for your project?
Bigyan Karki
@bigyankarki
umm just hold on. i will copy the whole html code
```