-1

i am facing issue with the setting style for html div attribute in reactjs without jsx.

I am calculating height for the div from calculateAvailableHeight() so that div content is managed with overflow:auto. but unfortunately I cannot set style for div tag.

versions:

"react": "^16.6.3",

"react-bootstrap": "^0.32.4",

"react-dom": "^16.6.3",

Here is reactjs code for react component

import React,{Component} from "react";
import {Row,Col,Tab,Nav,NavItem} from 'react-bootstrap';
import {calculateAvailableHeight} from './../../lib/uiComponentLib

var heightList = calculateAvailableHeight(50);
var ccUserStyle = {

    height : heightList ,
    overflow:"auto !important",

};

output for heightList : 568px !important

class UserList extends Component{



render(){

    console.log("Reaching inside ", heightList );

    return (

    <div style={ccUserStyle}>
    <Tab.Container   id="sidebarTabContainer" defaultActiveKey="first" >
        <Row className="clearfix">
            <Col sm={12} className="cc-no-padding">
                <Nav bsStyle="pills" justified>
                    <NavItem eventKey="first">User</NavItem>
                    <NavItem eventKey="second">Group</NavItem>
                </Nav>
            </Col>
            <Col sm={12} className="cc-no-padding" style = height= {heightList} >
            <Tab.Content animation>
                <Tab.Pane eventKey="first">

                Userlist
                </Tab.Pane>

                <Tab.Pane eventKey="second">Group list</Tab.Pane>
            </Tab.Content>
            </Col>
        </Row>  
    </Tab.Container>
    </div>


  );
 }  
}

I am using ccUserStyle object to set div style. But after rendering the component i don't see any style attribute for div tag.

Please suggest and help me to rectify this issue.

Thanks in advance.

Kshitiz shakya
  • 25
  • 1
  • 5
  • Please review your post, fixing the typos and ensuring that the code is an accurate reflection of your real code (the above has at least one significant syntax error, which you can see from the code highlighting, that you probably introduced while copying it to your question, but we cant know that for sure). Please also ensure the code is marked up correctly (note the `}` outside the code block). – T.J. Crowder Dec 06 '18 at 13:37

2 Answers2

0

ccUserStyle is already an object, but this:

<div style={{ccUserStyle}}>

...wraps it in another object (using shorthand property notation), so the style properties don't get found as they're on style.ccUserStyle.height instead of style.height.

Just remove one layer of {}:

<div style={ccUserStyle}>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
0

Thanks @TJCrowder for the lead, but I resolved the issue by removing "px !important" string from "568px !important".

As react16 are really strict and it avoids any kind of datatype error.

So only Number be initialize with height HttpAttribute JSX in CSSProperties.

this issue is related to only for react16 versions for inline styling.

Please let me know, if you find any other solution for the same.

Kshitiz shakya
  • 25
  • 1
  • 5