Sweetalert: always show the input field even if only use swal('ok');

Created on 17 Feb 2016  路  11Comments  路  Source: t4t5/sweetalert

How can I disable the input field?

Most helpful comment

i temporarily fixed it by doing in css: .

.sweet-alert fieldset input[type="text"] {
display: none;
}

It is maybe not the best solution but at least i dont see the input field now.

All 11 comments

I have this problem too

i temporarily fixed it by doing in css: .

.sweet-alert fieldset input[type="text"] {
display: none;
}

It is maybe not the best solution but at least i dont see the input field now.

I also have this problem - looks like jquery mobile CSS makes it visible somehow.

It add a div around the fieldset input and also add some classes to the input element:

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c"> <input type="text" tabindex="3" placeholder="" class="ui-input-text ui-body-c"> </div>

NB: Using Jquery.mobile 1.3.2

The fix from flipveschool do not work for me as it does not remove the div with borders.

Looks like it is the addition of the class ui-input-text that makes it visible

The temporary fix for me is just to call

$(".sweet-alert" ).remove();

before I show the dialog!

I am also facing this thing, dont know from where its getting added. In my case below code is getting added.

<div class="form-group">
      <input type="text" tabindex="3" class="form-control" placeholder="">
      <span class="sa-input-error help-block">
        <span class="glyphicon glyphicon-exclamation-sign"></span> <span class="sa-help-text">Not valid</span>
      </span>
</div>

If you look on sweetalert's site and inspect their confirmation messages that dont have the input displaying, you will see that the input actually still is there in the code, there is just default CSS from sweetalert that hides it. Then, if you inspect the code on your own site, you likely have CSS that is overriding it with a "display: block;". That was the problem in my case.

This is fixed in SweetAlert 2.0 since it build every modal from scratch instead of showing/hiding different elements. You have to use content: "input" though. Make sure you read the upgrade guide to see all the new changes!

is there a property or method in sweetalert to prefill text in input.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ramysa picture ramysa  路  10Comments

amiceli picture amiceli  路  19Comments

kentmw picture kentmw  路  15Comments

adhip94 picture adhip94  路  8Comments

atulintel picture atulintel  路  21Comments