Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap

Only two binary genders are presented as options:

Here is the relevant code:

https://github.com/tabler/tabler/blob/568950f0a4a62ed7b6c50da7365047ca439e185d/src/_includes/cards/form-all-elements.html#L175-L184

Allowing a third option along with a input would be more inclusive:

Note: I used the fe fe-more-horizontal icon

This tends to be represented in data as:

{
  gender: 'male' | 'female' | 'unspecified',
  genderTitle: string | null,
}

Which can be presented as:

let genderStr = user.genderTitle || user.gender

If you are using pronouns in your content, a good way to handle it is:

const PRONOUNS = {
  male: 'he',
  female: 'she',
  unspecified: 'they',
};

let pronoun = PRONOUNS[user.gender];

By making this change, you set a good example for the community

I'm working of new version of Tabler, I am at the stage of choosing a datepicker. Which one do you recommend?

Requirements:

• a lot/no dependency
• customizable
• many features (datepicker, timepicker, date/timepicker, etc)

I am asking for suggestions in the comments

Hey,

the Jekyll dependency makes this project very hard to actually use in a real project.

Are there any plans to make this CSS and HTML available as a standalone version?

Describe the bug

When browsing the form elements demo page, the checkmark in the center of the radio button is not perfectly centered.

It seems too far on the right and to the bottom.

Device

• Browser: Chrome v104
• OS: Windows 11
• Screen size: 3840 x 2560, 150%

To reproduce

Steps to reproduce the behavior:

1. Go to form elements
2. See error

Screenshots

In order for developer and designer to collaborate efficiently, I think we want to have a design file in whatever vector format (recommend .sketch). Thanks!

Can you give any direction on how to integrate Tabler with the Rails Asset Pipeline? Tabler is using requirejs which i ran into some issues with the asset pipeline in rails.

What js file are absolutely required? I think anyone integrating tabler with any web framework will have the same question actually.

Fixed global variable --#{$prefix}card-bg from $dark to $dark-mode-dark. This would also fixed the issue with .btn also, because it effect same underline when switching to dark theme.

Is there any way to obtain this dashboard in pure html/css without the need for everything else required to install this? I love the look of this dashboard but calling it an html dashboard is not exactly correct. HTML does not have ruby requirements.

Showing these Errors:-

/Library/Ruby/Gems/2.3.0/gems/bundler-1.16.6/lib/bundler/runtime.rb:313:in check_for_activated_spec!': You have already activated public_suffix 3.0.3, but your Gemfile requires public_suffix 3.0.2. Prependingbundle execto your command may solve this. (Gem::LoadError) from /Library/Ruby/Gems/2.3.0/gems/bundler-1.16.6/lib/bundler/runtime.rb:31:inblock in setup' from /Library/Ruby/Gems/2.3.0/gems/bundler-1.16.6/lib/bundler/runtime.rb:26:in map' from /Library/Ruby/Gems/2.3.0/gems/bundler-1.16.6/lib/bundler/runtime.rb:26:insetup' from /Library/Ruby/Gems/2.3.0/gems/bundler-1.16.6/lib/bundler.rb:107:in setup' from /Library/Ruby/Gems/2.3.0/gems/jekyll-3.8.4/lib/jekyll/plugin_manager.rb:50:inrequire_from_bundler' from /Library/Ruby/Gems/2.3.0/gems/jekyll-3.8.4/exe/jekyll:11:in <top (required)>' from /usr/local/bin/jekyll:22:inload' from /usr/local/bin/jekyll:22:in <main>' npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] jekyll-serve:jekyll serve --livereload` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] jekyll-serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/junaidchoudhary/.npm/_logs/2018-10-13T08_10_31_638Z-debug.log ERROR: "jekyll-serve" exited with 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] serve: gulp build && npm-run-all --parallel gulp-watch jekyll-serve npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/junaidchoudhary/.npm/_logs/2018-10-13T08_10_31_785Z-debug.log

There were quite a lot of PRs in the past, which shipped changed lock files.

Those were mostly introduced by unexperienced contributors, but considering the popularity of Tabler and the amount of potential targets, this could be a real security risk: https://snyk.io/blog/why-npm-lockfiles-can-be-a-security-blindspot-for-injecting-malicious-modules/

There is a simple way to prevent that, which I am using in all my projects: a workflow that checks the PR for changed lock files and fails directly if a changed lockfile was included. The only persons allowed to push changes for those files are @codecalm and @dependabot (see e.g. #1296).

The used workflow is: https://github.com/xalvarez/prevent-file-change-action

What do you think @codecalm about the idea in general?

~~This PR is a draft for now, because I am not sure about the required token permissions. I posted a question in the action repo and will update the workflow file accordingly if there are more required.~~

is there any plan for settings page ?

• personal info
• data & privacy
• security
• people & sharing
• passwords ...
• payment and subscription...

@codecalm

Sorry for opening this like a BUG, I know that Tabler it is not guilty, but at least I have a bug and need help...

I started to use tabler into Angular 14/15, basically using the css, instead of pure bootstrap (based on demo). Everything works, except dropdown (probably because of href="#), I tried following all kind of tips and nothing works. Anybody is using tabler into Angular? If yes has solved this problem? Help me please

I've seen that there was an old repo of a tabler version for Angular, probably the team decided fucus first on the main repo.

Bumps json5 from 2.2.1 to 2.2.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

I created a new modal that serves as a loading screen, as I could contribute to the project and officially add it to the Tabler package in Modals

https://preview.tabler.io/modals.html

Preview

In the dark-mode, if there is a element with .bg-light AND .text-dark

( mine for example is: <a href="#" class="badge rounded-pill bg-light text-dark text-decoration-none">Reset</a> ) than you can't see the text, because bg-light is "dark" in dark-mode. Dark text with dark background is not readable.

to fix this, i added

@include dark-mode { .bg-light.text-dark { color: var(--tblr-body-color) !important; } }

to my own css.

But i think it is better, if YOU change this.

Describe the bug

bug when i add nav-item class inside dark mode toggle div switch

sorry for my bad english

Device

• Browser [Google Chrome]
• OS: [Parros Os]
• Screen size [1366 x 768]

Screen Records

https://user-images.githubusercontent.com/100203867/208287920-5e21c95d-0cbf-44c8-ab51-1041d2751d0b.mp4