I'm trying to replace the sweetalert control with the new sweetalert2 but I've run into some doubts. Among them, I was able to change the width of the popup but not the height. It seems that the "height" property does not take effect.
const { value: causas } = Swal.fire({
title: "Titulo",
text: "Este es el mensaje!",
input: 'select',
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirmar!",
confirmButtonColor: "#DD6B55",
icon: 'warning',
cancelButtonText: "Cancelar!",
closeOnConfirm: true,
closeOnCancel: true,
width: 800,
height: 800,
inputOptions: {
'Causas': {
cause1: 'c1',
cause2: 'c2',
cause3: 'c3',
cause4: 'c4'
}
},
inputPlaceholder: 'Seleccione el item',
showCancelButton: true,
inputValidator: (value) => {
return new Promise((resolve) => {
//if (value === 'oranges') {
// resolve()
//} else {
// resolve('You need to select oranges :)')
//}
})
}
})
if (fruit) {
Swal.fire(`You selected: ${fruit}`)
}
I also want to change the font size but I haven't found how to do it. Maybe I should generate/create a css file? Can you help me? Thank you!!
I just fixed it! I added the properties in the css file.
.swal2-popup {
font-size: 14px !important;
}
.swal2-styled {
padding: 10px 32px 10px 32px !important;
margin: 20px 10px 0px 10px !important;
width: 170px;
height: 45px;
}
Related
The InActive button in the top of the picture, gets displayed properly when it is outside the datatable but doesn't work inside the datatable.
I have added the same code for status column inside the datatable but it displays only a checkbox. How do I get the InActive button inside datatable?
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
fill_datatable();
function fill_datatable(collegeID = '') {
var table = $('.user_datatable1').DataTable({
order: [
[0, 'desc']
],
processing: true,
serverSide: true,
ajax: {
url: "{{ route('alumni.datatable1') }}",
data: {
collegeID: collegeID
}
},
columns: [{
data: 'id',
name: 'id'
},
{
data: 'name',
name: 'name'
},
{
data: 'status',
name: 'status',
mRender: function(data) {
return ' <input data-id="{{$colleges->id}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $colleges->status ? "checked" : "" }}>'
}
}
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
]
});
}
});
$(function() {
$('.toggle-class').change(function() {
var status = $(this).prop('checked') == true ? 1 : 0;
var user_id = $(this).data('id');
$.ajax({
type: "GET",
dataType: "json",
url: '/changeStatus',
data: {'status': status, 'id': id},
success: function(data){
console.log(data.success)
}
});
})
})
</script>
Please Add css.....
CSS
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
You can simple put after status....
Toggle switch
{
"data": "id",
render: function(data, type, row, meta) {
$html = '<label class="switch"> <input type="checkbox">
<span class="slider round"></span></label>';
return $html;
}
},
I have gotten stuck on a rather simple aspect of the autosave feature and that is the current status of the action like found on the overview page: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html#demo. But it doesn't look like they actually reference it anywhere (example below).
My html is just:
<textarea class="form-control" name="notes" id="notes">{!! $shipmentShortage->notes !!}</textarea>
My create script is below, the autosave feature works just fine, but the status just isn't there:
<script>
ClassicEditor
.create( document.querySelector( '#notes' ), {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
image: {
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ],
},
autosave: {
save( editor ) {
console.log(editor.getData());
// The saveData() function must return a promise
// which should be resolved when the data is successfully saved.
return saveData( editor.getData() );
}
}
} );
// Save the data to a fake HTTP server (emulated here with a setTimeout()).
function saveData( data ) {
return new Promise( resolve => {
setTimeout( () => {
console.log( 'Saved', data );
$.ajax({
url: '/osd/shortages/update',
type: 'POST',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: {
'shortage_id':'{{$shipmentShortage->id}}',
'notes': data,
},
dataType: 'json',
success: function (response) {
console.log('saved');
}
});
resolve();
}, 5000 );
} );
}
// Update the "Status: Saving..." info.
function displayStatus( editor ) {
const pendingActions = editor.plugins.get( 'PendingActions' );
const statusIndicator = document.querySelector( '#editor-status' );
pendingActions.on( 'change:hasAny', ( evt, propertyName, newValue ) => {
if ( newValue ) {
statusIndicator.classList.add( 'busy' );
} else {
statusIndicator.classList.remove( 'busy' );
}
} );
}
</script>
You are absolutely correct. They show us a sexy status updater but don't give us the code for it. Here is what I extracted from the demo page by looking at the page source. This should give you the Status updates as you asked. Let me know if you have any questions.
HTML:
<div id="snippet-autosave">
<textarea name="content" id="CKeditor_Notes">
Sample text
</textarea>
</div>
<!-- This will show the save status -->
<div id="snippet-autosave-header">
<div id="snippet-autosave-status" class="">
<div id="snippet-autosave-status_label">Status:</div>
<div id="snippet-autosave-status_spinner">
<span id="snippet-autosave-status_spinner-label"></span>
<span id="snippet-autosave-status_spinner-loader"></span>
</div>
</div>
</div>
CSS:
<style>
#snippet-autosave-header{
display: flex;
justify-content: space-between;
align-items: center;
background: var(--ck-color-toolbar-background);
border: 1px solid var(--ck-color-toolbar-border);
padding: 10px;
border-radius: var(--ck-border-radius);
/*margin-top: -1.5em;*/
margin-bottom: 1.5em;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#snippet-autosave-status_spinner {
display: flex;
align-items: center;
position: relative;
}
#snippet-autosave-status_spinner-label {
position: relative;
}
#snippet-autosave-status_spinner-label::after {
content: 'Saved!';
color: green;
display: inline-block;
margin-right: var(--ck-spacing-medium);
}
/* During "Saving" display spinner and change content of label. */
#snippet-autosave-status.busy #snippet-autosave-status_spinner-label::after {
content: 'Saving...';
color: red;
}
#snippet-autosave-status.busy #snippet-autosave-status_spinner-loader {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
border-top: 3px solid hsl(0, 0%, 70%);
border-right: 2px solid transparent;
animation: autosave-status-spinner 1s linear infinite;
}
#snippet-autosave-status,
#snippet-autosave-server {
display: flex;
align-items: center;
}
#snippet-autosave-server_label,
#snippet-autosave-status_label {
font-weight: bold;
margin-right: var(--ck-spacing-medium);
}
#snippet-autosave + .ck.ck-editor .ck-editor__editable {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#snippet-autosave-lag {
padding: 4px;
}
#snippet-autosave-console {
max-height: 300px;
overflow: auto;
white-space: normal;
background: #2b2c26;
transition: background-color 500ms;
}
#snippet-autosave-console.updated {
background: green;
}
#keyframes autosave-status-spinner {
to {
transform: rotate( 360deg );
}
}
</style>
The rest is just initializing the Editor just like on the demo page here.
ClassicEditor
.create(document.querySelector('#CKeditor_Notes'), {
autosave: {
save(editor) {
return saveData(editor.getData());
}
}
})
.then(editor => {
window.editor = editor;
displayStatus(editor);
})
.catch(err => {
console.error(err.stack);
});
// Save the data to Server Side DB.
function saveData(data) {
return new Promise(resolve => {
setTimeout(() => {
console.log('Saved', data);
SaveDataToDB(data)
resolve();
});
});
}
// Update the "Status: Saving..." info.
function displayStatus(editor) {
const pendingActions = editor.plugins.get('PendingActions');
const statusIndicator = document.querySelector('#snippet-autosave-status');
pendingActions.on('change:hasAny', (evt, propertyName, newValue) => {
if (newValue) {
statusIndicator.classList.add('busy');
} else {
statusIndicator.classList.remove('busy');
}
});
}
I am trying to show a KendoUI Chart inside a DIV and looks what the LOG says:
Invalid negative value for attribute width="-10px"
This is the code:
<div id="chart"></div>
This is the javascript:
$("#chart").kendoChart({
theme: "Metro",
legend: {
position: "right",
labels: {
font: "12px arial",
color: "white"
},
},
chartArea: {
background: "",
},
dataSource: data,
series: [
{
type: "pie",
field: "itemTotal",
categoryField: "itemNameAndTotal",
explodeField: "exploded"
}
],
tooltip: {
visible: true,
template: "${ category }"
}
});
This is the css:
#chart {
background: #f9a600;
border-radius: 5px;
margin: 10px 5px 5px 5px;
padding: 5px;
}
Thanks for the help!
I'm using jqPlot
Look at the right-bottom corner
Left side is correct, but the right side isn't.
There is a way to fix word-wrap on tick labels?
EDIT:
$(document).ready(function(){
var plot2 = $.jqplot ('chart-line', [[["2013-03-22",1],["2013-03-23",0],["2013-03-24",0],["2013-03-25",2],["2013-03-26",19],["2013-03-27",7],["2013-03-28",4]]]
, {
title: 'Total de alertas por dia',
seriesDefaults: {
fill:true,
color: 'steelblue',
rendererOptions: {
smooth: true
},
pointLabels:{ show:true }
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{
formatString: '%F',//'%Q',
textColor: 'black',
fontSize: '11px',
labelPosition: 'auto'
}
},
yaxis: {
min:0,
tickRenderer: $.jqplot.CanvasAxisTickRenderer
}
}
});
EDIT:
Here is HTML
<style>
.ComBordaRedonda {
border:1px solid #dadada;
border-radius:3px;
padding:5px;
font-size: 10pt;
font-family: Calibri;
}
</style>
<div class="ComBordaRedonda" style = "float: right;background-color:#FFFFFF;width: 57%; height: 300px;">
<div id = "chart-line" style = "width: 90%; height: 95%;margin:auto">
</div>
</div>
I fixed it.
I forgot to include the css of jqPlot in the page.
thanks nick_w!
I'm using qTip jquery-plugin for my tooltips.
I cannot change the font-size of the tooltips. This is the code.. any number 2..4..8 produces the same results.
$('.option img[title]').qtip({
style: { name: 'light', border: {width: 0}, title: { 'font-size': 2 } },
position: {
corner: {
target: 'topMiddle',
tooltip: 'bottomMiddle'
}
}
});
thanks
I solved with CSS:
.qtip-content {
font-size:12px;
}
You need to add the "px" and you can add any css property to your tool tip but you have to put it in quotation marks.
so try this (it worked for me)
'font-size' : '12px'
Try removing the quotes around font-size
style: { name: 'light', border: {width: 0}, title: { font-size: 2 } }