Ggtcf

Is there a good way to store credentials outside of a password manager?

Curses work by shouting - How to avoid collateral damage?

Failed to fetch jessie backports repository

Is expanding the research of a group into machine learning as a PhD student risky?

Where in the Bible does the greeting ("Dominus Vobiscum") used at Mass come from?

Do I need a multiple entry visa for a trip UK -> Sweden -> UK?

How to verify if g is a generator for p?

Is there any reason not to eat food that's been dropped on the surface of the moon?

Can I Retrieve Email Addresses from BCC?

Is a roofing delivery truck likely to crack my driveway slab?

Print name if parameter passed to function

Why does John Bercow say “unlock” after reading out the results of a vote?

Student evaluations of teaching assistants

What to do with wrong results in talks?

Ways to speed up user implemented RK4

apt-get update is failing in debian

What is the opposite of 'gravitas'?

Is it okay / does it make sense for another player to join a running game of Munchkin?

Is HostGator storing my password in plaintext?

Was Spock the First Vulcan in Starfleet?

Hostile work environment after whistle-blowing on coworker and our boss. What do I do?

Products and sum of cubes in Fibonacci

Coordinate position not precise

Valid Badminton Score?

Wrong height value in componentDidMount()

Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?Set a default parameter value for a JavaScript functionHow can I get query string values in JavaScript?Get selected value in dropdown list using JavaScript?Sort array of objects by string property valueDetermine whether an array contains a valueCopy array by valueWhy I can't get element by ref in ReactEvent not firing on a newly created window with ReactjsReactjs Object.keys() in ComponentDidMount wont update local State

0

These three console.log() from here:

import React from 'react';

export default class FixedTopNavigation extends React.Component 
 constructor(props) 
 super(props);
 this.topNav = React.createRef();
 
 componentDidMount() 
 console.log(this.topNav.current.offsetHeight);
 console.log(this.topNav.current.clientHeight);
 console.log(this.topNav.current.scrollHeight);
 
 render() 
 return (
 <nav ref=this.topNav id="topNav" className="fixed-top navbar navbar-expand-md navbar-light bg-light">
 <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#sideNav" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
 <span className="navbar-toggler-icon"></span>
 </button>
 <a className="navbar-brand" href="/">Biometrics</a>
 </nav>

 )
 

all returns 18 instead of 45.13 (or at least one of them, and it is the rendered height of the nav bar when looked in the dev console)

If the componentDidMount() does not return the right value, then what would be the way to properly get the right one?

Most answers/tutorial more or less use the same way (except with the way the ref is created), tha's why I don't understand why this code does not work.

javascript reactjs

share|improve this question

asked Mar 8 at 9:40

Carl BinallaCarl Binalla

4,23042040

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you give getBoundingClientRect a try from here, also can you also share the css as without those its hard to verify
  
  – warl0ck
  Mar 8 at 9:51
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @warl0ck those classes are from Bootstrap
  
  – Carl Binalla
  Mar 8 at 10:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried the same code I am getting height as 56, which is the actual final height and I have used the bootstrap lib as you said fro react check this codesandbox snippet
  
  – warl0ck
  Mar 8 at 10:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @warl0ck it seems that the 18 is the height of the <nav> when there is no style, I noticed this after removing the import of Bootstrap. And also copied your code, and still the same result
  
  – Carl Binalla
  Mar 11 at 3:03
  
  

  
  
  
  

add a comment | 

0

These three console.log() from here:

import React from 'react';

export default class FixedTopNavigation extends React.Component 
 constructor(props) 
 super(props);
 this.topNav = React.createRef();
 
 componentDidMount() 
 console.log(this.topNav.current.offsetHeight);
 console.log(this.topNav.current.clientHeight);
 console.log(this.topNav.current.scrollHeight);
 
 render() 
 return (
 <nav ref=this.topNav id="topNav" className="fixed-top navbar navbar-expand-md navbar-light bg-light">
 <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#sideNav" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
 <span className="navbar-toggler-icon"></span>
 </button>
 <a className="navbar-brand" href="/">Biometrics</a>
 </nav>

 )
 

all returns 18 instead of 45.13 (or at least one of them, and it is the rendered height of the nav bar when looked in the dev console)

If the componentDidMount() does not return the right value, then what would be the way to properly get the right one?

Most answers/tutorial more or less use the same way (except with the way the ref is created), tha's why I don't understand why this code does not work.

javascript reactjs

share|improve this question

asked Mar 8 at 9:40

Carl BinallaCarl Binalla

4,23042040

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you give getBoundingClientRect a try from here, also can you also share the css as without those its hard to verify
  
  – warl0ck
  Mar 8 at 9:51
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @warl0ck those classes are from Bootstrap
  
  – Carl Binalla
  Mar 8 at 10:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried the same code I am getting height as 56, which is the actual final height and I have used the bootstrap lib as you said fro react check this codesandbox snippet
  
  – warl0ck
  Mar 8 at 10:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @warl0ck it seems that the 18 is the height of the <nav> when there is no style, I noticed this after removing the import of Bootstrap. And also copied your code, and still the same result
  
  – Carl Binalla
  Mar 11 at 3:03
  
  

  
  
  
  

