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
});
Related
I'm trying to have a multiline TextField component that takes all available space depending on a device.
I know fullWidth but is there a way to have something like fullHeight in rows setting, depending on a device that it is displayed on?
You basically want your TextField element to take full height and width of the container.
For width you can simply add fullWidth prop to your TextField element,
<TextField fullwidth/>
For adding required height,
If you have prop Multiline={true} in your TextField element, Material Ui sets numbers of rows dynamically and height is adjusted according to number of row (everytime user hits enter new row is generated), due to this you can not set specific height.
Now to be able to set height manually, you must add prop rows={1}*
<Textfield multiline rows={1} fullwidth />
Now, you should be able to set height with JSS,
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles(() => ({
inputMultiline : {
"& .MuiInputBase-input" : {
height : '100vh', //here add height of your container
},
}
}));
Now simply add this to className of your TextField element,
<TextField multiline fullWidth row={1} className={classes.inputMultiline} />
For any doubt refer to,
material ui TextField API here and
material ui styles API here.
(although, no proper information regarding this is available in docs)
A solution is to manupulate Material-UI classes using JSS.
I change the height of the input base and align the text at start vertically.
const useStyles = makeStyles(() => ({
input: {
height: "100%",
"& .MuiInputBase-root": {
height: "100%",
display: "flex",
alignItems: "start"
}
}
}));
Add the input classes to your input and it's work.
All the exemple bellow on this codesandbox.
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
}
})
},
I need to show a refresh button on a specific card only, the title bar to which is defined in some parent Panel. I have tried in the following way:
Parent Panel:
config:
{
layout : 'fit',
items:[
{
xtype:'titlebar',
docked:'top',
title:'Directory',
items:[
{
xtype: 'button', //First Button-visible in all cards
docked: 'left',
iconCls: 'arrow_left',
action: 'back'
},
{
xtype: 'button', //Target button-to be visible in one card only
docked: 'right',
iconCls: 'refresh',
action: 'reset',
hidden: true //hiding this button
}
]
},
{
xtype:'tabpanel',
tabBarPosition:'top',
items:[
{
title: 'Tab1',
xtype: 'Card1'
},
{
title: 'Tab2',
xtype: 'Card2'
}
]
}
]
}
I have a hidden property set to true for refresh button in above panel, which i want to set false for a card.
The target card is set active on a button click. I am changing hidden property to false in the buttonTapListener, and then setting the target card as active. But the refresh button do not get visible. Here is the controller code:
onButtonTap: function()
{
...
var getParentPanelRef = this.getParentPanel();
var parentPanelItems = getParentPanelRef.getItems();
console.log(parentPanelItems.items[0].config.items[1].hidden); //Prints true
directoryMainContainerItems.items[0].config.items[1].hidden=false;
console.log(parentPanelItems.items[0].config.items[1].hidden); //Prints false
var directorySearchMainUIRef = this.getSomeOtherParentPanel();
directorySearchMainUIRef.setActiveItem(1); //Switches to target card
}
The value of hidden gets changed, but button doesn't come up. Please suggest an alternative if so. Thanks in advance.
Instead of hiding/showing the button you could add/destroy the button.
I had a similar problem a while a ago and it seems that sencha not always detects when it should redraw components.
Maybe your parent component'width is out of you browser and your button is docked right so that you can's see it.
I have a simple button with menu. There is a treepanel inside the menu.
Whenever user selects some node in tree, i update the container buttons text.
In treepanel's afterrender event i make a default node selection in the tree and this fire selection event and the button's text is updated.
However, when the button is rendered for the very first time, the treepanel inside the menu is not yet rendered.
How can i make menu & treepanel render silently (adding to dom but not shown to user until button is clicked) after button is rendered?
Actually there is a workaround which i hesitate to use:
btn.showMenu();
btn.hideMenu();
Any better ideas?
JsFiddle: http://jsfiddle.net/exGk3/
Code:
var selectedNodeIndex = 1;
var onItemSelect = function (selModel, node, index) {
var treePanel = selModel.view.up();
var btn = treePanel.up("button");
btn.setText(node.data.text);
};
var afterTreeRender = function (t) {
t.selModel.select(selectedNodeIndex);
}
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
menu: {
items: {
xtype: "treepanel",
id: "tree",
indent: false,
width: 150,
height: 200,
rootVisible: false,
root: {
children: [{
text: "item 1",
leaf: true
}, {
text: "item 2",
leaf: true
}, {
text: "item 3",
leaf: true
}]
},
listeners: {
select: {
fn: onItemSelect
},
afterrender: {
fn: afterTreeRender
}
}
},
showSeparator: false
}
});
I think the easiest thing to do here is to pass along the text needed for the button. It seems that you already know which node to select in the tree, then you probably know which text corresponds to the selected index.
If that's somehow not possible or API is not changeable here is a way for you to set button text programmatically:
http://jsfiddle.net/dbrin/XSn7X/3/
The changes from what you have done are 2 fold:
Use Ext.define method to define your class with initComponent method.
The initComponet method is a hook after the constructor to setup aditional properties. The key here is that the instance of the class exists at this point and *this* context references the class instance.
Use Ext.create to create an instance of your customized button component.
In the initComponment method you just traverse the tree looking for the data you need and set the button text.
I try to add a text filed and a button to the grid panel in extjs with following code:
var shopIdInput = new Ext.form.TextField({
emptyText: "请输入商户Id",
width: 200
});
var deleteOneShopCacheBtn = new Ext.Button({
text : '删除商户缓存',
handler: deleteOneShopCache,
minWidth : 100,
cls: "delBtn"
});
......
var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
bbar: [shopIdInput, deleteOneShopCacheBtn],
buttons: [clearRedressWordCacheBtn, clearSplitWordCacheBtn, clearRegionCacheBtn, clearCategoryCacheBtn, runCommandBtn],
items: [commandForm],
buttonAlign: 'center',
stripeRows: true,
autoExpandColumn: 'serverUrl',
//title: '批量执行指令',
sm: checkboxSelect,
frame: true,
autoHeight: true,
enableColumnHide: false,
renderTo : 'serverInfoList'
});
But the button deleteOneShopCacheBtn in bbar doesn't look like a common button as button clearRedressWordCacheBtn in buttons. It changes to a button when the mouse is on it. I have tried to fix the problem by set the property cls and fail, so what can I do?
I usually just add an icon to the button which helps it stand out. so just set a value for
iconCls: 'mybuttonicon'
and in your css
.mybuttonicon { background-image: url(../path/to/icon) !important;}
the cls config allows you to specify additional classes to which to apply to your renderable object (in your case a button) but does NOT do anything with making it change based on the mouse hovering over it, etc.
What you need is a listener on deleteOneShopCacheBtn and listen to the mouseover event(also see Sencha docs for the list of events a button responds to). You can fire off a function and make your button look like whatever you want. I am currently at work. If you still have this question when I get home tonight I can post some code.
Also see following example:
Button click event Ext JS
}