SweetAlert - मॉडल चौड़ाई बदलें?

मैं इस पुस्तकालय से प्यार है। मैं इसे अपने वेब पृष्ठों में से एक पर एक मध्यम प्रतिक्रिया तालिका प्रदर्शित करने के लिए उपयोग करना चाहता हूं, लेकिन पाठ थोड़ा चौड़ा हो जाता है। मुझे उम्मीद थी कि मैं पेज SweetAlert भीतर तालिका प्रदर्शित कर रहा हूँ के लिए समग्र चेतावनी की चौड़ाई बदलने के लिए एक विकल्प था, लेकिन मैं किसी भी भाग्य होने नहीं कर रहा हूँ। तालिका & एचटीएमएल बहुत अच्छा लग रहा है, मोडल के लिए बहुत अधिक जानकारी।SweetAlert - मॉडल चौड़ाई बदलें?

मैं भी जहां चौड़ाई समग्र sweetalert.css में सेट है लगता है नहीं कर सकते।

मुझे लगा customClass configuation कुंजी मदद कर सकता है और मैंने कोशिश की:

swal({ 
     title: priorityLevel +' Issues for '+appName, 
     html: appHTML, 
     type: "info", 
     customClass: 'swal-wide', 
     showCancelButton: true, 
     showConfirmButton:false 
    });

सीएसएस सिर्फ एक सरल था:

.swal-wide{ 
    width:850px; 
}

यह कुछ भी नहीं किया। किसी को भी यह पता होना चाहिए कि यह कैसे करना है या शायद चौड़ाई तत्व के साथ खेला है?

धन्यवाद!

स्रोत

2015-12-29 Watercayman

सीएसएस में इस तरह !important डाल करने के लिए प्रयास करें:

.swal-wide{ 
    width:850px !important; 
}

यह टुकड़ा में काम कर देखें।

function TestSweetAlert(){ 
 
    swal({ 
 
     title: 1 +' Issues for test', 
 
     text: "A custom <span style='color:red;'>html</span> message.", 
 
     html: true, 
 
     type: "info", 
 
     customClass: 'swal-wide', 
 
     showCancelButton: true, 
 
     showConfirmButton:false 
 
    }); 
 
}; 
 

 
$('#testeSWAL').on("click",TestSweetAlert);

.swal-wide{ 
 
    width:850px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> 
 

 

 
<button id="testeSWAL"> Test SWAL </button>

नोट: हो सकता है आप स्थिति के साथ समस्याओं होगा।

स्रोत

2015-12-30 00:50:11

बहुत धन्यवाद @Joel रामोस Michaliszen। यह मेरे लिए काम नहीं करता था, लेकिन यह मुझे जवाब में मिला - SWAL का मेरा संस्करण 'वास्तविक' नहीं है - एलओएल sweetalert2 में वास्तव में कस्टमक्लास फ़ंक्शन नहीं है जो मुझे नहीं लगता है- तो यह नहीं होगा काम। मुझे लगता है कि हम असली SWAL के लिए हमारे प्रयासों में सही थे, इसलिए मैं जवाब को सही के रूप में चिह्नित करने जा रहा हूं। मुझे लगता है कि मैं टेबल के लिए सादे ओएल बूटस्ट्रैप मोडल्स का उपयोग करने जा रहा हूं क्योंकि वे थोड़ा बेहतर अनुकूल हैं। एक बार फिर धन्यवाद। – Watercayman

SweetAlert मोडल के लिए कक्षा का नाम मीठा चेतावनी है। इसलिए, जब आप इसकी चौड़ाई बदलना चाहते हैं, सही सीएसएस कोड है:

.sweet-alert { 
     width: 850px; 
}

यह डिफ़ॉल्ट .sweet-alert सीएसएस वर्ग को अधिलेखित करने के बजाय SweetAlert 1.1.3 के साथ काम कर रहा है

स्रोत

2016-03-09 19:38:11 Lurai

आप अपने खुद के

परिभाषित कर सकते हैं

.sweet-alert.sweetalert-lg { width: 600px; }

बस से sweetalert विकल्पों का उपयोग केवल वे सूचनाएं आप विस्तृत होना चाहता हूँ करने के लिए अपने वर्ग सेट करने के लिए:

swal({ 
    title: "test", 
    text: "Am I wide?", 
    customClass: 'sweetalert-lg' 
});

पी एस (अद्यतन): आप इसे ठीक तरह से केंद्र के लिए एक छोटे से sweetalert वर्ग को बदलने की जरूरत हो सकता है:

.sweet-alert { margin: auto; transform: translateX(-50%); }

Here is jsbin इसे बाहर

स्रोत

2016-07-25 11:59:14 Buksy

इस के साथ केवल समस्या ही मोडल केंद्रित है जिस तरह से ठीक से गणना नहीं की जाती है। –

इसे आसानी से ठीक किया जा सकता है, मेरा अपडेट देखें :) – Buksy

बेहतर उपयोग SweetAlert2 जो SweetAlert के एक उत्तराधिकारी है की कोशिश करना। बस जोड़ने "चौड़ाई" संपत्ति, जैसे:

swal({ 
    title: priorityLevel +' Issues for '+appName, 
    html: appHTML, 
    type: "info", 
    customClass: 'swal-wide', 
    showCancelButton: true, 
    showConfirmButton:false, 
    width: '850px' 
});

स्रोत

2017-01-29 13:25:43 infografnet

सीधे शब्दों में width उपयोग करते हैं, अर्थात:

swal({ 
    title: "Some Title", 
    html: "<b>Some Html</b>", 
    width: '800px' 
})

Sweet Alert2 Docs

स्रोत

2017-09-21 13:18:24

SweetAlert - मॉडल चौड़ाई बदलें?

उत्तर

संबंधित मुद्दे