Originally Posted by
fabricio.object
Using the new Material theme, if you set a text field behind 150 pixels wide, the text input will stick at 150 pixels.
It can overlap to other components if laid to the right of the component in this situation. This means, the layout itself obeys the specified width even if behind 150px.
This issue happens only and only when using the Material theme.
The issue is caused because of the following CSS rule, pertaining to the theme:
Code:
.x-form-text-field-body-default {
min-width: 150px;
max-width: none
}
Overriding it and setting a smaller "min-width" value allows going under the minimum 150px value.
Here's a PoC fiddle:
Hello
Consider this thread
https://www.sencha.com/forum/showthr...MATERIAL-THEME
Can you please download extjs 7 from the support portal and try?
I can't understand why it comes out like this:
Test code:
Code:
<!DOCTYPE html><html>
<head>
<title></title><meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="logo192.png">
<link rel="apple-touch-icon" sizes="128x128" href="logo128.png">
<link rel="stylesheet" type="text/css" rel="stylesheet" href="/ext/ext-7.0.0.131/build/classic/theme-material/resources/theme-material-all.css">
</head>
<script type="text/javascript" src="/ext/ext-7.0.0.131/build/ext-all-debug.js"></script>
<script type="text/javascript" src="/ext/ext-7.0.0.131/build/classic/locale/locale-it.js"></script>
<script type="text/javascript">
Ext.application({
name:'Basic Form',
glyphFontFamily: 'FontAwesome',
launch:function(){
var form = Ext.create({
xtype:'form',
renderTo:Ext.getBody(),
title:'Material theme\'s minimum 150px wide textfields.',
collapsible:true,
margin:5,
bodyPadding:5,
items:[{
xtype:'textfield',
fieldLabel:'Name',
labelWidth:40,
name:'name',
width:110
},{
xtype: 'container',
width: 110,
height: 20,
style: 'background-color: black; color: white; padding-left: 2px',
html: '110px wide block'
},{
xtype: 'container',
flex: 1,
html: 'Check how the text field can\'t obey (visually) the width if below 150px in the Material theme.<br />If some component is laid to the right of the component, they will be overlapped: so the layout itself accepts a width behind 150px.'
}]
});
}
});
</script>
</form>
</body>
</html>
Material Theme incongruently limits minimum TextField width to 150px
