I just copied the code from Dojo Website/Example about Data Grid.
http://jsfiddle.net/6BtKk/
But as you can see, the styles appear to be missing. Also in the example site demo, theres infinite scrolling, what am I missing?
UPDATE: actually ... it appears like the demo site is having the same problem as mine now ...
The grid requires at least one more stylesheet:
dojox/grid/resources/Grid.css
If you are using a theme, there is another css that you need to add one of the following:
dojox/grid/resources/claroGrid.css
dojox/grid/resources/soriaGrid.css
dojox/grid/resources/tundraGrid.css
An updated fiddle using the claro theme:
http://jsfiddle.net/cswing/F8bDR/
By adding the styles, the scrolling begins displaying the rows.
Related
I originally had Vuetify working perfectly in my app but somewhere along the way the styles of components broke and I'm not sure how to fix it.
For example, here is my Vuetify table:
Reality:
Expected:
As far as I can tell everything is setup correctly, I will say, I started using SCSS inside the modules but I don't think that is the problem.
The functionality of Vuetify is working like sorting and things like that but just the styles are broken it appears.
I created a table with DataTable library (that is using foundation-zurb 5.5.3), Per the below image I'm seeing both in Chrome as in IE 11 that the most right column header does not align with the other rows when you first open up the page. The actual webpage is http://iprobesolutions.com/learn/wireless-conference-system-comparison. However if I open devtools to try and inspect the code the issue dissappears! When I refresh with CTRL+ F5 it however reappears.
The issue does not appear when I create this fiddle: http://jsfiddle.net/setbon/x75o53ck/
Below is just a small part of the code pasted. I'd really appreciate if you could look at the webpage since this is where the issue is displayed...perhaps a bug in IE and Chrome ?
<table id="example" class="display nowrap table1 compact">
I see you are loading the Datatables FixedHeader code. I don't see how or if you are using it but its not compatible with scrollX and scrollY:
https://datatables.net/extensions/fixedheader/
Try removing either FixHeader or the scrolling options.
Usually these type of issues occur when table is hidden when initialized and then becomes visible in a tab, modal dialog, etc.
In most cases the solution is to call
columns.adjust() to recalculate column widths once table becomes visible.
table.columns.adjust();
When I ran the code above after your table is initialized, the issue disappears.
I cannot explain why this issue occurs with your table. I'm not familiar with Foundation framework, but I don't think you have to call foundation() when initializing the table.
See jQuery DataTables: Column width issues with Bootstrap tabs for more information, examples and details.
Whenever I click inside a tooltipdialog, this border shows up around it.
Is there an easy way to remove this?
EDIT: After trying in different browsers, it seems to affect only Chrome, the outline doesn't appear in Firefox or IE.
I faces the similar issue when i started working on Dojo. To fix this basically you need to add the following css for dijit's dijitTooltipDialog class
.dijitTooltipDialog {
outline : none
}
See this for example.
I have this requirement where I have to change the default styles on my Ext JS application. I am not talking about changing stuff in CSS files yet. I am not that ambitious yet. Here is what I am looking for:
Suppose I need a Submit and Cancel buttons, I use xtype:button and text:Save ( or Cancel ). This will render buttons with the text on them. What should I do if I want to change the look and feel of the button? Or replace the button with a cool Save or Cancel image?
Right now I have all the texts on the application with the default font that ExtJS shows. What am I supposed to do if I want all the text on the application changed to a different font? Everything right from the data in forms/grids and the titles of each component should be changed to some other font my customer prefers. What am I supposed to do?
I understand these are very basic and a generic questions, but I am looking for a good headsup before I proceed with my task.
Thank you all in advance. Waiting for answers :)
Update: So, I found out how we deal with CSS and change the fonts. Can anyone help about the Chaning the look and feel for Submit/Cancel buttons.
I recommend you to use SASS and compass to build your own themes, or better said to change one the existing themes. In the Ext JS documentation you can find the css variables which you can set according to your needs.
If you are not ready for theming with SASS just yet take a look at this example of button configs from the sencha docs:
Stanadalone Example page: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.html
CSS that adds customized images to the buttons: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.css
JS that shows button configs: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.js
Essentially this shows how to use iconCls property on the button config along with a simple CSS class to add desired image to your button.
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});