#StackBounty: #css #office-ui-fabric #office-ui-fabric-react Do not make the width of the button proportionnel to the width of the popu…

Bounty: 150

I want to make a button in a popup window as Script Lab as follows. Note that, in Script Lab, the width of the button is enough to hold the sentence in one line, even though the popup window is not very wide:

enter image description here

I almost use the same code as ScriptLab:

import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
... ...

    return (
      <div style={{ height: '100vh', display: 'flex', flexDirection: 'column'}}>
        <PrimaryButton
          style={{ margin: 'auto' }}
          text="Open link in new window"
          // tslint:disable-next-line: jsx-no-lambda
          onClick={() => {
            window.open(this.props.url);
          }}
        />
      </div>
    );

Here is my result, where the width of the button is proportionnel to the width of the popup window. As a consequence, the sentence needs to be displayed in 2 rows, which is not what I want.

enter image description here

Does anyone know how to amend the code to get the effect like Script Lab?


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.