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
imemoje
@imemoje
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
CamperBot
@camperbot
imemoje sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
imemoje
@imemoje
thank you @khaduch
CamperBot
@camperbot
: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
```
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bigyan Karki</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <div class="container">
    <a class="navbar-brand" href="#">BIGYAN KARKI</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav nav nav-pills ml-auto">
        <li class="nav-item">
          <a class="nav-link"  data-toggle="pill" href="#home">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#menu1">CV</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#menu2">PROJECTS</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#">CONTACT</a>
        </li>
      </ul>
    </div>
  </div>
  </nav>
  <br>

  <div class="tab-content">
    <div id="home" class="container tab-pane fade show active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>

</body>
</html>
Ken Haduch
@khaduch
if you just do a .nav-pills { background-color: red; } what happens? (As an example.)
Bigyan Karki
@bigyankarki
whole nav ul section turns red
Shubham Sharma
@shubham1604
Hey guys I need help on the random quotes quotesdesign api
Ken Haduch
@khaduch
@bigyankarki - so do you just want the active one to be a different color?
Bigyan Karki
@bigyankarki
umm @khaduch yes
currently active links are shown blue by default.
Shubham Sharma
@shubham1604
when I use http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1 , no cross domain issues occur but when i Use http://quotesondesign.com/wp-json/posts?filter[orderby]=rand cross domain issues occur. Whats the difference between the two
?
Ken Haduch
@khaduch
@bigyankarki - try .nav-link.active { background-color: red; }
nah, that didn't work...