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
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'm trying to make a two-lines menu with bootstrap 4, and I found some examples on the web:
https://www.codeply.com/go/DpHESPqZsx
https://www.codeply.com/go/cxXqBnGrPx
In the first example they use "div class='navbar'" to create the menus.
<div class="navbar">...</div>
In the second example they use "nav class='navbar'" to create the menus.
<nav class="navbar">...</nav>
Which is the correct way? Which one should be used?
I have another question. Why do they NOT use the bootstrap grid with the rows and columns? When should you use it?
Thank you very much
Div and nav are similar element, in terms of what they do. However, nav is better in this situation because you want to have semantic markup. It is because of SEO and more readable for developers.
And why they are not using grid is probably because they haven't implemented it yet and should be coming. Their grid system is done with flex currently, but should change. And CSS Grid does not work that great with IE11.
You should use Grid when you feel that it will be easier to structure your site. It's a great tool, and combine it with Flex is so easy and comfortable
The difference is that a div has no meaning and a nav Element has a semantic meaning (indicating that there is a navigation). You can remove every div and span from a website and have no difference about the semantic structure of a page, every other element has a meaning: For example, states that there is the main content, says here is the header-part of the site.
These parts tell for example search engines what's on a site. So if you have the text "Stackoverflow" in your Element somewhere, google (and other search engines) know that you have a stackoverflow link in your navigation. If you have it in your Tag, you probably have a text about stackoverflow.
Keep in mind: These are some simplified examples.
The html5 nav tag has semantic meaning.
Please follow the Bootstrap docs. The grid (row>col) should not be used in the Navbar as it's not a supported component. Using the grid inside the Navbar will through off alignment, spacing and the responsive behavior controlled by the navbar-expand-* classes. I'm the author of both Navbar examples from Codeply you posted.
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").
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.
I have an article set up in Joomla that displays Terms and Conditions for the site users. I would like this to show up in a shadowbox when a user clicks a link. Here is the current anchor text example:
Terms and Conditions
This works out great for displaying the entire web page, but what I would like to do is just display the article text on the page (plain with a white background). Is this in someway possible with shadowbox? If so, how?
If I'm understanding you correctly - you want to suppress the modules and other periphery from your 'page' when it is loaded in the shadowbox.
Add ?tmpl=component to the url of your link.
You can do this with a div element and css shadow effect.
How to show/hide div is explained here:
http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/
How you can add shadow is explained here:
http://placenamehere.com/article/384/css3boxshadowininternetexplorerblurshadow/
I believe there are some components to do this - but you may have to get creative to do it without pulling the whole page with an a href tag.
In the database there's a particular area that holds that specifically and you could write a little query to just pull that information specifically and put it in the shadowbox, but what that query would look like I'm not sure.