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
Diego Mayer
@Chrono79

https://codepen.io/anon/pen/qVGprK

I want all the buttons to have the same height and one button has a <br / > so the two words show in two lines

A-J Roos
@Asjas
I'm checking the html you are returning. I am applying a background to my project and it's not causing that same problem
A-J Roos
@Asjas
@Chrono79 You can set your css as follows
.btn-group {
  display: flex;
}
It grows the size of all elements to the size of the largest
Diego Mayer
@Chrono79
@Asjas exactly what I was looking for, thanks @Asjas
CamperBot
@camperbot
chrono79 sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @asjas |http://www.freecodecamp.org/asjas
Dan Lafferty
@DanLaff

@Chrono79 Another option if you're supporting older browsers:

.btn-group .btn {
  height: 4em;
  line-height: 100%;
}

Or use javascript as mentioned here: https://stackoverflow.com/a/33045465
One note - do not use the <br> tag for creating a new line. Use the <p> element.

Diego Mayer
@Chrono79
Dunno why, but in the site I'm working that button is seen lower than the rest, thanks @itsLaff too
They all have the same height tho
CamperBot
@camperbot
chrono79 sends brownie points to @itslaff :sparkles: :thumbsup: :sparkles:
api offline
Kris Baillargeon
@krisb1220
@Chrono79 have you cleared all default padding and margins?
* { 
   padding: 0;
   margin: 0;
}
Browsers, HTML, and CSS all have default sizes that tend to mess up your layout if you don't clear them in your CSS as the very first statement
A-J Roos
@Asjas
@krisb1220 Bootstrap ships with normalize.css
Kris Baillargeon
@krisb1220
Oh really? Hmm, I was just speaking off of personal experience :P No wonder I got hit with 5x issues when I stopped relying on frameworks LOL
A-J Roos
@Asjas
I just use normalize from the website in my own projects. I'm not relying on frameworks the last 2 months but a reset css helps a lot
Kris Baillargeon
@krisb1220
Sounds like a good strategy actually :D Thanks @Asjas
CamperBot
@camperbot
krisb1220 sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @asjas |http://www.freecodecamp.org/asjas
Kris Baillargeon
@krisb1220
@Chrono79 Another way to debug your layout is with the chrome devtools pointer tool. it's indispensable to me when building responsive UIs
A-J Roos
@Asjas
pleasure. bootstrap also allows you to use _reboot.scss which is the bootstrap 4 version which you can ship solo in your project
Kris Baillargeon
@krisb1220
image.png
If you click the pointer icon that's orange on the top left it will allow you to peak through your layout and/or your layout's code with your mouse
CamperBot
@camperbot
neeldvirus sends brownie points to @otto-aa and @sjames1958gm and @thmsdnnr :sparkles: :thumbsup: :sparkles:
Jake
@JakeDVirus
@Otto-AA @sjames1958gm @thmsdnnr Thanks a lot guys for assisting me. i finally can see the plot here with all implicit operations. so i hardcoded the function1 property of scrollingby replacing this with scrolling.
i presume i did not leave any loose ends here
CamperBot
@camperbot
:cookie: 403 | @otto-aa |http://www.freecodecamp.org/otto-aa
:star2: 8755 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Kris Baillargeon
@krisb1220
its like the equivalent of quickly adding and removing borders and backgrounds to visualize your elements. very quick and handy
CamperBot
@camperbot
:cookie: 423 | @thmsdnnr |http://www.freecodecamp.org/thmsdnnr
Diego Mayer
@Chrono79
@krisb1220 Thanks Kris, computed styles are almost the same (the width differs, but I don't mind)
CamperBot
@camperbot
chrono79 sends brownie points to @krisb1220 :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @krisb1220 |http://www.freecodecamp.org/krisb1220
Diego Mayer
@Chrono79
I think I'm going to take the abbreviate one of the words approach for now
amare16
@amare16
I am trying to know how search input is working ajax with php with database .. so someone has a skill please help me
Kris Baillargeon
@krisb1220
@amare16 I answered your question in /FreeCodeCamp
iso
@iso1048
@sjames1958gm @ashwins93 thanks guys
CamperBot
@camperbot
gothamknight sends brownie points to @sjames1958gm and @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 417 | @ashwins93 |http://www.freecodecamp.org/ashwins93
:star2: 8756 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
krj1
@krj1
I am making a program for a school project and need some help. the point of the program is to run the function t = ln( p / a ) / r which is a form of the A = pe^rt equation the only difference is I am suppose to round at every step. This is superposed to act like a person repetitively multiplying by r witch would be a decimal and this is the code I have so far
html
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<meta charset=utf-8 />
<title>MnM calculator</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <form>
    <h1>enter information</h1>
    <input id="title" type="text" placeholder="number of MnM" />
    <input id="name" type="text" placeholder="Number of MnM eaten" />

    <input type="button" value="save and run" onclick="insert()" />
  </form>
  <div id="display"></div>




</body>
</html>
and JavaScript


var titles  = [];
var names   = [];
var answer = titles[0];
answer = answer.toString();

var titleInput  = document.getElementById("title");
var nameInput   = document.getElementById("name");


var messageBox  = document.getElementById("display");

function insert ( ) {
 titles.push( titleInput.value );
 names.push( nameInput.value );


 clearAndShow();
}

function clearAndShow () {
  // Clear our fields
  titleInput.value = "";
  nameInput.value = "";


  // Show our output
  messageBox.innerHTML = "";

  messageBox.innerHTML += "Titles: " + titles.join(", ") + "<br/>";
  messageBox.innerHTML += "Names: " + names.join(", ") + "<br/>";
  messageBox.innerHTML += "Names: " + answer.join(", ") + "<br/>";


} 

/*
 var per = names.value() / 100;
 var total; 
 var i = 0;

 while (i < 4) {
  total = num * per;
  num = num - total;
 num = Math.round(num) ;

    i++;

}
 var answer = i.toString();
*/
Chi
@chiyc
@krj1 You haven't asked us a question. What do you want us to help you with?
Amit Patel
@AmitP88

hey guys, how do I use Modal.setAppElement(appElement); with react-modal? I'm getting an error in console that says:

browser.js?1af0:49 Warning: react-modal: App element is not defined. Please use Modal.setAppElement(el) or set appElement={el}. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting ariaHideApp={false}.

I've looked at the github docs here: https://github.com/reactjs/react-modal

but I couldn't find where they implemented it in the example code.

krj1
@krj1
i don't understand how to store and edit data with JavaScript when the data is provided by html. to that extent i don't know how to re show the data after i have ran my function
Amit Patel
@AmitP88
modal.png
Chi
@chiyc

@AmitP88 Here's some documentation that can help you. https://reactcommunity.org/react-modal/examples/set_app_element.html

You need to call Modal.setAppElement() outside of the class declaration. The argument you pass it can be HTML query selector

Chi
@chiyc
@krj1 You start off by selecting the DOM node you want to get data from or push data to. You can use this using the standard browser API or jQuery. Then, there are additional methods to either retrieve or replace the HTML inside your selected nodes