Laborator supports this item


This author's response time can be up to 2 business days.

736 comments found.

I am using selectboxit for select dropdown, but the option data gets hide when the option text is long.

The reason why it breaks because the divs are floating.

The only way is to make these div containers display: table-cell and the text will not hide, but whenever the text exceeds the limit of container, it may break the structure of the grid and overflows.

Do you prefer using ”...” ellipsis when the text is too long?


Yes, i use ellipses, but in dropdown i have to show full text. When the text increases, the text should continue in next line with proper line height.

In this case: when user opens the dropdown menu text will be visible, otherwise in the default selection I think its not a big problem if you overflow the text with ellipsis, just a though.

Dont have an idea for other solution regarding this plugin!


Hi there! There is a problem with the bootstrapSwitch in “Switches – Checkbox & Radio”, the off color does not change, looks like there is a problem in you css declaration.

Do you think we can get a fix?

If you want to change the color for the Off state you can do this simple:

.has-switch span.switch-info.switch-right {
background-color: #FFF;
color: #000;

Is this what you wanted?


I’ll try it tonight. But I think that might be it.

I hope so it will :)

Hi, thanks for a great template; I am loving it so far. I just had a question, which I feel should be straightforward, but I am still a beginner with css.

My question is: what is the recommended way to increase the height of the header bar, so that the main page contents starts where the header ends? I am using the “page-container horizontal-menu” classes.

Thanks for your help,

Hi StaticNomad,

To increase the general height of Header sidebar you must play with padding values, for example the current padding for Logo element is 20px top, 20px bottom so if you are going to increase the padding of header here is the sample CSS code:

