I'm using a typeahead Vue component inside of a Swal2 popup, I've adjusted the height using a custom class so I can get all of the typeahead dropdown data inside (or what would appear inside) the popup.
But I can't seem to get the content to align to the top.
I'm sure it's just a flex box setting but I can't figure out what to add to my custom class the get this aligned top.
.lookup-custom-height {
height: 400px;
}
CODE REQUESTED:
lookup() {
swal({
title: 'Substance Lookup',
html: '<sub-typeahead placeholder="Search for Substances ..." item="material" display="name"></sub-typeahead>',
showConfirmButton: false,
customClass: 'lookup-custom-height',
})
return new Vue({
el: swal.getContent(),
components: {
SubTypeahead
}
})
},
Related
I am having issues with react Plotly displaying correctly when a graph loaded in a hidden tab is selected. It seems this is a known issue where every tab but the default tab will not resize appropriately because it doesn't know the hidden graph's dimensions.
To get around this I would like to dynamically update the tab height to be equal to the height of the default tab. Something like this: Change div height when tab is selected.
The issue is, I am unable to select the tab height value on DOM load. I thought I could add a componentDidMount function with an evenlistener for window load like such:
constructor(props) {
super(props)
this.state = {
value: 0
};
this.handleLoad = this.handleLoad.bind(this);
}
componentDidMount() {
window.addEventListener('load', this.handleLoad);
}
handleLoad() {
console.log("firstTab height: " + $('#firstTab').offsetHeight)
}
This issue is, the console log is outputting firstTab height: undefined.
When i inspect the web page and put the command $('#firstTab').offsetHeight into the console I am able to come up with a height of 697 px.
I don't want to hardcode the tab pixel size. Can anyone guide me as to why I am failing to grab the element height on window load?
Try using clientHeight property.
componentDidMount() {
const height = document.getElementById('firstTab').clientHeight;
}
I think instead of using event listener, you can do something like this.
componentDidMount() {
const height = this.firstTab.clientHeight;
console.log(height) // => gives you height
}
render() {
return (
<div
id="firstTab"
ref={ (firsTabElement) => { this.divElement = firstTabElement } }
>
Tab Content
</div>
)
}
After the first render if you are not hiding or putting any condition to remove the firstTab from the DOM. It will be available to you in componentDidMount lifecycle.
When we place button inside angular material dialog it is auto focussing first button in that modal.
Stackblitz example
You can add the autofocus = false properties to the dialog to disable the auto focus.
Example as below:
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
data: {name: this.name, animal: this.animal},
autoFocus: false
});
I want to remove the title area from the ionic popup completely. I removed the title tag and tried. but still can see the title space visible. Here is my code.
var registerPopup = $ionicPopup.show({
templateUrl: 'templates/register_popup.html',
scope: $scope
});
Even if I remove the title tag completely, the title area is still visible with a blank space as shown in the image below. I want to remove the entire title space from the ionicPopup. How can I get it? what changes are to be made in the code?
It is because the title is wrapped inside .popup-head which takes the space.
First add a value of custom-class to cssClass property in the Popup object.
var registerPopup = $ionicPopup.show({
templateUrl: 'templates/register_popup.html',
cssClass: 'custom-class', // Add
scope: $scope
});
You can hide it using custom CSS.
.custom-class .popup-head {
display: none;
}
I have been tasked with moving existing ExtJS 4 Panels on a page, rendered to separate divs, into an Accordion layout; I have moved the divs into the Accordion as items, and the Panels are being rendered well enough.
In my particular situation, however, the Accordion Panel applies some (10px all round) padding that I would like to remove.
I have a suspicion that it might be to do with some preexisting table styling that I unfortunately can't remove. What stylesheet modifications should I be making to specifically target the accordion control and its contents, such that the Panels contained within the Accordion Panels fit against all four edges?
If it might not be CSS styling, or if it can be as easy as an Accordion config/property, what should I be setting to remove this whitespace? I have tried some of the settings that looked promising, but have not fixed the issue.
Or, in the more negative circumstances, do I have to move the Panels directly into the Accordion, which brings with it yet more problems?
Essentially, how do I make the contents of each Panel in an ExtJS Accordion Layout fit the width and height of their individual Accordion Panel exactly without whitespace?
Accordion panel ExtJS code:
var accordion = Ext.create('Ext.panel.Panel',{
bodyPadding: '0px',
width: '370px',
autoHeight: 'false',
layout: 'accordion',
items: [
{title: 'Drawing', html: '<div id="Image" style="padding: 0px, margin: 0px; border-spacing: 0px; height: 350px"></div>'},
{title: 'Production Processes', html: '<div id="Process" style="padding: 0px, margin: 0px; border-spacing: 0px"></div>'},
{title: 'Production Item Details', html: '<div id="Details" style="padding: 0px, margin: 0px; border-spacing: 0px"></div>'}
],
renderTo: Ext.get('Accordion')
});
My workaround has been to take the pre-existing panels and apply collapse control variables:
var drawingPanel = Ext.create('Ext.panel.Panel', {
animCollapse: false,
collapsible: true,
autoWidth: true,
titleCollapse: true,
collapseFirst: false,
collapsed: true,
...
This starts the panel as collapsed, and collapse/expand/beforerender listeners to set/get cookies that control a persisted state:
...
listeners:{
expand: function(){
var now = new Date();
var exp = new Date(now.getTime() + 2592000000); //number of milliseconds equal to 30 days from now
Ext.util.Cookies.set('panelCollapsed', 'false', exp);
},
collapse: function(){
var now = new Date();
var exp = new Date(now.getTime() + 2592000000); //number of milliseconds equal to 30 days from now
Ext.util.Cookies.set('panelCollapsed', 'true', exp);
},
beforerender: function (){
var cookieSet = Ext.util.Cookies.get('panelCollapsed');
if(cookieSet == 'true')
{
Ext.apply(Ext.getCmp('panel'), { collapsed: true });
}
else
{
Ext.apply(Ext.getCmp('panel'), { collapsed: false });
}
}
}
});
Other attributes of the panel have been stripped out to demonstrate the salient points.
This implementation does consider a panel on its own; the expand and collapse listeners could feasibly control the collapsed state of other panels as necessary. Admittedly, this probably isn't as efficient as getting the accordion control to work properly, but if they don't work as expected, this is a start.
I've been experimenting with using a UI Dialog window to display an existing form (page with the form and no layout). I'm not sure if I'm doing this the right way but it seems to work fine minus a couple of pieces of bad behavior. This is the behavior right now:
The dialog window with no conent opens (very small/empty)
About a half second later the content loads and the window expands insantly (looks bad visually)
Even though the window width expands when the content is loaded, the title bar does not adjust to the new width and remains very small width wise. Although if resizeable is set to 'true' the title will expand. It's just not responding with a width adjustment when the content from the hidden div is loaded.
How could I go about not displaying the dialog until the content is finished loading into the dialog, and how could I force the dialog title to width adjust right after the content is finished loading?
<A HREF="javascript:newItem('foo')">CREATE NEW FOO ITEM<A>
<script type="text/javascript">
newItem= function(type) {
$("#form_load").load(
'/items/new', {item_type: type}).dialog({
modal:true,
draggable: true,
resizable: false,
width:'auto',
height:'auto',
title: 'Some title',
position: [150, 150]
});
};
</script>
Thanks!
You're going to want to call the dialog after the content is loading.
You can do this by using $.load's callback method.
<script type="text/javascript">
newItem = function(type) {
$("#form_load").hide().load(
'/items/new',
{item_type: type},
function (data) {
$(this).dialog({
modal : true,
draggable : true,
resizable : false,
width : 'auto',
height : 'auto',
title : 'Some title',
position : [100, 100]
});
}
});
}
</script>
You may also want to include a hide/show toggle so the #form_load container isn't displayed until the content is loaded.
See jQuery's $.load docs here: http://api.jquery.com/load/
UPDATE: Added .hide() so content isn't shown until dialog is created.