I have jquery datatable, and I know there is a "responsive" plugin to it, but I dont like the behavior as much as the bootstrap table-responsive class.
I should be able to just wrap my jquery datatable in a div with this class, but that doesn't seem to work for me. I basically want the table to scroll horizontal when too big.
I have tried wrapping the table in a div, that didn't work.
I have tried setting the class of the div that gets generated from the datatable, that didnt seem to have any effect either.
For those of you not familiar, bootstrap responsive tables scroll (see here):
http://getbootstrap.com/css/#tables-responsive
Jquery datatables responsive plugin, folds the table into a plus/minus (very elegant in some cases, but not mine)
https://datatables.net/extensions/responsive/
Try adding <div class="table-responsive"></div> container after the table has been initialized, see the sample code below:
$('#example').DataTable({
"initComplete": function(settings, json){
$('#example').wrap('<div class="table-responsive"></div>');
}
});
The reason <div class="table-responsive"> didn't work because <table> has to be direct child of <div class="table-responsive">, but DataTables changes hierarchy and the styles no longer apply.
Alternativelly, there is scrollX option that seems to be doing the same.
$('#example').DataTable({
'scrollX': true
});
See this JSFiddle for demonstration.
Related
I'd like to use the md-card material from Vue Material in an existing application. The example on the website (https://vuematerial.io/components/card/) uses the following:
<template>
<div>
<md-card>
...
</md-card>
<md-card md-with-hover>
...
</md-card>
</div>
</template>
When I use this in the HTML page and create a Vue object for the containing div, the components do show, but the layout is not working. I have tinkered with the layout classes, but the behavior is not matching the example. How can I configure the layout in a plain HTML page to match the example's layout behavior? Is the example page adding another layer to the example div to create the layout behavior?
Updated: I tried a similar scenario in JsFiddle, and it works perfectly: https://jsfiddle.net/w9m6q05f/3/ . In my application, the cards are always in a column regardless of the width of the view, and the bottom card is stretched towards the bottom of the view. Do I need to set the class of the containing div? It may be getting overwritten by my application somewhere else.
Update 2: The culprit is which has height: 100%
I'm trying to wrap my head around how "inner components" can adjust the content of "outer components". Let's say I have an application template that looks something like this:
<template>
<div class="sidebar">
<div>Some app-wide content</div>
<div>
<!-- I want to put some view-specific content here -->
</div>
</div>
<div class="main-body">
<router-view></router-view>
</div>
</template>
Each subview wants to render different content to the sidebar. Obviously this would be easy if the subview included the sidebar area itself, but let's say it is important to preserve the structure and we don't want to replicate the boilerplate of the sidebar across every view.
Is there any way for a child view to declare "export this extra component for display in another place?" I imagine something like injecting the parent view and calling a method on it, but I can't figure it out from the documentation.
Simple demo:
It's fairly simple, actually. Just import and inject your sidebar or any other viewmodel and call a method or update a property.
https://gist.run/?id=745b6792a07d92cbe7e9937020063260
Solution with Compose:
If you wanted to get more elaborate, you could set a compose view.bind variable to that your sidebar would pull in a different view/viewmodel based on the set value.
https://gist.run/?id=ac765dde74a30e009f4aba0f1acadcc5
Alternate approach:
If you don't want to import, you could also use the eventAggregator to publish an event from the router view and subscribe to listen to that event from your sidebar and act accordingly. This would work well for a large app setting where you didn't want to tie them too closely together but wanted the sidebar to react correctly to unpredictable routing patterns by always responding when triggers were published.
https://gist.run/?id=28447bcb4b0c67cff472aae397fd66c0
#LStarkey's <compose> solution is what I was looking for, but to help others I think it's worth mentioning two other viable solutions that were suggested to me in other forums:
View ports. You can specify multiple named router views in a template and then populate them by passing in a viewPorts object to the router instead of specifying a single moduleId. The best source of documentation is a brief blurb in the "Cheat Sheet" of the Aurelia docs.
Custom elements. It's a little more "inside-out" but you could define most of the outer content as a custom element that has slots for the sidebar and the main body; each child view would define this custom element and pass in the appropriate pieces.
I have a Data View in an Xpage application which is using the Bootstrap theme. I started to use a View, but could never get the pagers lines up, and the data view is working better.
But I do not understand where to put my table class css. For example, if I want a stripped table I enter "table table-striped" in the styleClass of the view (or maybe it is the dataStyleClass). If I do that in the styleClass of the data view, I do not get strips.
I tried the suggestion from Mark below, but something is not working. I added a script call and used the id of the tableview. It already has a class of "cleearfix table" on it.
I have added Chrome's web inspector to show what is going on.
The xe:dataView control does have a styleClass attribute, but classes that you set there are added to the div element that wraps the dataview, not the table (and that's where Bootstrap needs the table-striped class. I would solve this with some JavaScript to add the classes you need on the table element
<xp:scriptBlock
id="scriptBlock1">
<xp:this.value><![CDATA[
$("table.dataview").addClass("table-striped table-hover")
]]></xp:this.value>
</xp:scriptBlock>
Following https://www.datatables.net/manual/styling/bootstrap-simple.html, it doesn't include the original datatables css.
If I remove the script in the source:
(From the comment it reads like not important?)
<script type="text/javascript">
// For demo to fit into DataTables site builder...
$('#example')
.removeClass( 'display' )
.addClass('table table-striped table-bordered');
</script>
There will be no styling to the table, see https://jsfiddle.net/gLrf9o8t/
It appears that the demo is cheating... Does it mean all datatables style classes become useless if I don't include the original css file?
However if I include the orginal css back in, the paging bar looks very weird, see https://jsfiddle.net/r45f6dt6/
If you're using the DataTables.Bootstrap CSS, you also need to manually apply Bootstrap classes to the table. You cannot change those classes after DataTables has been initialized as you are with the script above because they will not be applied to the DataTables grid. If you must change classes programmatically, init DataTables as a callback on that function.
<table id="example" class="table table-striped table-bordered" ... >
Demo
Note that I've removed the base DataTables CSS link.
At various places in my single page app I use composition to compose one view into another. At the same time I have noticed some animation effects when certain pages load, almost as if sections were dynamically expanding as binding, etc. took place. I am pretty sure that this has nothing to do with Durandal's transitions as I disabled that and still got the expanding "animation" effect.
This morning I created a new view, copied some existing HTML from another view into it and replaced this HTML in the parent view with the new composed child view. In other words, the parent view went from this:
<div data-bind="visible: contactPerson, with: contactPerson">
<span data-bind="text: firstName"></span><br />
<span data-bind="text: lastName"></span><br />
</div>
to this:
<div data-bind="compose: { model: 'viewmodels/contact-view', activationData: { contactPerson: contactPerson } }"></div>
Upon testing this change I immediately noticed that the original version had no expanding animation effect while the composed version does. After playing around with the Durandal transitions I came to the conclusion that this is quite possibly not related to that but more probably due to delayed insertion of the child view HTML.
The new child viewmodel is extremely simple so I see no issues there, unless it has to do with the fact that it is not a singleton, which it cannot be in this case.
define(['services/dataservice',
'services/logger'],
function (dataservice, logger) {
return function () {
var self = this;
var contactPerson = ko.observable();
var activate = function (activationData) {
contactPerson(ko.unwrap(activationData.contactPerson));
};
// Make sure required internally defined functions and properties are exported.
self.activate = activate;
self.contactPerson = contactPerson;
};
});
Can anybody help me figure out how to get rid of the transition effect? I can post a video of the before and after if somebody wants to take a look at it.
Composition does not, in itself, cause the effect you are witnessing. It is most likely a CSS issue. We witnessed the same effect many times (particularly when trying to position a wait spinner) and it was always the CSS.
In those cases where we want to "make room" for an incoming view, we set our CSS on the container that will hold the view in such a way as to have that container "expanded" already, so to speak. Think "placeholder," if you will.
If you are in debug mode with caching disabled then the composition binding is much slower than in a built app. You see this effect because of the debug mode and how it is writing and evaluating each binding to the console as well. If you want to disable it turn off debug mode or look at the built version of your application.