I have a ui grid in which i am using pagination.
paginationSizes : [25, 50, 75 ,100]
On selecting 100 in the ui-grid dropdownlist, 100 doesnot gets diplayed fully.
How do i use CSS to change the the width of the shown dropdownlist.
Thanks :)
This is currently my grid options :
`$scope.gridOptions = {
enableFiltering: true,
enablePaging: true,
enableRowSelection: true,
multiSelect: false,
paginationPageSizes: [25, 50, 100],
paginationPageSize: 10
};`
Screenshot of my ui-grid dropdownlist
Set following CSS style property in your custom css file
.ui-grid-pager-row-count-picker select
{
width: 100px !important;
}
Related
in google chart legend lable in mobile responsive legend is slider ,I need to not silder legend but legend wordwrap.
var options = {
legend: {position:"bottom" , alignment: 'top'},
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:<?=$target?>,
min:0
}
},
seriesType: 'bars',
series: {3: {type: 'area'}},
colors: ['CornflowerBlue', 'green', 'red', '#0099c6']
};
only available option is legend.maxLines...
Set this to a number greater than one to add lines to your legend. Note: this option currently works only when legend.position is 'top'.
with...
legend.position: 'top'
I have a need.. On clicking a button my datatable should be viewed in a full screen mode with option to come back to normal. If I am in full screen I shouldnot allowed to work on the parent window. I am not using windows.. I have placed my datatable inside a div. How can I achieve this??
try jQuery popup: http://jqueryui.com/dialog/#modal-form
Check out the documentation and initialize the dialog on loading the page. Here is a sample fiddle as well http://jsfiddle.net/taditdash/PHX2Y/
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 250,
width: 400,
buttons: {
"Ok": function() {
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
I have a grid inside my viewport. Code is as shown below.
By giving a fixed width to my grid, I do not get a horizontal scrollbar for my grid. autoScroll = true dosent help either.
If I remove the fixed width given to my grid or give a layout fixed to my viewport I am not able to resize my grid columns.
I want to be able to be able to resize my columns at will and also need an horizontal scroll bar.
Columns are added dynamically and minWidth, flex and maxWidth have been set for each of the columns
What can be done? Please help
Viewport.js
Ext.define('MyView.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:['MyView.view.gridPanel'],
layout : 'fit',
items:[{
//width:7000,
xtype:'gridPanel'
}]
});
gridPanel.js
Ext.define('MyView.view.gridPanel', {
extend: 'Ext.grid.Panel',
plugins: 'gridfilters',
alias: 'widget.gridPanel',
id: 'tests-view',
name:'graphPanel',
title: 'Tests',
emptyText: '',
store: 'MyView.store.settingStore',
pageSize:10,
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'MyView.store.settingStore',
dock: 'bottom',
displayInfo: true
}],
filters :[],
//features:[],
enableLocking:true,
columns:[], //Columns are loaded dynamically
viewConfig: {
stripeRows: true,
plugins: {
dragGroup: 'user-dd',
enableDrop: false,
ptype: 'gridviewdragdrop'
//forceFit:true
}
},
columnLines: true,
frame: true
});
Scroll doesn't appear, because you have set grid width to 7000px. Usually scroll appears in grid when columns width is greater than grid width. Use layout to fit grid in parent container, or adjust its width, and then scroll should appear.
I am using ExtJs 4.2
My app needs to a have a button that will invoke a panel, that holds the navigation tree show once clicked.
This button needs to be visible at all times, and centered vertical to the middle and to the right of the screen.
How do I achieve this behavior? I don't want to nest the button in a panel, it should be a part of the view port...
Here is what I have tried:
Ext.define('NG.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id: 'appviewport',
items: [{
itemId: 'app-header',
xtype: 'appheader',
region: 'north',
weight: 10,
border: false,
height: 60
}, {
itemId: 'navigation',
xtype: 'button',
region: 'west',
weight:15
}, {
xtype: 'carddeckmanager',
region: 'center',
weight:10,
border: false,
cls:'n-cardmanager-box',
items: [{
itemId: 'dashboard',
xtype: 'dashboard'
}]
}]
});
but this makes the button expand as the height of the viewport.
If you really want to float that button, there's no sense in adding it to a container or the viewport. Render it to the document body, configure it with floating: true, and give it a z-index that will ensure that it remains above any window (if that's what you want).
Then you can position it where you want with its alignTo method but, better yet, use anchorTo so that it sticks where you put it, even when the browser is resized.
All of this gives us:
var body = Ext.getBody();
// Create the button
var button = Ext.widget('button', {
text: "Yo"
,floating: true
,renderTo: body
});
// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);
// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);
Put this code somewhere in the startup process of your application. Candidates could be the init method of your application, the initComponent method of your viewport, or a single afterrender listener on the viewport...
Now, if what you want is just that the button remains visible in the right border of the viewport but without it filling the whole region, you need to wrap it in a container with an appropriate layout. For example, add this to your viewport:
{
region: 'west',
layout: {type: 'hbox', pack: 'center', align: 'middle'},
items: [{
xtype: 'button',
text: "Viewport button"
}]
}
I'm sure a lot of people use the twitter widget that twitter provides.
Here's the code they provide:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 420,
height: 250,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#666666'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('apumpkinpatch').start();
</script>
You can see an example here how when you click the "feedback" tab on left side of screen, the twitter widget appears over the div. Any idea what I can do to prevent this?
I think the class for the widget is .twtr-doc according to the inspector. Anyone know if there is a css attribute I should be adding to it to stop this from happening?
EDIT -: took out IE part of question to just open it up in another question so I can mark the first answer as correct.
Re: the twitter widget being on top of the feedback div, you need to use z-index property in your styles to correct this.
Try adding z-index:100 to your feedback div. I do not have IE or I would help you debug that.