How to change the width of UIkit.notification?

Question

On the getuikit web library, how can I change the width of the notification?

UIkit.notification({message: 'Primary message...', status: 'primary'})

Answer 1

There is no programmatic way as far as I know, but you can use CSS to make the notification wider. Depending on the alignment of the notification, you will also need to adjust positioning to reflect new width (here notification is 600px, margin-left is half of it, so -300px)

UIkit.notification({message: 'Primary message ...', status: 'primary', timeout: 60000});

UIkit.notification({message: 'Another short ...', status: 'primary', timeout: 60000});

UIkit.notification({message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'primary', timeout: 60000});

.uk-notification {
  width: 100%!important;
  display: flex!important;
  flex-direction: column;
}
.uk-notification-message {
  padding-right: 2em!important;
  width: auto!important;
  max-width: 70%!important;
  text-align: left;
  display: inline-flex;
}
.uk-notification-top-center,
.uk-notification-top-left,
.uk-notification-top-right {
  margin: 0!important;
  left: unset!important;
  text-align: center;
}
.uk-notification-top-center > .uk-notification-message {
  margin: 10px auto 0;
}
.uk-notification-top-left > .uk-notification-message {
  margin: 10px auto 0 10px;
}
.uk-notification-top-right > .uk-notification-message {
  margin: 10px 10px 0 auto;
}

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit-icons.min.js"></script>



<p uk-margin>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Right align ...', status: 'primary', timeout: 60000, pos: 'top-right'})">Right text</button>
    
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Left align ...', status: 'primary', timeout: 60000, pos: 'top-left'})">Left text</button>

    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'primary', timeout: 60000})">Long text</button>
</p>