I would like to replace the style of custom table.
By using
fooTable.setStyleName("v-tableII");
produces the following result
<div class="v-table v-table-v-tableII v-tableII" ...
(grrr)
It would be important to replace the 'v-table' style because it belongs to another customized table.
Is there any way using different styles for different tables ?
(The help recommends to using addStyle, but the original 'v-table' style is tailored to another custom table )
Thanks for answers in advance.
Cs
This is how vaadin works and you will always have that. You are using the correct option fooTable.setStyleName("v-tableII") but have you remember to add this to your css file? In some cases you might have to set !important on some of the options.
Related
I can see that you can set themes for tabulator tables, from the documentation it states
"To use one of these simply include the matching CSS file instead of the default tabulator.css"
What happens if I want to have 3 tables each with a different theme?
I can see it's possible because the documentation page does it but I can't see how. Any guidance would be greatly appreciated
This is not possible out of the box because each theme's CSS uses the same CSS selectors for the tables elements so they will all fight to style each of the tables.
I would also question why this would be necessary, generally speaking putting tables of multiple themes on the same page would create quite a jarring experience for your users and i would not recommend it.
That being said, the examples page achieves this by updating the style sheets for each of the themes to look for a specific table id rather than the generic .tabulator selector.
So anywhere in the stylesheet that .tabulator is referenced:
.tabulator .tabulator-header.tabulator-header-hidden {
becomes for example:
#bulma-theme-table .tabulator-header.tabulator-header-hidden {
You would also need to prefix the generic selectors later down the stylesheet, so for example:
.tabulator-row.tabulator-moving {
would become:
#bulma-theme-table .tabulator-row.tabulator-moving {
I have a question about paginationElement in Tabulator.
As per tabulator documentation, i created a DIV and used paginationElement in Table setup to render the paginator in the DIV. Well, it works. But with a drawback, no styling works, no colors, no highlighting of current page. So it is kinda inconvenient.
Is there a way to resolve this?
Otherwise, i am really happy with Tabulator! Thank you for the great work!
Cheers
You might have to style the pagination footer by css as the location of it has been changed by paginationElement.
This is because all of the table styling is based around the pagination element being inside the table.
Moving it outside the table will mean you will need to apply the styles yourself. The classes that denote that you are on the current page etc will still be applied, you just need to tell the browser how to style them.
The Styling Documentation contains more information on the classes used by tabulator and how to style the table
I really hope I'm making sense with this one.
I'm trying to create a widget from a custom webpart that I created. It's nothing special at all as you can see:
<h3>Header</h3>
<p>Intro Copy</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
I now want to be able to create a widget from this and create new fields that will be used to populate the above DOM. What do I need to do in order or do this.
In an example I saw for the demo site, they populated the bg image with:
style="background-image: url('{% ResolveUrl(PathToImage) %}');"
That was however done on the front facing part of the CMS and I'm trying to do it within the solution.
Any thoughts?
It's all in your layout or code behind. Your layout can have that code (but in ASCX format) and it will work just fine. OR you can add literal controls to the page based on the fields and what the user has entered.
Doing it in your layout is more restrictive and specific to that one application but allows you to use multiple new webpart layouts. Using the code approach allows you to be more dynamic but doesn't allow you to use the built-in layouts of the webpart/widget.
I would just use the Transformable Web Part in the Marketplace...it does exactly what you want it to do. Create a custom web part, and you use a Transformation to style the Web Part Properties into the DOM elements.
https://devnet.kentico.com/marketplace/web-parts/transformable-web-part
Reason why i built it!
I've done something similar in the past, using what I call generic web parts. I wrote a blog on it last year - it might help out with what I think you're trying to achieve:
http://www.mattnield.co.uk/Posts/Show/generic_web_parts_for_rapid_development
Why are you choosing to go with Widgets? If you want to access any field inside the transformation within the web part it's feasible by the same way as you define in inbuilt web parts.
If you want to perform any function like onload etc. then you need to use kentico API to access any data.
If you provide more insight on what is required, I can help further
Setup:
I am using Orchard CMS 1.6.
I have a site where I need to be able to set the background color of the whole page. Ie, I need to style the body tag.
I could use the LayoutSelector module and have distinct layouts. However, the only difference in each layout is that the background-color rule for the body tag is different. So it seems a very un-dry way of doing things.
I can't find any way to make Vandelay.Classy add a distinct id or class to the body tag (it adds, as I understand it) an id or a class to the outer tag of a content type. In my case, that isn't the body tag.
So that is no good, I really do need to customize the body tag.
How to do this?
Note:
I need 3 different background colors. I also have a two column layout and a three column layout. [I use (a modified version of) the layoutSelector module to achieve this.] So to have 3 different colors of background, and I used layouts to achieve this, I would need 6 different layouts: TOTAL overkill.
There must be a better way...
From any cshtml file, you should be able to access the Layout shape. From pretty much anywhere else, you can still get to the Layout shape through WorkContextAccessor. Once you have a reference to the Layout shape, you can do Layout.Classes.Add("the-class-you-want").
Is there a way to set Modx Revolution to output HTML <br>s using the :nlb2r output filter rather than XHTML <br />s through a system setting?
Just create custom snippet - http://rtfm.modx.com/display/revolution20/Input+and+Output+Filters+%28Output+Modifiers%29 , as example:
<?php
$mode = !empty($options) ? true : false;
return nl2br($input, $mode);
This filter does not depend on the system settings, he is located in the code modx- https://github.com/modxcms/revolution/blob/develop/core/model/modx/filters/modoutputfilter.class.php#L431 so you need to create custom snippet.
Output filters are hard coded.
You could always:
SomeElement:nl2br:replace=`<br />==<br>`
Not really sure you want to drop the / as HTML5 simply ignores it. But any case, replace will serve you well.
Check out chapter 7 of my book, it has all of the filters and examples on how to chain them.
You should avoid using snippets and filters are much as you can. They increase the parsing-time.
There's a setting for what you ask
Search for tiny.element_format and change it to html.