Hello I am using sweetalert 2 to show some alerts to a project.
It supposed to look like this
but it does like this
And it because of this style. The style is set to auto. When i uncheck the css value on Inspect/Styles the swal works fine.
body.swal2-height-auto {
height: auto !important;
}
I tried to edit this line on the plugins css file sweetalert2.css to set the height to 100%
body.swal2-height-auto {
height: 100% !important;
}
or add a showClass on ts function
const steps = ['1', '2', '3']
const swalQueueStep = Swal.mixin({
customClass: {
container: 'container--modifier',
},
confirmButtonText: 'Forward',
cancelButtonText: 'Back',
progressSteps: steps,
input: 'text',
reverseButtons: true,
validationMessage: 'This field is required'
})
global.scss
.container--modifier{
height:100%!important
}
i saved the file but changes are not commited. Any help?
Related
When I check the official Tailwind CSS documentation, it says that
Use w-screen to make an element span the entire width of the viewport.
I mean, w-screen is ok when I try to implement
width: 100vw;
But what should I do when I try to implement
width: 90vw;
height: 90vh;
The right approach to take depends on whether the values are going to be reused.
Arbitrary Values
If there's one specific place that you need a value such as 90vw rather than it being repeated, opt for an arbitrary value. Example:
<div class="w-[90vw] h-[90vh]"></div>
Classes for those styles will be generated automatically.
Extending Your Config
For styles that are likely to be repeated or which should be part of your design system, extend your Tailwind config instead:
// tailwind.config.js
module.exports = {
theme: {
extend: {
height: {
'screen/90': '90vh',
},
width: {
'screen/90': '90vw',
}
}
}
}
Use:
<div class="w-screen/90 h-screen/90"></div>
I find useful to create a plugin for this case
Change Tailwind config into this (add plugin and default values)
const plugin = require('tailwindcss/plugin')
// create default values
const screenKeys = Array.from({length: 20}, (_, i) => i*5)
const screenSizes = screenKeys.reduce((v, key) => Object.assign(v, {[key]: key}), {});
module.exports = {
// ...
plugins: [
plugin(function ({matchUtilities, theme}) {
matchUtilities(
{
'w-screen': width => ({
width: `${width}vw`
})
},
{ values: Object.assign(screenSizes, theme('screenSize', {})) }
),
matchUtilities(
{
'h-screen': height => ({
height: `${height}vh`
})
},
{ values: Object.assign(screenSizes, theme('screenSize', {})) }
)
})
],
}
It will allow you to use w-screen or h-screen utility with any vw or vh values from 0 to 95 with step 5 (0,5,10...95). w-screen with no values will be 100vw (as current behaviour)
<div class="w-screen h-screen-35">
Default width screen is still working
</div>
<div class="w-screen-50 h-screen-[15]">
50vw width, 15vh from JIT
No need to set h-screen-[15vh] as we already know we're working with vh units
</div>
In your case it will be w-screen-90 h-screen-90
You may extend config for reusable classes with screenSize key
module.exports = {
theme: {
extend: {
screenSize: {
33: 33 // just an example
}
},
},
}
Usage
<div class="w-screen-[22] h-screen-33">
33vh from user config, 22vw from JIT
</div>
DEMO
You can use the Tailwind CSS utility classes to set the width and height of an element to a specific viewport width or height.
For example, to set the width of an element to 90vw, you can use the class w-90. Similarly, to set the height of an element to 90vh, you can use the class h-90.
So, in your case, you can use the following classes:
w-90
h-90
i have a vue app with ant-design-vue table in it as a content. but the sorter icon is not showing up while i have import the icon correctly and working correctly when just display the icon. when i'm inspect the element, the icon is actually there but not displayed like in the picture above.
i have also tried by overwrite the css:
.ant-table-column-sorter-up .off .anticon .anticon-caret-up {
font-size: 300px; //to see if there any change clearly
color: pink
}
but there is nothing change on the template.
this is where i'm setting up the sorter on the ant design table:
{
title: 'NAME',
dataIndex: 'name',
key: 'name',
sorter: (a, b) => a.name.localeCompare(b.name),
sortDirections: ['ascend', 'descend'],
scopedSlots: {
customRender: 'name',
},
width: 250,
},
it's shows there is no <svg> data in <i> like another ant-design icon. the <i> is empty. that means it's not affected by css. it's may affected by the ant-design-table.
and the function is working perfectly, just the icon is not showing up. is there anyway that i can do so that the sorter icon can showing up?
I'm trying to change the bg color of ag-grid in React application. I have tried row cell style but I want to change the full bg of my grid.
my code is:
{
headerName: "Module Name",
field: "ModuleName",
sortable: true,
filter: true,
resizable: true,
cellStyle: function(params) {
return { backgroundColor: "#red" };
}
},
You could use the following CSS to change the background:
.ag-root, .ag-header, .ag-cell {
background-color: #f5f5ff !important;
}
https://embed.plnkr.co/P3HrdAQUOA8rkmIO/
Another option would be to customize the theme: https://www.ag-grid.com/javascript-grid-themes-provided/#customizing-sass-variables. This would a more complex solution, but would be better if you want to override a bunch of styles.
I have the following fieldset in a form Panel in the Admin Dashboard template using ExtJS 6.2:
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
It is working fine, but it is rendering rather strangely, as seen in the following image (I had to mask the data being presented, but the numbers are what to be selected from the combobox):
I am assuming this is a CSS issue, but have not been able to figure out what. NB: I had to copy Admin-all.css Admin-all_1.css Admin-all_2.css and Admin-all_3.css from the build/examples/admin-dashboard/classic/resources folder to the app after I created the template in order to fix a major layout issue.
Yes, this is a CSS issue. The Admin Dashboard example and its CSS have been compiled using Sencha Cmd, so the CSS file contains only the styles required by the example. Since there is no combobox in the example, the combobox styles have not been added and the combobox you inserted does not render correctly.
The only solution would be to use Sencha Cmd to recompile from source and fix the layout issue along the way, which I guess is caused by a missing requires directive.
I have created a menu with extjs where you click on it and can see menu items dropping down. The first item is open. This button is supposed to open a file from file-dialog. But the only way I can open the file dialog I found is to place the file dialog field in the menu by only showing the button.
Now I need help to make this button look like just regular menu item:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
// maybe to add some css class here
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
var mainmenu = Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [item]
});
You can add the attribute buttonConfig to the Ext.form.field.File item and then use the standard attributes to a button. For example, this might work:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
buttonConfig: {
style: {
background: "#f1f1f1",
border: 0
}
},
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
Try changing putting a cls instead of a style attribute in the buttonConfig to use a CSS class instead of inline CSS.