NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Clearfix

import { Clearfix } from '@concur/nui-widgets';

The Clearfix component is used in conjunction with LayoutGrid, Row and Col components for page layout using the React Bootstrap grid system. It will clear both left and right floats.

Example

NOTE: The gray background and border colors used in the examples are for demonstration purposes only.

Below, the grid columns won’t clear correctly in a small viewport.

const dummySentences = ['Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 'Donec hendrerit tempor tellus.', 'Donec pretium posuere tellus.', 'Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.', 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.', 'Nulla posuere.', 'Donec vitae dolor.', 'Nullam tristique diam non turpis.', 'Cras placerat accumsan nulla.', 'Nullam rutrum.', 'Nam vestibulum accumsan nisl.'];

<LayoutGrid fluid fullyResponsive>
    <Row className='show-grid'>
        <Col md={3} sm={6}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br />{dummySentences.slice(0, 6).join(' ')}</Col>
        <Col md={3} sm={6}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br />{dummySentences.slice(0, 4).join(' ')}</Col>
        <Col md={3} sm={6}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br />{dummySentences.slice(0, 6).join(' ')}</Col>
        <Col md={3} sm={6}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br />{dummySentences.slice(0, 2).join(' ')}</Col>
    </Row>
</LayoutGrid>

Introduce Clearfix. Set to visible for the viewports with an issue so that columns clear correctly.

const dummySentences = ['Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 'Donec hendrerit tempor tellus.', 'Donec pretium posuere tellus.', 'Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.', 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.', 'Nulla posuere.', 'Donec vitae dolor.', 'Nullam tristique diam non turpis.', 'Cras placerat accumsan nulla.', 'Nullam rutrum.', 'Nam vestibulum accumsan nisl.'];

<LayoutGrid fluid fullyResponsive>
    <Row className='show-grid'>
        <Col md={3} sm={6}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br />{dummySentences.slice(0, 6).join(' ')}</Col>
        <Col md={3} sm={6}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br />{dummySentences.slice(0, 4).join(' ')}</Col>
        <Clearfix visibleSmBlock><code>&lt;{'Clearfix visibleSmBlock'} /&gt;</code></Clearfix>
        <Col md={3} sm={6}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br />{dummySentences.slice(0, 6).join(' ')}</Col>
        <Col md={3} sm={6}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br />{dummySentences.slice(0, 2).join(' ')}</Col>
    </Row>
</LayoutGrid>

Usage

Properties

Property Type Default Description
visibleLgBlock Boolean false Apply clearfix on large viewports.
visibleMdBlock Boolean false Apply clearfix on medium viewports.
visibleSmBlock Boolean false Apply clearfix on small viewports.
visibleXsBlock Boolean false Apply clearfix on extra small viewports.