I need to have fixed table body height to firstly show up on my whole page nicely and secondly to not change height when I choose filters and filter tags are added to header.
I have real trouble finding solution. My best guess I should overwrite MUIDataTable.responsiveScroll class but it does nothing when I change minHeight:'80vh' for exmple.
Yes, you need to override the MUIDataTable.responsiveScroll. This is what I did for expanding to full size of page
createMuiTheme({
overrides: {
MUIDataTable: {
responsiveScroll: {
maxHeight: 'none',
},
},
},
});
You can add other styles there if you want a minimum height.
Related
I have a situation in which I want to display data in a FluentUI DetailsList, where column names can be very long, while the column content can be very narrow. In such a case, the header will be truncated.
See this codepen.
Is there any way to change this behavior, such that the header text wraps over multiple lines?
While I found this unanswered question from 2 years ago, I couldn't find an answer on the topic on neither Stackoverflow, Github or the offical documentation.
Here are some approaches I tried:
inject a CSS class with word-break: break-all; via the headerClassName field of IColumn
setting isMultiLine on the columns
The DetailsHeader component itself whose rendering I can override with onRenderDetailsHeader does not seem to offer any props for customizing how the text is displayed
Is there even a way to achieve the desired behaviour (wrapping over multiple lines instead of truncating long column headers)?
Most of FluentUI Components uses text-overflow: ellipsis. What you can do is to modify that "rule". Inside DetailsList you have onRenderDetailsHeader method which allows you to change header styles.
const onRenderDetailsHeader = (headerProps, defaultRender) => {
if (!headerProps || !defaultRender) {
//technically these may be undefined...
return null;
}
return defaultRender({
...headerProps,
styles: {
root: {
selectors: {
'.ms-DetailsHeader-cell': {
whiteSpace: 'normal',
textOverflow: 'clip',
lineHeight: 'normal',
},
'.ms-DetailsHeader-cellTitle': {
height: '100%',
alignItems: 'center',
},
},
},
},
})
}
<DetailsList
...
onRenderDetailsHeader={onRenderDetailsHeader}
/>
Codepen working solution
Note:
Play around with minWidth, maxWidth props inside this._columns to get expected behavior.
I want to change the Ext.grid.Panel header height.
The height of a grid panel header is forcibly set at 28px.
No sass settings
Header configuration on the panel did not work for me
Modifying the grid columns height seems to work when configuring < 28px. 28px seems to be the minimum.
This is what I have so far (and it works), but I don't like the solution.
Ext.define('Ext.grid.Panel', {
listeners: {
beforerender: function (cmp, eOpts) {
cmp.headerCt.setHeight(25);
}
}
});
Additionally, column headers seem to be fixed at 28px as well. Setting the height of the header to 25 will not set the column header to 25. You need to override that as well in the scss / css. Otherwise your column header menus will display off the 28px height.
.x-column-header
{
height: 25px;
}
This solution does not work: If you drag column headers, changing the column's index position, it will break -.-
Recommedations?
To set the height of the column headers, you must set the height after their compilation. Again, the height value for the column configuration does not work to set the height < 28, but works > 28.
I have found that modifying the height after compilation correctly sets the height and allows columns to be draggable (everything works as it should).
Ext.define('Ext.grid.Panel', {
listeners: {
beforerender: function (cmp, eOpts) {
cmp.columns[0].setHeight(25);
}
}
});
My solution couldn't use this because I create a dynamic grid. In the dynamic part of the grid I use GRID.reconfigure(); - there by destroying anything that was created on a beforerender state.
Ext.define('Ext.grid.Panel', {
listeners: {
reconfigure: function (cmp, eOpts) {
cmp.columns[0].setHeight(25);
}
}
});
The reconfigure function fires after the reconfiguration so this is how I got around the dynamic grid reconfiguration.
You can also use sass sub-styles for that gridpanel and set the 'ui' config:
add ui:'custom-height-item' to your config
#include extjs-panel-ui(
'custom-height-item',
$ui-header-line-height: 28px,
$ui-header-padding: 2px;
)
I am having a bit of trouble figuring out why there are missing items from the AttributeComboBox that I am testing. From debugging, I can clearly see that the field config has an array containing all the items, but only 15 are visible in the UI. Is there a config that needs to be specified to increase the number of displayed items?
It looks like maxHeight within the listConfig needs to be set. I had tried the maxHeight config, which didn't work, so I had assumed it was not a height issue. For reference, both configs have a default value of 300, so if you're having a similar experience, adjust the height above 300. There is also no extra whitespace if the maxHeight is set well above what may be needed to display all items.
Here is an example:
this.example = Ext.widget('rallyattributecombobox', {
model:'PortfolioItem',
field:'Something',
fieldLabel: 'Something',
labelWidth: 150,
stateful: false,
listConfig: {
maxHeight: 465
}
});
I have a certain view where I want to post text so I need the height of the row cells to be bigger than the default. I look up the documentation of ExtJS 4.0 and come up with this:
Ext.define('APP.view.CalendarEventsGrid', {
//extend: 'Ext.grid.Panel',//this is the default which is working
Ext.create('Ext.grid.Panel',{
viewConfig: {
height: 50
}
}),
id: 'CalendarEvent',
requires: [
'Ext.data.*',
'Ext.grid.plugin.CellEditing',
'Ext.form.field.Text',
'Ext.toolbar.TextItem',
],
initComponent: function(){...
But this don't do the trick. So could anyone help me with a way to change the height of the row in this exact view?
i am not sure what is your exact problem but i assume that you want to pass height: 50 in the viewConfig config option of Ext.grid.Panel
every config of the parent class can be passed through the child class so you don't need to instantiate parent class to specify config options (and actually what you tried in the question is not possible at all :))
Ext.define('SYMADM.view.CalendarEventsGrid', {
extend: 'Ext.grid.Panel',
viewConfig: {
height: 50
},
Within Sencha Touch, is it possible to define a default UI , like "light" or "dark", that applies to all components (unless overwritten explicitly)?
The aim is to avoid having to declare ui: "dark", or any custom UI that is made, for every element.
Cheers!
You can try this:
Ext.apply(Ext.Component.prototype, {
getUi: function() {
var defaultUi = 'light';
// value of [this.config.ui] is ignored here
// we can use something like forcedUi
return (this.forcedUi) ? this.forcedUi : defaultUi;
}
})
The disadvantage of this code is that we need to specify another variable for applying ui different from 'light' (because variable 'ui' via getUi() will always return 'light'):
...
items: [{
xtype: 'button',
forcedUi: 'dark'
}]
...
I am stuck on Touch 1.1 so sunsay's solution didn't work for me, but this did:
Ext.CustomToolbar = Ext.extend(Ext.Toolbar,
{
ui:'app'
});
Ext.reg('toolbar', Ext.CustomToolbar);
So, it's still component-by-component-type, but not component-by-component-instance. And since you can overwrite the "reg", no need for custom x-types all over the place, either.
I assume that you know about sencha touch styles and themes. Otherwise you can download a pdf file from this link which clearly describes about how to do it...
http://f.cl.ly/items/d9df79f57b67e6e876c6/SenchaTouchThemes.pdf
In it they are mentioning about scss file where you can specify the base-color, ie
$base-color: #4bb8f0 ;
$base-gradient: 'glossy';
Then run it ... you can see the toolbars and buttons created with the color and gradient you have mentioned.