In a specific scenario, I need to display a button on the right corner of the header. The selected filter value should appear next to the filter button like this: | Between 01/23/2018 and 07/30/2018 {button}|
As the user changes the screen size, I want to add ellipsis to the text while keeping the button visible. Like so: |Between 01/23/2018 and 07/3... {button}|
Despite trying the following CSS code, I haven't been able to achieve the desired result:
:local{
.smallIcon {
height: 1em;
width: 1em;
}
.textOverflow {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
}
The actual code is as follows:
import Header from 'terra-clinical-header';
import styles from './style.scss';
import Text from 'terra-text';
import Button from 'terra-button';
import IconFunnel from 'terra-icon/lib/icon/IconFunnel';
const newHeader = (props) => {
const filterText = "Between 01/23/2018 and 07/30/2018,"
return (
<Header
isSubheader
title={<Text className={styles.textOverflow} color="black" fontSize={12} weight={400}>{filterText}</Text>}
endContent={
<Button
isIconOnly
icon={<IconFunnel className={styles.smallIcon} />}
variant="action"
type="button"
/>
}
/>);
}
While the above style does show the ellipsis, it doesn't align the text properly.