Materialize.css column does not scale to full row height
I am using React.js, Materialize.css and some MaterialUI components together to build a website.
I created a header (React component, base div with a header and an exit button) for my site using the Materialize.css grid . "
Problem: I am using this react component in two different places. In place 1, the column height is the same as the column height. At location 2, the column height is half the row height.
Here's the code:
Reactive component that is the header
export class Header extends React.Component {
constructor(props) {
super(props)
}
render() {
let logoutBtn = <div className="col s2 offset-s2">
<FlatButton href="/logout/" backgroundColor="#ffffff" hoverColor="#d7d7d7" label="LOGOUT" />
</div>
if (this.props.hideLogoutButton) {
logoutBtn = null
}
return (
<nav className="top-nav">
<div className="row">
<div className="col s5 offset-s2">
<a className="page-title">{this.props.title}</a>
</div>
{logoutBtn}
</div>
</nav>
)
}
}
On-site use 1
class Main extends React.Component {
render() {
return (
<div>
<header>
<Header title="Inspection" />
<SideBar infolder={true}/>
</header>
<div className="content">
<InspectionSearchView />
</div>
</div>
)
}
}
Result in place 1 result1
On-site use 2
class Main extends React.Component {
render() {
return (
<div>
<header>
<Header title="Portfolio" />
<SideBar infolder={true}/>
</header>
<div className="content">
<PortfolioSearchView />
</div>
</div>
)
}
}
Result in place 2 result2
source to share
Usually cols do not use the full height of the surrounding lines. The navigator should set the height to 64px and the line-height to 64px.
By default, it works with your markup.
See https://codepen.io/anon/pen/PjKrgK
If not, there may be side effects from other components or your CSS. Then try the next solution using flexbox to set cols to the same height (equal height).
Because it is not by default: https://codepen.io/anon/pen/mwMZKr
You need to apply an equal height solution like flexbox: https://codepen.io/anon/pen/KqvjeR
.col {
align-items: stretch;
flex: 1
}
.row {
background:green;
display: flex;
}
But imho it looks like something else has side effects on your button. Try checking the button, col and string and see what affects them.
Without CSS code and just screenshots and normal HTML markup, it is a little difficult to determine the exact reason for this behavior.
source to share