Do not make the width of the button proportionnel to the width of the popup window

Question

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:

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.

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

Edit 1: I have made a sandbox: https://codesandbox.io/s/relaxed-feather-i6jz6?file=/src/App.js

Now, the problem is, if we Open In New Window and open https://i6jz6.csb.app/ in a new browser tab several times, we may see a little adjustment of the font of the text in the button. Does anyone know how to avoid that?

Add white-space:nowrap to the button..or am i missing something? Not 100% sure what it is you want to achieve. — Rmaxx, Jun 08 '20 at 17:03
You should also check the element with ms-button-label (span/div) and the button element itself.. if you want to force 1 line go with white-space, but if the window gets to small it will be partially visible.. — Rmaxx, Jun 08 '20 at 17:11
`min-width: 280px` does make sure the text does not wrap into 2 lines. But how could I NOT make the width of the button proportionnel to the width of the pop up window when the window is large? — SoftTimur, Jun 08 '20 at 17:17
Simply set width:280px to the button.The width will remain the same. — Rishab Tyagi, Jun 08 '20 at 17:20
you change the fontsize to vw instead of px or use white-space:nowrap — godfather, Jun 08 '20 at 17:22

score 1 · Answer 1 · answered Jun 11 '20 at 16:28

On button width:

In order to not have the width of the button grow proportionately with the container you can enforce the width: auto on the button. This way it will only be as wide as it needs to be to contain the text. Value auto is also better than having a fixed width, because it can automatically wrap the text if the popup becomes too narrow to display the text in one line (with fixed width your button would overflow instead - which looks really bad).

On font adjustments

For the font adjustments you experience - this is a very common thing on web and it even has its own name - FOUT (Flash of Unstyled Text). It happens when you use custom fonts on the page, because these are files like any other and so they take some time to download. Browsers prefer displaying the content as early as possible (even without custom fonts loaded) to displaying the perfect content (by waiting on all resources) with some speed penalty.

The only way (at least that I know) to completely avoid FOUT is to use system fonts instead of custom fonts (github does that for example).
If that's not an option, you can minimize the FOUT by caching the fonts on client machines for long times. This way they will experience the flash briefly on the first visit, but not on subsequent ones.
You can also try to minimize the FOUT by telling the browser to try to preload the font files that will be needed for the page (part of the reason why FOUT happens is that browser discovers the fonts very late) https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

score 0 · Answer 2 · answered Jun 08 '20 at 17:07

You don't want the button's text to wrap, so you'll need to change the font size, which you can do when you find that the button's height increases when the text wraps. I suggest that you create a invisible, but not 'display: none', possibly 'off-screen' version of the button so that the real button's font is changed after you know the right size is needed. Alternatively, what about an image or glyph instead of text, and a Title for the button text?

Rishab Tyagi · Accepted Answer · 2020-06-09T05:44:15.260

0

Set a fixed width to the button.Setting a fixed width will make it unproportional to the width of the pop-up window. width:280px;

Second Option: If you use min-width, the button width will decrease to a point.

Third Option: If you use max-width, the button width will increase upto a point.

Fourth Option: You can also use '@media' queries to customize the width according to size of the screen.

edited Jun 09 '20 at 05:44

answered Jun 08 '20 at 17:41

Rishab Tyagi

866
1
6
12

Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/215715/discussion-on-answer-by-rishab-tyagi-do-not-make-the-width-of-the-button-proport). – Samuel Liew Jun 11 '20 at 03:33

Do not make the width of the button proportionnel to the width of the popup window

3 Answers3

On button width:

On font adjustments