lundi 20 avril 2015

How to reset grid paging content on resolution change?

I have used a grid template from BootStrap and the paging for that grid is showing as per the attached image 1. Now when i change the screen resolution of the browser the paging content gets break into two lines as per attached image 2 instead of in a single line.

But once i refresh the page it loads the paging correctly as the image 3. But i want that content right after changing of resolution.

Below is the code of JS by using React for that paging class var ul = React.DOM.ul({className: 'pagination pagination-sm', role: 'menubar', 'aria-label': globalizationFactory.translate('STORMS_PAGER'), key: 'pager_container'}, [firstLi, prevLi, this.getPages(currentPageIndex + 1, totalPages), nextLi, lastLi]);

        var mainClass = this.props.className ? 'container-fluid ' + this.props.className : 'container-fluid';
        return React.DOM.div({className: mainClass,key: 'pager_wrapper'},
          React.DOM.div({className: 'row',key: 'pager_wrapper_inner'},
            React.DOM.div({className: 'col-sm-12', style: {textAlign: 'center'},key: 'pager_innerWrapper'}, ul)));

Any suggestion will be helpful.

Image 1: enter image description here Image 2:

enter image description here

Image 3:

enter image description here

Aucun commentaire:

Enregistrer un commentaire