CODEWITHSUNDEEP
javascriptcsssemantic-uigrid-layout
Sean Barker
Sean Barker

Reputation: 351

how to extend height of semantic row to bottom of page

Im trying to create a grid using semantic-ui. Does anyone know how i can extend a row's height to reach the bottom of the page, and also to extend to a custom size for future reference? Here is what i have:

<div className = "ui container" >
    <div className = "stretched ui grid">

        <div className = "ten wide column float left  ">
            <div className = "">
                <FileUpload files = {this.state.files} fileChanged = {this.state.fileChanged} />
            </div>
        </div>

        <div className = " five wide column uploader float right" >
            <div className= "">
                <input type="file" id = "my-file"/> 
            </div>
        </div>  

    </div>

    <div className = "ui segment one column row" style={{height:'50%'}}>
        <CommentSection onCommentButtonClick = {this.handleCommentButtonClick}/>    
    </div>

</div>

the bit i want to change is the div with the className className = "ui segment one column row" style={{height:'50%'}}. Setting the height to 50% hasnt seemed to do anything at all

Upvotes: 1

Views: 515

Answers (2)

Vishesh_Malhotra
Vishesh_Malhotra

Reputation: 63

You can use FlexBox.

<div className = "ui container" style={{flex: 1}} >
    <div className = "stretched ui grid" style={{flex: 1}}>

        <div className = "ten wide column float left  ">
            <div className = "">
                <FileUpload files = {this.state.files} fileChanged = {this.state.fileChanged} />
            </div>
        </div>

        <div className = " five wide column uploader float right" >
            <div className= "">
                <input type="file" id = "my-file"/> 
            </div>
        </div>  

    </div>

    <div className = "ui segment one column row" style={{flex: 1}}}>
        <CommentSection onCommentButtonClick = {this.handleCommentButtonClick}/>    
    </div>

</div>

Upvotes: 1

raj chakravarthy
raj chakravarthy

Reputation: 65

The problem is specifying height in %, Semantic UI expects syntax in following format:

<div style={{height: spacing  'em'}}

So, try:

<div className = "ui segment one column row" style={{height: 50}}>

Note: semantic ui customized styles in 'em' so by default height property is 50 em in this example.

Upvotes: 1

Related Questions