.page-container.horizontal-menu header.navbar .navbar-brand,
.page-container.horizontal-menu header.navbar .navbar-nav>li>a,
.page-container.horizontal-menu header.navbar .navbar-inner>ul>li#search .search-input, 
.page-container.horizontal-menu header.navbar>ul>li#search .search-input,
.page-container.horizontal-menu header.navbar .navbar-inner>ul>li#search button, 
.page-container.horizontal-menu header.navbar>ul>li#search button,
.page-container.horizontal-menu header.navbar ul.nav>li>a, 
.page-container.horizontal-menu header.navbar ul.nav>li>span,
.page-container.horizontal-menu header.navbar ul.nav>li.sep {
    padding-top: 30px;
    padding-bottom: 30px;

.page-container.horizontal-menu header.navbar ul.nav>li.dropdown>a {
    margin-top: 30px;

It will increase the header height to look like this (with the given parameters):


Noticed a slight bug? In a modal I added in the date picker field however on select/focus the datepicker popup window shows behind the modal grey div and is not accessible.

A quick fix for anyone having this issue is to throw this into your custom file..

.datepicker{z-index:1151 !important;}

Hi geekybeaver,

Thanks for your suggest, I have added this fix which will be available in the next update.


Thanks for this awesome theme. Im using it in a rails app but am lost in all the JS and placing all the JS code in my /app/assets/javascripts folder didnt work

I only need the code which controls the sidebar (enabling dropdowns for subnavs and the show/hide toggle button on mobile devices)

Would you mind helping me find where the code that controls is so I can pull it out and place it somewhere else in my project so the sidebar animations will work


Thanks Arline, can you help me isolate the code that controls the sidebar in addition to the files? So far I have extracted what you see here

and it allows the submenus in the sidebar to open but not close. Also when you resize your screen from desktop to mobile or visa versa the text disappears as shown here

Can you help me find the code which allows you to close submenus and keep text visible as you resize your window?


Also, when there are two dropdowns in the sidebar they dont open, it only works when there is only one subnav list in the sidebar

Hi mbax,

I suggest you to keep all the contents of neon-api.js so it wouldn’t cause any issues.

I have edited the neon-custom.js and this would be the minimal version: other files do not need to change.

Hopefully this will help you.



First of all, i simply love the theme. I tried many others, but keep returning to this one.

I have found some issues with the neon-form.css file. My developer tool keeps telling me this
Invalid CSS property declaration at: *
It does that 25 times, on different lines. I search google for it, but can’t figure out if i just can remove the * sign. Do you have any fix for that?

Hi Mautone,

Thanks for your compliments we are happy to hear them!

About the CSS inconsistencies we use LESS generator to compile the CSS so during the LESS validation I get no errors, its the engine of LESS that generates CSS, so is it possible to know the exact line where the error is thrown?

Thanks again!


It will not allways show on my developer tool, but one line is 148. I don’t understand why, because its only used for the background : ‘color’; So it looks like this
selector { *background: #ccc; }

This is because of some older browser hacks used in our CSS, anyway I have used RegExp to replace the :

*background... -> background...

Here you can download this file:

This is not a big issue, browser CSS parse simply ignores invalid CSS properties.

Hopefully this will help you.



Can the single license be used to use the theme in an admin page of a wordpress theme which will be sold ?

Hi themeyard, the single license can be used only for personal purpose and not for re-selling, for commercial use you need to purchase the extended license.


Hi, how can I show datatables toolbar? When I try to enable it in this theme it seems to set display: none for the whole header. I need a refresh button!

Hi dijichi,

The default configuration for DataTable is this:

jQuery.extend( true, jQuery.fn.dataTable.defaults, {
    "sDom": "<'row'<'col-xs-6 col-left'l><'col-xs-6 col-right'f>r>t<'row'<'col-xs-6 col-left'i><'col-xs-6 col-right'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
        "sLengthMenu": "_MENU_ records per page" 
} );

Which can be found on this file: assets/js/dataTables.bootstrap.js

To modify the toolbars (header and footer) edit this field:

"sDom": "<'row'<'col-xs-6 col-left'l><'col-xs-6 col-right'f>r>t<'row'<'col-xs-6 col-left'i><'col-xs-6 col-right'p>>" 

So when you initialize it just do this basic call:

It will generate the exact table as shown here:

Hopefully this will help you somehow.


This pointed me in the right direction, thanks!

You are welcome buddy :)

Hi there Is there a way to make the tabs ajax based? meaning, loading the tabs via ajax once they are clicked?


Hi swamyveera

Yes it is possible, simply add events to tab titles and when they are clicked you can load it.

Here is an example:

<script type="text/javascript">
        var $ = jQuery;

        $("#panel-1").on('click', '.nav-tabs a', function(ev)

            var $this = $(this);

            if($'load') && $this.hasClass('loaded') == false)
                $.get($'load'), function(response)
                    $("#panel-1").find($this.attr('href')).html( response );

<div class="panel minimal minimal-gray" id="panel-1">

    <div class="panel-heading">
        <div class="panel-title"><h4>Minimal Panel</h4></div>
        <div class="panel-options">

            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-1" data-toggle="tab">First Tab</a></li>
                <li><a href="#tab-2" data-load="" data-toggle="tab">Second Tab</a></li>

    <div class="panel-body">

        <div class="tab-content">
            <div class="tab-pane active" id="tab-1">
                <strong>Rank tall boy man them over post now</strong>

                <p>Boy desirous families prepared gay reserved add ecstatic say. Replied joy age visitor nothing cottage. Mrs door paid led loud sure easy read. Hastily at perhaps as neither or ye fertile tedious visitor. Use fine bed none call busy dull when. Quiet ought match my right by table means. Principles up do in me favourable affronting. Twenty mother denied effect we to do on.</p>

                <p>Sing long her way size. Waited end mutual missed myself the little sister one. So in pointed or chicken cheered neither spirits invited. Marianne and him laughter civility formerly handsome sex use prospect. Hence we doors is given rapid scale above am. Difficult ye mr delivered behaviour by an. If their woman could do wound on. You folly taste hoped their above are and but.</p>

            <div class="tab-pane" id="tab-2">




Here is the code added to PasteBin:

Hello there, great theme overall. Just having a javascript problem that is preventing the dynamic elements from working (javascript can’t fully load). I’m getting an error that: Uncaught ReferenceError: Sine is not defined This is a Rails app and I’m loading the minimum .js files necessary: //= require jquery-1.11.0.min //= require jquery-ui/js/jquery-ui-1.10.3.custom //= require bootstrap.min //= require ie8-responsive-file-warning //= require joinable //= require resizeable //= require neon-api //= require neon-custom //= require_tree .

I just downloaded the latest version to ensure that was not the problem. same error.

Hi jlar187

Please include this javascript file in order to have this issue solved:


The object Sine is part of GreenSock API that creates custom animation easing.

Hopefully this will help you.


That works. Thanks for the quick reply.

Great :).

HI there again, How can i make two panels the exact height even though the content is of different length? To be precise, i have two panels, but one panel has a little lesser content than the other and i would like to make that panel same height as the bigger panel.

and also, if i have a grid, for example col-md-3, how can i center it ? Center this Div

How can i center the col-md-3? By default it is to the left of the screen.

You may try using this jQuery plugin which makes two divs at the same height:

To center content inside a div you can use jQuery UI Position plugin:

Here is an example:

$( "#position-element" ).position({
  my: "center",
  at: "center",
  of: "#targetElement" 

Hi there again, is it possible to have a form inside the top drop down menu?

I tried to add a form and menu disappears when the form is focused, i guess it is because of the menu’s behavior. I would like to add a log in form to the top drop down menu.

trying to add a simple form to the drop down menu at top-right.

Hi swamyveera,

Here is how you can achieve this:

1. Copy this HTML

    .top-dropdown-form .form-group {
        padding: 10px;
        border-bottom: 1px solid #EEE;
        margin-bottom: 0;
<form class="top-dropdown-form">

    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search anything..." />


2. Paste it right before ”.dropdown-menu-list” of the dropdown menu container see how it looks:

Hopefully this will help you.


I know, I know, this may not be the best place, but not sure who/how to contact. I love your themes – and we’ve purchased Neon in hopes of integrating it to our app … however, need some help and direction – how to best integrate, setup with our database, etc etc. SO, we’re hoping that you guys – or people who you know are experts in implementing your designs – can help … custom designing and coding needed asap. Can you let me know how to contact you directly? THANKS! :)

Hi bobwoehrie

Firstly thank you for your kind words and purchasing Neon theme.

We are currently busy working on other projects which actually have a deadline and we are not able to take any custom work for now, I am sorry.

As you know, Neon is HTML based theme, so you can optimize to fit to your current framework engine as you want. The structure is easy to call, and to extend the design just add your custom CSS to assets/css/custom.css or another file you may include via <link> tag.



Hi!, I’ve always loved this theme, just couple of presales questions: Is Less or Sass files included ? Is RTL supported in the front end too? Is it easy to globally increase the font size?

Thanks a lot.

Hi vox2day

Firstly sorry for the delay of answer as we were not in the office during the weekend.

1. It includes the LESS files, see the screenshot of files structure:

2. RTL is supported in Frontend too, see the demo:

3. Since it is less compiled, you can increase the fontsize globally by changing values in assets/less/bs-less/variables.less and assets/less/neon-less/variables.less

There could be any static font size that is set but mostly there are referenced via font size variables inside these files.



Just FYI, not sure if these are typos or compile errors in neon-core.css, but these cause SASS compile/minify to fail due to invalid CSS.

./neon-core.css:11923:  -webkit-transform: scale(0.8, );
./neon-core.css:11924:  -ms-transform: scale(0.8, );
./neon-core.css:11925:  transform: scale(0.8, );
./neon-core.css:12160:  -webkit-transform: scale(0.8, );
./neon-core.css:12161:  -ms-transform: scale(0.8, );
./neon-core.css:12162:  transform: scale(0.8, );

Hi jlar187,

Yes we have detected this, we are going to release new fix for this.

Thanks for letting us know.


These too

./neon-core.css:11956:  -webkit-transform: scale(1, );
./neon-core.css:11957:  -ms-transform: scale(1, );
./neon-core.css:11958:  transform: scale(1, );
./neon-core.css:16524:  -webkit-transform: scale(0, );
./neon-core.css:16525:  -ms-transform: scale(0, );
./neon-core.css:16526:  transform: scale(0, );
./neon-core.css:16632:  -webkit-transform: scale(0, );
./neon-core.css:16633:  -ms-transform: scale(0, );
./neon-core.css:16634:  transform: scale(0, );
./neon-core.css:21599:  -webkit-transform: scale(0, );
./neon-core.css:21600:  -ms-transform: scale(0, );
./neon-core.css:21601:  transform: scale(0, );
./neon-core.css:21651:  -webkit-transform: scale(1, );
./neon-core.css:21652:  -ms-transform: scale(1, );
./neon-core.css:21653:  transform: scale(1, );
./neon-core.css:22864:  -webkit-transform: scale(1.15, );
./neon-core.css:22865:  -ms-transform: scale(1.15, );
./neon-core.css:22866:  transform: scale(1.15, );
./neon-forms.css:7166:  -webkit-transform: scale(1.15, );
./neon-forms.css:7167:  -ms-transform: scale(1.15, );
./neon-forms.css:7168:  transform: scale(1.15, );
./neon-theme.css:5194:  -webkit-transform: scale(0, );
./neon-theme.css:5195:  -ms-transform: scale(0, );
./neon-theme.css:5196:  transform: scale(0, );
./neon-theme.css:5245:  -webkit-transform: scale(1, );
./neon-theme.css:5246:  -ms-transform: scale(1, );
./neon-theme.css:5247:  transform: scale(1, );

Once it is fixed for one issue, it will be counted for other issues too, so there will not be any problem with scale(1, ); transformation.


Quick question: The chat API looks particularly interesting. Can it be used as part of the main page as well or only integrated via “sidebar” resp. widget? We need to implement a chat in the main part of the website.

Thanks in advance!

Hi Neoos,

The Chat API works independently with any page, you just have to add the html structure to the .page-container element, directions for this are written here:

Then you can include whatever you want, it should not be any problem.


OK, thanks for the response. Just to be clear: The chat is always on the right (toggled in/out), but cannot be part of the main page section? Is that correct?

Aha, I now have the idea what you want, but unfortunately this is not possible, because the left sidebar is only reserved for the Menu items (you can add other items if you style them independently) but the Chat comes as a component and it requires that structure. I am sorry for this :(


A Question about the sidebar menu …

I,m actually using your theme for a Project and i heavily use ajax…

Undercertain circumstance, the side-bar menu would have to change tu adjust some option… There’s something in your api to help change the menu and keep opened sub menu there or i have to remove completely the menu in ajax, reload it, call the setup_sidebar_menu() function and find a way to re-open my menu myself ?

Hi davidfredette,

Also other users have this issue, here is quick fix for you.

I have modified the neon-api.js file so please download the latest version here: and replace to your current project, it should now do the trick. It worked for me at least.


I think you misunderstood my problem… Let’s say in the left menu i got a section with sub menu… If the user is accessing the page for the first time, in that menu, it will have only the option “Create new thing” ... But when he create his first thing, i’ll have to add another options to that menu… Something like “List my things”, “Modify my thing” and so on…

I already have all my menu section in sub-file that can adjust from context…

Let’s say i have a menu “things” that can get 3 submenu items “add”, “list” and “modify” depending on context… After doing an action on my web app, if i call in ajax to reload the menu “thing” to get the new context, event for submenu opening aren’t bind… And if i call the setup_side_bar() again, the other menu already present got 2 event for their click and so on…

So there’s a way to unbind and rebind event on the main menu item to make it work correctly after updating menu content ?

If you already got something, cool ! If not, i’ll work with another approach…


when I add the code for “Table with Column Filtering” it always shows only 10 entries at beginning. I want to, that it shows all entries at beginning. Is it possible?


Hi abulama,

Sure its possible just set iDisplayLength to -1 Example:

"aLengthMenu": [
            [25, 50, 100, 200, -1],
            [25, 50, 100, 200, "All"]
"iDisplayLength" : -1 

Hi! I’m having issue displaying modal dialog when using in conjunction with datatables. Model dialog doesn’t show up. If I disable the javascript of the datatable it works. Can you send me an example of how to implement this? Thanks.

Hi jliew1975

The problem with this is pagination of data tables, so you should implement “live” events on data tables, so for example you have a link inside a column in data table with this class “modal_opener” then to always have it working you should implement this code:

jQuery(".your-table-container").on('click', '.modal_opener', function(e)

  // Then use the code to open the popup modal, example:

This will works always.