0

In JavaScript, I would like for an alert message to appear in one line(changing the size of the alert box rather than breaking the message into multiple lines). Is there a way to do this?

This is the alert message that I'm getting right now. The contents of the message are fine. But after "Stream Definition:", which will be displayed in one line, I would like to know if there's any possible way to display the rest of the message which is the actual stream definition all in one line?

Current alert message

Nayantara Jeyaraj
  • 2,624
  • 7
  • 34
  • 63

2 Answers2

1

You cant change the styling of the alert box by pure css becuse it is a system object as mentioned before.

I've got a few links you can check out for custom alert boxes:

Stylish JavaScript Dialog (Alert, Confirm, Prompt) Boxes
Sweet alert <-- I prefer and use this one myself. It is really simple and looks really nice in my opinion.
boot box <-- has been mentioned before, it is quite nice but a little more advanced and more code
a tutorial by Adam Khoury <-- I don't know if you know this guy, but he is amazing in explaining coding stuff. He has a tutorial about Custom Alert Box Programming Tutorial

Hope this helps you out a bit. Goodluck, and if there is anything you need help with. Commnt and i'll try my best to help you out.

EDIT:

You need to download the project
then load in the files:
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

and THEN call the popup

swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", closeOnConfirm: false }, function(){ swal("Deleted!", "Your imaginary file has been deleted.", "success"); });

Angel ofDemons
  • 1,267
  • 8
  • 13
  • Absolutely love the Sweet alerts. Thanks for sharing this link. – Nayantara Jeyaraj Jun 22 '16 at 08:50
  • Hi, I tried using the sweet alert in one of my functions, but am not sure if I've place the code segments in the correct positions. If I have a function with if-else conditions and under each condition if I need -> "A warning message, with a function attached to the "Confirm"-button..." from sweet alert site to show up where and how exactly am I to paste the code given in the site? – Nayantara Jeyaraj Jun 22 '16 at 09:00
  • Sorry for the late reply I wasn't at my computer. Can you explain what wont work? @NayantaraWilfred – Angel ofDemons Jun 22 '16 at 09:50
  • I placed the entire code -> calling the pop-up, within the if condition parts in my JavaScript function and it didn't work & I was wondering if I had to put it else where. But thanks for the above. I'll refer to it and let you know – Nayantara Jeyaraj Jun 22 '16 at 10:09
  • I don't exactly get any error, but nothing shows up – Nayantara Jeyaraj Jun 22 '16 at 10:16
  • sure, how about I upload the project onto github? just a sec – Nayantara Jeyaraj Jun 22 '16 at 10:17
  • Sure @NayantaraWilfred – Angel ofDemons Jun 22 '16 at 10:18
  • https://github.com/NayantaraJeyaraj/Streams -> In my main.js, under the showStreamDefLine() function, Instead of the simple alerts that I've used, I'd like to use the sweet alert type that I mentioned earlier. I have not reset all the paths on my github version so it might not run but just wanted to share the codes with you – Nayantara Jeyaraj Jun 22 '16 at 10:24
  • Did you download the files and included them? Because they are not _there_ in the streams folder _or_ loaded inthe index.html. This could be me being blind, but are they correctly included? And _when_ does the `showStreamDefLine` function fire? So I can test it out – Angel ofDemons Jun 22 '16 at 10:28
  • If I downloaded the files. Put them in a folder. loaded them correctly and tried `` at the bottom of the `index.html` it showed the alert properly. But inside the function not because it isn't loaded / the streamSelect isnt shown. @NayantaraWilfred – Angel ofDemons Jun 22 '16 at 10:40
  • 1
    Sorry, but at the beginning I did unzip the neccessary files and i linked them in the head section of my index.html file under scripts. But I deleted it later when I saw that it wasn't working. And btw, the showStreamDefLine function is called to action via an onchange() function on the drop down. I just found a step by step guide to getting swal working. I'll try it and let you know. Thanks again. – Nayantara Jeyaraj Jun 22 '16 at 10:55
0

The alert box is a system object. You can't modify its style. (Not easily I guess). If you want a customisable alert, have a look at bootbox: http://bootboxjs.com/

DavidPi
  • 21
  • 3