356 comments found

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
  • India

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

Laborator

Hi Customer3Sixty,

Can you try this fix and see if it works for you:

.selectboxit {

    span.selectboxit-text {
        white-space: nowrap;
        width: 85%;
        display: block;
    }
}

Arlind

Default-user

Cannot use width as 85% because it may create problem in the different size browsers. There is a class called ‘selectboxit-option-icon-container’ inside the class ‘selectboxit-btn’ which i have removed, as it is not required there. It is working fine now in the different browser sizes.

Now the problem is that, if i have a selectboxit of 150px in width and the data is long than the box, the data gets hide, i want to break the data into the new line.

Laborator

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?

http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Arlind

Default-user

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.

Laborator

In this case: http://cl.ly/Vbsa 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!

Arlind

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
scuty Purchased

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?

Laborator

Hi scuty,

I am not sure about which switches do you mean exactly, can you send me a screenshot and I will send you the fix.

Sorry for the delay of the answer.

Arlind

Default-user
scuty Purchased

Go: Forms > Basic Elements > Switches – Checkbox & Radio > Colors.

For the “Off” state color, in your example, there is a different color setting then the default (gray), but it’s ignoring the setting value for the “Off” state. First I thought it’s a component issue, but it works fine with the default css files of the component. I think you override some style values for the right side of the switch.

Laborator

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?

Arlind

Default-user
scuty Purchased

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

Laborator

I hope so it will :)

  • Bought between 1 and 9 items
  • Has been a member for 4-5 years

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,

Laborator

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):

http://cl.ly/Vbk4

Arlind

  • Canada
  • Has been a member for 2-3 years
  • Exclusive Author
  • Bought between 1 and 9 items

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;}
Laborator

Hi geekybeaver,

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

Arlind

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
mbax Purchased

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!

Laborator

Hi mbax

Thanks for your kind words. I have tried to create the minimal load version of Neon and here is the file hierarchy in JS that is necessary for it to load.

http://cl.ly/VbDI

If you want, I can send you the files to download, just give me the email

Cheers

Arlind

Default-user
mbax Purchased

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

http://jsfiddle.net/xY665/

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

http://imgur.com/ptV0DW9

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

Thanks!

Default-user
mbax Purchased

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

Laborator

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: http://cl.ly/Vd52 other files do not need to change.

Hopefully this will help you.

Arlind

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
mautone Purchased

Hi.

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?
Laborator

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!

Arlind

mautone
mautone Purchased
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; }
Laborator

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:

http://cl.ly/VhE2

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

Hopefully this will help you.

Arlind

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

Hi,

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

Laborator

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.

Art

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
dijichi Purchased

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!

Laborator

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: http://pastebin.com/X7wgJenE

It will generate the exact table as shown here: http://cl.ly/VfSV

Hopefully this will help you somehow.

Arlind

Default-user
dijichi Purchased

This pointed me in the right direction, thanks!

Laborator

You are welcome buddy :)

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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

Thanks

Laborator

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">
    jQuery(window).load(function()
    {
        var $ = jQuery;

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

            var $this = $(this);

            if($this.data('load') && $this.hasClass('loaded') == false)
            {
                $.get($this.data('load'), function(response)
                {
                    $("#panel-1").find($this.attr('href')).html( response );
                    $this.addClass('loaded');
                });
            }
        });
    });
</script>

<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="http://neon.dev/data/ajax-content.txt" data-toggle="tab">Second Tab</a></li>
            </ul>
        </div>
    </div>

    <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>

            <div class="tab-pane" id="tab-2">
                Loading...
            </div>
        </div>

    </div>

</div>

Arlind

Laborator

Here is the code added to PasteBin: http://pastebin.com/gWQM8gHp

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
jlar187 Purchased
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.

Laborator

Hi jlar187

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

assets/js/gsap/TweenMax.min.js

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

Hopefully this will help you.

Arlind

Default-user
jlar187 Purchased

That works. Thanks for the quick reply.

Laborator

Great :).

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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.

Laborator

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

https://github.com/mattbanks/jQuery.equalHeights

To center content inside a div you can use jQuery UI Position plugin: http://jqueryui.com/position/

Here is an example:

$( "#position-element" ).position({
  my: "center",
  at: "center",
  of: "#targetElement" 
});
  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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. http://i.imgur.com/N1P9iov.png
Laborator

Hi swamyveera,

Here is how you can achieve this: http://cl.ly/VgkJ

1. Copy this HTML

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

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

</form>

2. Paste it right before ”.dropdown-menu-list” of the dropdown menu container see how it looks: http://cl.ly/VhF1

Hopefully this will help you.

Arlind

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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! :)

Laborator

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.

Thanks

Arlind

  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 3-4 years

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.

Laborator

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: http://cl.ly/Vk70

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

http://demo.neontheme.com/frontend/main/?rtl=1

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.

Thanks

Arlind

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
jlar187 Purchased

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, );
Laborator

Hi jlar187,

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

Thanks for letting us know.

Arlind

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
jlar187 Purchased

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, );
Laborator

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.

Arlind

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years
Neoos Purchased

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!

Laborator

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: http://documentation.laborator.co/neon/#6_1

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

Arlind

Default-user
Neoos Purchased

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?

Laborator

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 :(

Arlind

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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 ?

Laborator

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: http://cl.ly/VuT9 and replace to your current project, it should now do the trick. It worked for me at least.

Arlind

Default-user

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…

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
abulama Purchased

Hi,

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?

Thanks…

Laborator

Hi abulama,

Sure its possible just set iDisplayLength to -1 Example:

$('#example').dataTable({ 
"aLengthMenu": [
            [25, 50, 100, 200, -1],
            [25, 50, 100, 200, "All"]
        ], 
"iDisplayLength" : -1 
});
  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

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.

Laborator

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)
{
  e.preventDefault();

  // Then use the code to open the popup modal, example:
  jQuery(".my-modal").modal('show');
});

This will works always.

Arlind

by
by
by
by
by
by