CODEWITHSUNDEEP
javascriptjquery
wilsonchina
wilsonchina

Reputation: 21

failed to set width in jquery-confirm?

I am trying to use jquery-confirm. Please see the code and the result following. The result doesn't same with we saw on website. anything wrong?

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
     <script src="../js/jquery-3.2.1.min.js"></script>
     <link rel="stylesheet" href="../jquery-confirm-master/dist/jquery-confirm.min.css">
<script src="../jquery-confirm-master/dist/jquery-confirm.min.js"></script>
 </head>
 <body>
 <script>
    $.alert({
    width :'auto',
    title: 'Alert!',
    content: 'Simple alert!'
});
</script>
 </body>
</html>

the picture after running the code

Upvotes: 2

Views: 5885

Answers (3)

Petter Ivarsson
Petter Ivarsson

Reputation: 703

I disabled bootstrap and used pixels for width

boxWidth: '30%',
useBootstrap: false,

Upvotes: 3

Hanif
Hanif

Reputation: 3795

It is working fine but not displaying as expected because you need disable bootstrap theme, see following code:

<script>
    $.alert({
        width :'auto',
        title: 'Alert!',
        content: 'Simple alert!',
        useBootstrap: false // Key line
    });
</script>

But if you want to use bootstrap theme you should include following CDN links in your document.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.js"></script>

Upvotes: 5

Nabeel
Nabeel

Reputation: 31

Seems like you need to add the following, or just try to add bootstrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.js"></script>

Upvotes: 0

Related Questions