142 comments found.
Hi, ShaMSofT,
On small browser screen/mobile devices scroll in embedded items in sidebar does not work properly – they do not expand. However if the main page is long enough, it works fine. Screenshot: http://yadi.sk/d/Of6_W9ZwDq62dHi,
Which version of FLATY do you use? We had this bug in previous versions. If you are not in version 2.2, please update.
$('#id').val('').trigger('chosen:updated');
I’ve just test this code for multiple one and it’s work!
Sorry, I meant it doesnt work for a sticky form i.e. a filter. It you select a dropdown option and filter it the option should be selected on reload but then after clicking reset the text clears but the value is still set if you process again
Sorry I don’t understand your mean. If you can provide a html file or image.
Hi, I managed to get it sorted. I had to remove the selected attributes from the options and not just the chosen output
Using the horizontal menu. How can I show the ‘mini’ menu button when below 980px? It currently disappears altogether.
Steve.
See this page: http://themes.shamsoft.net/flaty/ui_horizontal-menu.html
This will show toggle button when browser size is below than 980px
I didn’t explain correctly.
Yes that works but not when I set:-
.container { /min-width: 100%;/ min-width: 1200px; }
Steve
I did this too, but it’s work fine. If you can send me a html/css file to inspect it
Yes does work, without my container setting, but I’ll explain further.
Now I have container at 1200px I need navbar to be centered so I do this:-
...And menu ‘mini’ doesn’t appear.
Steve.
In fact the 1200px container setting breaks the responsiveness as everything gets chopped off on the right hand side as the browser window is made smaller.
Steve.
As I write it before, I test it with 1200px too, in FLATY v2.2. Which version do you use? Could you provide me a html page sample?
2.2. I will prepare an example.
Panic over! The answer was to take out the line flaty-responsive.css
.container { /min-width: 100%;/ }
Steve.
Next question is …. How make the dropdown menus on the navbar close when clicking outside the navbar. They stay ‘sticky at the moment.
Stave.
You can use default bootstrap dropdown for this purpose:
1) Open “ui_horizontal-menu.html” and add ‘data-toggle=”dropdown”’ to “a.dropdown-toggle” tags.
2) Open “flaty.js”, find “Horizontal menu dropdown” and remove/comment next click handler on ’#nav-horizontal a.dropdown-toggle’
Hi author,
At first place, I want to let you know that this admin theme is, by far, the best one. I am so glad to have acquired it.
I want to ask to you something about the “affix” layout. Since this template is based on bootstrap 3, I would like to include this component in one of my pages applying this template, but for some reason there is not an example of it integrated with this theme.
However, you can tell me “try yourself coping the example from bootstrap website”. That’s ok, but for some reason, when I copy the affix code, the admin template layout get broken and it does work as expected (internal links do not redirect the focus). Not the same result when I test it with a standalone html file. This tell that the affix code copied is correct.
I will keep investigate for a possible solution to make use of affix component. I just want a hand to guide me at the right direction with this.
Keep doing excellent works like this, I will follow up your creations 
Manfred
Well well, after waste my afternoon finding the cause for this problem, I have come to the conclusion that the design problem resides at admin custom bootstrap css file. I do not who to explain the affix style behavior, so, if you have time to test it, it will be great 
Ok, I’ll test it soon
I’ve made a sample affix. Send me an email (from my profile page’s contact form) and I’ll send it to you
Hi,
Not sure if this is a bug or what is happening but the chosen selects are acting differently when assigned different names or ids. It will behave differently if I use or don’t use an id. I am not added or changing the style in any manner
Hi,
I have assigned ID and NAME to chosen select and everything was ok!
Thanks,
Have you tried two chosens with one having ID and NAME and the next just having NAME?
I’ve just did it and could not see any problem. If you want, you can email me an example.
I can’t seem to replicate it in the raw flaty theme, it must be something overwriting it, but by adding and ID it becomes ok
Hi, ShaMSofT!
When I use default date picker (from the pink box on this page http://themes.shamsoft.net/flaty/form_component.html) and click on an input that was initially empty, value of the input is set to the current date, which is OK.
However, I cannot empty this input ever again. If I manually clear the date and click somewhere outside the input, current date will automatically fill in again.
How can I avoid it?
Hi, aaawow
Open “assets/bootstrap-datepicker/js/bootstrap-datepicker.js” and comment line 115 ( this.set(); )
Cool, thnx!
Hi,
Nice additions, thank you!
However, i think there is a bug in the Tabs of the Box page. They go down, outside the box title.
It happens at least in Chrome for Mac.
Hi,
I’m using chrome on windows (also IE, FF, Safari) and I have not this problem!
Hi,
Thanks for the updates. Work very well. Is there any way to make the new scroll bar work along the page rather than just inside boxes?
Also is it possible to get the Custom Dropdown Multiple Select to show you the full placeholder text once the field is empty?
No, slimScroll can’t replace default scrollbar of browsers.
Add below code to flaty.css:
/* Chosen --------------------------- */
.
.
.
.chosen-container-multi .chosen-choices li.search-field input[type=text] {
height: 25px;
}
/* Slider ---------------------------- */
Hi,
Bug Report:
Chosen select dropdown box do not resize inside the form.
Hi,
I’ve fixed this bug in my local development machine. I’ll update it in next few hours.
Hello! How could I set the color theme? I want him to start all black without having to click on the themes tab.
Thanks!!!!!!!!!!
Initial skin. Ex.: all blue, all black…
with fixed navbar and fixed sidebar active
Hello,
All here: http://themes.shamsoft.net/flaty/more_set-skin.html
We are seeing issues on both chrome tablet and chrome phone. This is from a download from November 14th, 2013 of the project files. First, on both versions the icons on the table headers are dropping. Second, on the tablet, the profile icons and counts are not aligning correctly. Also on the phone the menu items that have sub menus such as forms, tables, maps, etc don’t work.
When do you think you can address these issues.
http://screencast.com/t/87axGVwMip http://screencast.com/t/ZbstUXOFExample URL: http://html.pictoricpower.com/demo/
Thanks pictoric.
I am currently work on next version. There is update on bootstrap, awesome font, etc. I’ll consider this issues too.
I’m not sure when new version will be ready, I should have a long test period in this update.
<div class="form-group">
<label class="col-sm-3 col-lg-2 control-label" for="timeselect">timeselect</label>
<div class="col-sm-5 col-lg-3 controls">
<div class="input-group bootstrap-timepicker-component">
<span class="input-group-addon"><i class="icon-time" /></span>
<input type="text" name="timeselect" id="timeselect" class="form-control timepicker-default" placeholder="HH:MM AM" value="" />
</div>
</div>
</div>
I don’t see what is making it a button.
<span class="input-group-addon"><i class="icon-time" /></span>Use this code:
<div class="form-group">
<label class="col-sm-3 col-lg-2 control-label" for="timeselect">timeselect</label>
<div class="col-sm-5 col-lg-3 controls">
<input type="text" name="timeselect" id="timeselect" class="form-control timepicker-default" placeholder="HH:MM AM" value="" />
</div>
</div>
No.. I want to keep the icon to match everything else. I have all URL inputs start with a “link” icon, date selects have the calendar icon. So I want the time select to have the clock icon. But the icons are just meant as a visual clue as to what kind of data is expected.
<div class="form-group">
<label class="col-sm-3 col-lg-2 control-label" for="timeselect">timeselect</label>
<div class="col-sm-5 col-lg-3 controls">
<div class="input-group">
<span class="input-group-addon"><i class="icon-time" /></span>
<div>
<input type="text" name="timeselect" id="timeselect" class="form-control timepicker-default" placeholder="HH:MM AM" value="" />
</div>
</div>
</div>
</div>
But calendar icon don’t has functionality anymore
I noticed on page 3 someone else was having problems with timepicker, and I wanted to point something else out.
All the other “picker” time inputs, create a popup when you click on the text portion of the field, however timepicker will only do the popup if you click on the clock (tested in Chrome and FF, local copy as well as demo).
Per the documentation, adding “disableFocus: true” should prevent manual entry and force the popup, but it’s just not working for me. This makes for an inconsistent UI since the user can’t type in the field. They HAVE to click the clock to enter anything. But since no other field works like that it appears broken.
Can you investigate why this is the case?
Thanks
<input class="form-control timepicker-default" type="text">
Hello,
I’m having troubles on IE8 on Windows XP with the menu and submenu’s. They don’t show up. I’m getting a whole list of (javascript) errors. Does anyboby know how to fix this?
Regars,
JT
Here’s a list (in Dutch, but somehow recognizable in English):
Foutdetails webpagina
Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Tijdstempel: Sun, 10 Nov 2013 00:27:46 UTC
Bericht: Deze eigenschap of methode wordt niet ondersteund door dit object Regel: 4 Teken: 6105 Code: 0 URI: /assets/jquery/jquery-2.0.3.min.js
Bericht: ‘jQuery’ is niet gedefinieerd Regel: 6 Teken: 1 Code: 0 URI: /assets/bootstrap/js/bootstrap.min.js
Bericht: ‘jQuery’ is niet gedefinieerd Regel: 1 Teken: 81 Code: 0 URI: /assets/nicescroll/jquery.nicescroll.min.js
Bericht: ‘jQuery’ is niet gedefinieerd Regel: 14 Teken: 3 Code: 0 URI: /assets/jquery-cookie/jquery.cookie.js
Bericht: ‘jQuery’ is niet gedefinieerd Regel: 32 Teken: 1 Code: 0 URI: /assets/flot/jquery.flot.js
Bericht: ‘jQuery’ is niet gedefinieerd Regel: 23 Teken: 1 Code: 0 URI: /assets/flot/jquery.flot.resize.js
Bericht: ‘jQuery’ is niet gedefinieerd Regel: 58 Teken: 1 Code: 0 URI: /assets/flot/jquery.flot.pie.js
Bericht: ‘jQuery’ is niet gedefinieerd Regel: 38 Teken: 1 Code: 0 URI: /assets/flot/jquery.flot.stack.js
Bericht: ‘jQuery’ is niet gedefinieerd Regel: 61 Teken: 1 Code: 0 URI: /assets/flot/jquery.flot.crosshair.js
Bericht: ‘jQuery’ is niet gedefinieerd Regel: 12 Teken: 1 Code: 0 URI: /assets/flot/jquery.flot.tooltip.min.js
Bericht: ‘jQuery’ is niet gedefinieerd Regel: 4 Teken: 31 Code: 0 URI: /assets/sparkline/jquery.sparkline.min.js
Bericht: Object wordt verwacht Regel: 1 Teken: 1 Code: 0 URI: /js/flaty.js
Hello,
As I mentioned in “Compatible Browsers”, this theme does not have support for IE8
Hello, Is there a way to change this, or get the menu going with some adjustments?
I mainly use the dynamic tables, menu and icons, the rest I can live without.
It’s depend on you if you can adjust them, I know it isn’t esay. But first of all you need to downgrade the jquery. We use jquery 2.x that has not support for IE8 and below
Do you know someone who already did? Any clues and links to fora about this or simular situations?
Send an email to me, I’ll try to do it, but not any promise for full support. maybe you have to do some other change after me
Where can I find your email address?
Hello ShaMSofT,
Any progress or news? I don’t need full support, just the basics working in IE8.
Jolmer
Hello,
Yeah, I’ll send you in few hours later
Nice, hoping to hear from you…
I’ve sent
Thanks, I’ll have a look…
Hi,
Are you planning on releasing a print tables version for next release? I’ve been trying to incorporate the dataTables code from here http://datatables.net/release-datatables/extras/TableTools/bootstrap.html but it doesnt seem to work
Hi,
No we have not any plan to add TableTools for DataTables.
If you can not integrate it, it’s not a bug/issue with FLATY. Maybe you didn’t include TableTools plugin!
Hi,
I have come across a few minor bugs and cannot seem to fix them.
1) When validating a form ive removed the success border by commenting out the success function. Just making sure this is ok to do. I haven’t seen any adverse effects.
2) Is there any way to validate the file type when being uploaded? i.e. data-rule-file=”jpg png gif
3) I am using the ignor option to ignor” elements, used on pages where a section is hidden unless a certain option is selected, however this then carries over to the chosen select boxes and they dont get validated.
4) I added the submitHandler to hide the submit button and change it with a loading/saving gif which works ok.submitHandler: function(){
$('#save').hide();
$('#saving').show();
$(form).submit();
}
There is a part where I use a modal to confirm the save. The button is
<button type="submit" class="btn showhouse-colour white-text modal-toggle" data-toggle="modal" data-target="#modal-dialog" data-modal-type="form-confirm" data-modal-title="Associate Landlord" data-modal-text="Are you sure you want to associate a new landlord with this property?"><i class="icon-ok" /> Associate Landlord</button>Which calls the following, the problem is that the form doesnt submit. It does work with the submit handler removed and if I give the form a class for submiting
$('.modal-toggle').click(function(e){
e.preventDefault();
modalType = $(this).data('modal-type').toLowerCase();
modalTitle = $(this).data('modal-title');
modalText = $(this).data('modal-text');
if(modalType == "confirm"){
modalUrl = $(this).data('modal-confirm-url');
modalOptions = '<a href="' + modalUrl + '" class="btn btn-primary showhouse-colour"><i class="icon-ok" /> Yes</a><button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-ban-circle" /> No</button>';
}else if(modalType == "alert"){
modalOptions = '<button class="btn btn-primary showhouse-colour" data-dismiss="modal" aria-hidden="true"><i class="icon-ok" /> Ok</button>';
}else if(modalType == 'form-confirm'){
modalOptions = '<button class="btn showhouse-colour white-text" data-dismiss="modal" id="confirm-form-yes"><i class="icon-ok" /> Yes</button><button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-ban-circle" /> No</button>';
}
$('.modal-title').html(modalTitle);
$('.modal-text').html(modalText);
$('.modal-footer').html(modalOptions);
$('#confirm-form-yes').click(function(){
$('.confirm-form').submit();
});
});
Hi,
1) Don’t worry, it doesn’t have side effects.
2) Yes, check this: http://jqueryvalidation.org/extension-method
3, 4) I don’t have any idea. If you can, email me the sample page so I can debug it.
Thanks for the help, got the chosen validation working ok but the Modal Submit still doesnt work. If you comment out the first button and uncomment the second button, when you click the red save it will show the modal which will submit after clicking yes, only it stops. I think the submit handler causes this problem.
Replace
submitHandler: function(){
$('#save').hide();
$('#saving').show();
$(form).submit();
}
With this:
submitHandler: function(form){
$('#save').hide();
$('#saving').show();
form.submit();
}
Consider to “form” argument that I forgot to highlight in your PRE codes
Sorry disregard that, I had too many copies of the file about. Thank you ever so much for all your help. It is an awesome theme
Hi,
I have come across a few minor bugs and cannot seem to fix them.
1) When validating a form ive removed the success border by commenting out the success function. Just making sure this is ok to do. I haven’t seen any adverse effects.
2) Is there any way to validate the file type when being uploaded? i.e. data-rule-file=”jpg png gif
3) I am using the ignor option to ignor” elements, used on pages where a section is hidden unless a certain option is selected, however this then carries over to the chosen select boxes and they dont get validated.
4) I added the submitHandler to hide the submit button and change it with a loading/saving gif which works ok. There is a part where I use a modal to confirm the save. The button is<button type="submit" class="btn showhouse-colour white-text modal-toggle" data-toggle="modal" data-target="#modal-dialog" data-modal-type="form-confirm" data-modal-title="Associate Landlord" data-modal-text="Are you sure you want to associate a new landlord with this property?"><i class="icon-ok" /> Associate Landlord</button>
Which calls the following, the problem is that the form doesnt submit. It does work with the submit handler removed though
$('.modal-toggle').click(function(e){
e.preventDefault();
modalType = $(this).data('modal-type').toLowerCase();
modalTitle = $(this).data('modal-title');
modalText = $(this).data('modal-text');
if(modalType == "confirm"){
modalUrl = $(this).data('modal-confirm-url');
modalOptions = '<a href="' + modalUrl + '" class="btn btn-primary showhouse-colour"><i class="icon-ok" /> Yes</a><button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-ban-circle" /> No</button>';
}else if(modalType == "alert"){
modalOptions = '<button class="btn btn-primary showhouse-colour" data-dismiss="modal" aria-hidden="true"><i class="icon-ok" /> Ok</button>';
}else if(modalType == 'form-confirm'){
modalOptions = '<button class="btn showhouse-colour white-text" data-dismiss="modal" id="confirm-form-yes"><i class="icon-ok" /> Yes</button><button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-ban-circle" /> No</button>';
}
$('.modal-title').html(modalTitle);
$('.modal-text').html(modalText);
$('.modal-footer').html(modalOptions);
$('#confirm-form-yes').click(function(){
$(form).submit();
});
});
Hi,
I am thinking about buying this template for a secure admin portal we are building.
I have couple of questions: -Does this template link to any external sites or all required libraries are part of the package and sits in our webserver. For security compliance reasons the site we are building can’t link to any external resource. For example we can’t use Google Analytics as it uses the .js file hosted by Google
-I tested the live demo in my mobile to see the responsive design. The multi-level menu is not working in mobile. Can you pleas have a look and fix it?
Looking forward to buying the template once I have the answers.
There is just a line in bottom of each page for loading jquery from google cdn:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>That you can remove it. Also we use OpenSans font that is in begining of flaty.css file:
/* Import Font */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);You can have it in your server and use @font-face to import it.
Yeah we have some issues in mobile version, but I’ll fix them in next release.
Bootstrap, FontAwesome and some other assets released new update, so we’ll have a new update in future days.
Thanks for getting back to me.
With regards to jquery from google CDN, should I just remove the line or should I download the jquery.min.js file from google cdn to our server and change the line to point to it?
<script>window.jQuery || document.write('<script src="assets/jquery/jquery-2.0.3.min.js"><\/script>')</script>
Also you can change this line of code to this:
<script src="assets/jquery/jquery-2.0.3.min.js"></script>
Hi m8, gr8 theme!! I see many issues in iOS. Do u have plans to fix them in the next releases? Tks
Hi,
I see. I don’t know why in this version, NiceScroll has a JS error in phone browsers!
It was my bad that I did not check it in phone browsers. But I’ll fix this in next release.
I had issues in iOS in some other projects I used NiceScroll. My issues were elements expanding before position fixes were applied. They were related with zindex as NiceScroll calculates it for us. I had to force it in some cases, in others I had to remove some -webkit-overflow-scrolling.
Pls leave me a msg here when u fix it as I’m very interested in the theme and iOS is mandatory for me. There are other issues too, you can simulate them with Themeforest top bar (buy theme) in and out. As the viewports are different they present different issues in the top navbar, calendar and boxes. I guess when u fix the scroll for navbar boxes (up/down icon) will work too!
Really inspiring work! Looking fw to use it.
Hi, I’ve fixed lots of bugs in mobile and tablet version.
Hi, I see great improvement and almost everything working. I’ll do some other testing with mini ipads, but will probably buy it. Thanks very much for letting me know.
Hi! How can I change color forever? Now when I pick red color, for example, after press another link, color changing to blue as default. please help
Hi,
Take a look at this example: http://themes.shamsoft.net/flaty/more_set-skin.html
Thank you!!!! It so simply!!!! Many Thanks !!