add a comment | 

These three console.log() from here:

import React from 'react';

export default class FixedTopNavigation extends React.Component 
 constructor(props) 
 super(props);
 this.topNav = React.createRef();
 
 componentDidMount() 
 console.log(this.topNav.current.offsetHeight);
 console.log(this.topNav.current.clientHeight);
 console.log(this.topNav.current.scrollHeight);
 
 render() 
 return (
 <nav ref=this.topNav id="topNav" className="fixed-top navbar navbar-expand-md navbar-light bg-light">
 <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#sideNav" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
 <span className="navbar-toggler-icon"></span>
 </button>
 <a className="navbar-brand" href="/">Biometrics</a>
 </nav>

 )
 

all returns 18 instead of 45.13 (or at least one of them, and it is the rendered height of the nav bar when looked in the dev console)

If the componentDidMount() does not return the right value, then what would be the way to properly get the right one?

Most answers/tutorial more or less use the same way (except with the way the ref is created), tha's why I don't understand why this code does not work.

javascript reactjs

share|improve this question

asked Mar 8 at 9:40

Carl BinallaCarl Binalla

4,23042040

import React from 'react';

export default class FixedTopNavigation extends React.Component 
 constructor(props) 
 super(props);
 this.topNav = React.createRef();
 
 componentDidMount() 
 console.log(this.topNav.current.offsetHeight);
 console.log(this.topNav.current.clientHeight);
 console.log(this.topNav.current.scrollHeight);
 
 render() 
 return (
 <nav ref=this.topNav id="topNav" className="fixed-top navbar navbar-expand-md navbar-light bg-light">
 <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#sideNav" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
 <span className="navbar-toggler-icon"></span>
 </button>
 <a className="navbar-brand" href="/">Biometrics</a>
 </nav>

 )
 

share|improve this question

asked Mar 8 at 9:40

Carl BinallaCarl Binalla

4,23042040

share|improve this question

asked Mar 8 at 9:40

Carl BinallaCarl Binalla

4,23042040

asked Mar 8 at 9:40

Carl BinallaCarl Binalla

4,23042040

asked Mar 8 at 9:40

Carl BinallaCarl Binalla

4,23042040

1 Answer
1

active

oldest

votes

0

Two ways you can possibly achieve this.

With a setTimeout() hack

componentDidMount() 
 setTimeout(() => 
 console.log(this.topNav.current.clientHeight);
 , 1);

With findDOMNode()

componentDidMount() 
 let compRef = ReactDOM.findDOMNode(this.topNav);
 console.log(this.compRef.clientHeight);

share|improve this answer

answered Mar 8 at 9:57

rrdrrd

3,13031725

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The first code returns 16. What import should I use for the second code?
  
  – Carl Binalla
  Mar 8 at 10:09
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55060433%2fwrong-height-value-in-componentdidmount%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Two ways you can possibly achieve this.

With a setTimeout() hack

componentDidMount() 
 setTimeout(() => 
 console.log(this.topNav.current.clientHeight);
 , 1);

With findDOMNode()

componentDidMount() 
 let compRef = ReactDOM.findDOMNode(this.topNav);
 console.log(this.compRef.clientHeight);

share|improve this answer

answered Mar 8 at 9:57

rrdrrd

3,13031725

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The first code returns 16. What import should I use for the second code?
  
  – Carl Binalla
  Mar 8 at 10:09
  

  
  
  
  

add a comment | 

0

Two ways you can possibly achieve this.

With a setTimeout() hack

componentDidMount() 
 setTimeout(() => 
 console.log(this.topNav.current.clientHeight);
 , 1);

With findDOMNode()

componentDidMount() 
 let compRef = ReactDOM.findDOMNode(this.topNav);
 console.log(this.compRef.clientHeight);

share|improve this answer

answered Mar 8 at 9:57

rrdrrd

3,13031725

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The first code returns 16. What import should I use for the second code?
  
  – Carl Binalla
  Mar 8 at 10:09
  

  
  
  
  

add a comment | 

Two ways you can possibly achieve this.

With a setTimeout() hack

componentDidMount() 
 setTimeout(() => 
 console.log(this.topNav.current.clientHeight);
 , 1);

With findDOMNode()

componentDidMount() 
 let compRef = ReactDOM.findDOMNode(this.topNav);
 console.log(this.compRef.clientHeight);

share|improve this answer

answered Mar 8 at 9:57

rrdrrd

3,13031725

componentDidMount() 
 setTimeout(() => 
 console.log(this.topNav.current.clientHeight);
 , 1);

componentDidMount() 
 let compRef = ReactDOM.findDOMNode(this.topNav);
 console.log(this.compRef.clientHeight);

share|improve this answer

answered Mar 8 at 9:57

rrdrrd

3,13031725

answered Mar 8 at 9:57

rrdrrd

3,13031725

answered Mar 8 at 9:57

rrdrrd

3,13031725