Competing Styles with Bootstrap Themes?

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Competing Styles with Bootstrap Themes?

Jimmie Fulton
Dandelion Core/Datatables 1.0.0/1.0.1, Recent Thymeleaf, multiple browsers

When I apply dt:theme="bootstrap2|3" to a table, I get a strangely formatted pager as well as multiple sort icons over the same location.  I'm using a fairly basic setup in an example application with no bundle overrides.  I haven't defined any properties files, either.  I'm only adding the theme on the table; no bundle-includes at the top.

The assets that are included:
<link rel="stylesheet" href="/dandelion/bootstrap3/css/bootstrap.css"></link>
<link rel="stylesheet" href="/dandelion/datatables/css/jquery.dataTables.css"></link>
<link rel="stylesheet" href="/dandelion/datatables/features/themes/bootstrap3/css/dataTables.bootstrap.css"></link>

<script src="/dandelion/jquery/js/jquery.js"></script>
<script src="/dandelion/bootstrap3/js/bootstrap.js"></script>
<script src="/dandelion/datatables/js/jquery.dataTables.js"></script>
<script src="/dandelion/datatables/features/themes/bootstrap3/js/dataTables.bootstrap.js"></script>
<script src="/dandelion-assets/0b5736cbe0af9617cec9f86f110c1fa8/313a215184bae0a0689e47898791574a/js/dandelion-datatables-91823f9343dbbdf5e32b5bfe08e76566.js"></script>

If I add:
ddl:asset-css-excludes="datatables"

everything renders correctly.  I'm guessing I'll be able to fix this by recreating the bundle graph and excluding the portion causing the problem, which I'll start doing now...

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Competing Styles with Bootstrap Themes?

Jimmie Fulton
I've solved my problem temporarily as so:

dandelion/dandelion.properties:
asset.css.excludes=datatables

dandelion/datatables/datatables.properites:
global.css.class=table table-striped
global.css.theme=bootstrap3
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Competing Styles with Bootstrap Themes?

Thibault Duchateau
Administrator
Hi Jimmie,

This is actually the way to solve this issue. I agree this is annoying, but I prefer to avoid pre-configurations as much as possible and leave the final decision to the developer.

I'm also excluding assets in the official samples, see for example https://github.com/dandelion/dandelion-datatables-samples/blob/1.0.1/datatables-thymeleaf-themes/src/main/webapp/WEB-INF/views/bootstrap3/bootstrap3-activation.html#L21.

Regards,
Thibault.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Competing Styles with Bootstrap Themes?

Jimmie Fulton
Is there a concept of an aggregating bundle being able to exclude (override) what's being brought in through the graph.

Something like (two possible solutions in single example):

{
    "dependencies": [ "bootstrap3", "datatables" ],
    // One way
    "excludes": {
        "css": { "datatables" }
    }
    "assets": [
        {
            "name": "bootstrap3-theme-js",
            "version": "1.10.7",
            "type": "js",
            "locations": {
                "jar": "dandelion/datatables/features/themes/bootstrap3/js/dataTables.bootstrap.js",
                "remote" : "//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"
            }
        },
        {
            "name": "bootstrap3-theme-css",
            "version": "1.10.7",
            "type": "css",
            "locations": {
                "jar": "dandelion/datatables/features/themes/bootstrap3/css/dataTables.bootstrap.css",
                "remote" : "//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css"
            }
            // Another way
            "overrides|replaces|exclude": { "datatables" }
        }
    ]
}

?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Competing Styles with Bootstrap Themes?

Jimmie Fulton
Perhaps another option is to have the themes not depend on "datatables", and they would redefine the assets that are required.  If a theme is specified, "datatables" is no longer added as a dependency; only the theme, which has all it's assets defined.  

Another way to think about it is that there are multiple themes, and "datatables" is just one of them (and the default).  If a different theme is specified, then that one is used, and the default is not included.  Only one theme can be in play at once.  Does that make sense?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Competing Styles with Bootstrap Themes?

Thibault Duchateau
Administrator
Thanks for these proposals Jimmie. I'm still thinking about them and I get back to you.

Thibault.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Competing Styles with Bootstrap Themes?

arnaldop
Thibault,

I'd like to suggest that you add this to the list of known issues in the docs.

I spent about 2 hours tracking this down, and was about to submit a bug report when I found this thread.

The fix is simple, and I understand your position of letting the developer decide which library to disable, and I don't disagree. I just wish this issue was documented as it would saved me a bit of time.

I see this as a known issue with a known solution.

Hope this helps!

Thanks!
Loading...