CODEWITHSUNDEEP
htmlcssreactjsellipsis
Sharath M.H
Sharath M.H

Reputation: 83

align a text to right with ellipsis and button (react-js)

I have a scenario, where on the header I have to display a button on the header right corner. The selected filter value should display next to the filter button as shown below. | Between 01/23/2018 and 07/30/2018 {button}|

when the user changes the screen size, I need to add the ellipsis to text and the button should be displayed as is. |Between 01/23/2018 and 07/3... {button}|

I am not able to achieve this with the following css:

:local{
  .smallIcon {
    height: 1em;
    width: 1em;
  }
  .textOverflow {
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
}

The code is as below:

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"
            />
          }
        />);
}

With the above style, I am able to get ellipsis, but the text will display left side.

Upvotes: 2

Views: 2272

Answers (1)

Girisha C
Girisha C

Reputation: 1950

Set max-width to your .textOverflow class, that will fix your issue :)

.textOverflow { max-width: 260px }

Upvotes: 3

Related Questions