142 comments found.
Any plans on updating to the latest Bootstrap 3.1?
No, It works fine with v3.0.2
How do I make the sidebar and navbar fixed by default?
Take a look at this page: http://themes.shamsoft.net/flaty/more_set-skin.html
navbar worked but there is an issue with sidebar. I made the change below div id=”sidebar” class=”navbar-collapse collapse sidebar-fixed”
This worked and made the sidebar fixed but the search is now partially hidden and go under the navbar
I’ve just test this in demo pages and there is not such an issue. Maybe it’s scrolled down, you know, if you have plenty of menus in sidebar, sidebar comes with a scrollbar.
I did have plenty of menus and it was scrolled down. but I would like it it to be the opposite and scroll all the way up by default when the page first loads. this way the menu title is visible. can this be done
Which version of the flaty do you use? If it is 1.x, maybe you have to do some changes in the flaty.js, but if it is 2.x, please provide an online demo, I can not see this problem in the flaty.
It is 2.0. I will create one and let you know
I have tried to add the clear button to the datepicker, like in the documentation: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#clearbtn I changed the flaty.js but it doesn’t work:
if (jQuery().datepicker) {
$('.date-picker').datepicker({
clearBtn: true
});
}
As you can see in documentation, we are using this one in FLATY: http://www.eyecon.ro/bootstrap-datepicker/
And it seems this one does not has any option for clear button.
Hi
Impressive template, can I ask when is RTL version released? Can you provide your/support Email?
Thanks
Hi
I do not have any plan to release RTL version. You can find contact form in my profile page.
Hi, How can i make the datepicker hide when i select a date , and get the event when date change. thanks
Hi,
You can find them in documentation page: http://www.eyecon.ro/bootstrap-datepicker/
Simply, this component has .datepicker(‘hide’) method and changeDate event.
thanx
Hi ShaMSofT, Nice work on this. My boss has purchased this for us to use and I’ve got a question regarding the alerts and notifications. We’d like to use the notifications and alerts that you have at the top right of the pages. The tasks, alerts, and the messages. I don’t see any information or examples on this and would like to know how we can incorporate this functionality. Can you give us some information please? We’re working in C#. Thanks.
Hi jim,
Thanks for using FLATY.
That notification is Gritter and you can find sample js code at top of “js/flaty-demo-codes.js” file. Also you can find more information in http://boedesign.com/demos/gritter/
Great. Thanks. Keep up the good work.
I totally love this theme, and i cant wait implementing it on a future client’s website…
But I need to see if the theme also has built-in modals, popups or the like?
Thanks.
Check this link: http://themes.shamsoft.net/flaty/ui_general.html
You can see Tooltip, Popover, Modals, and Notification at bottom of page
Hi,
also, when using zigzag conversations, it doesn’t make sense that every second message is reversed. In a conversation, there might be two messages of one person before there is one of the other. A css class would make sense.
Thanks
Jonathan
Hi,
It’s right too. Send me email so I’ll send back new flaty.css file
Hi,
it’d be great if I could re-init all custom functionality when a modal is opened to use stuff like collapsable boxes and custom dropdowns.
Nevertheless, it’s a pleasure to work with your theme!
Cheers,
Jonathan
Hi, Thanks
Yeah, you’re right. Re-initialization JS component is necessary after loading ajax content. I think you know how to write this function in flaty.js , but I’ll do it if you need to. Just email me from my profile page’s contact form, so I can send you new flaty.js file.
Thanks a lot! I’ve primarily posted this commented as “Bug Report” and I would be happy to see it in a future update so I can keep my installation updatable.
Ok, I’ll plan to release a minor update in few days.
Hi,
im using the slimScroll-Div in my Project so i noticed that all slimScroll divs (aso in the actual Data from Codecanyon) get 250px height. i cant overwrite it. Do u have any fix for it?
Hi,
You can change it with height property option. 250px is the default value:
$(selector).slimScroll({
height: '500px'
});
Hi,
I am using the dynamic table with 8 columns. I’m trying to disable the sorting on some of them. I tried this but it’s not working. Could you help please.
<script>
$(document).ready( function() {
$('#table1').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
{ "bSortable": false },
{ "bSortable": false },
null,
null,
{ "bSortable": false }
] } );
} );
</script>
Hi,
Try this one:
$('#table1').dataTable({
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0, 3, 4, 7]
}]
});
Hello,
I like to use the wizard. I replaced<#a href="javascript:;" class="btn btn-success button-submit">Submit<#/a>
with
<button type="submit" class="btn btn-success button-submit"><i class="fa fa-check" /> Speichern</button>
The form action is the same file where the wizard is.
But every time I like to submit, the URL shows the values of the formular and does not run the PHP script.
Hello,
Replace method=”GET” with method=”POST” in your <form> tag
Arrgh sry, sometimes I’m realy dopy…. thanks!
<div class="make-switch" id="use_map_switch" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
<input type="checkbox" name="use_map" id="use_map" value="1" {if $form_data.use_map eq 1}checked{/if} />
</div>
I run a jquery script and if a condition is met I want to return the switch to be unchecked/red/no
I thought one of the following lines of code would work but didnt.
$('#use_map_switch').bootstrapSwitch('setState', false);
$('#use_map').bootstrapSwitch('setState', false);
Hi,
Are you sure that switch is ON?
For test, replace “{if $form_data.use_map eq 1}checked{/if}” with “checked” to sure about that.
Anyway, this is work right for me.
$('#use_map_switch label').click(function(){
if($('#use_map').is(':checked')){
$('.map-area').hide();
} else {
address = getAddress();
if(address == ""){
alert('you must enter an address');
$('#use_map_switch').bootstrapSwitch('setState', false);
}
I get the alert but the switch wont set to off
It seems to be that it calls my function first from the script then after it completes my code the switch code works and changes the state afterwards
Hey Hossein,
We’re having an issue with the theme, more precisely the login and error pages, the ones with only a “box” in the middle of the page.
In these pages we can’t figure out how to make the footer show. Could you point us in the right direction, please?
Cheers,
Raúl
dosocial.com
Hi Raúl,
In login and error pages, append your footer tag inside .login-wrapper or .error-wrapper. Then open flaty.css, find ”#main-content > footer” and ”#main-content > footer p” selectors. These selectors are your main footer styles. You can remove ”#main-content > ” from selector to apply these styles to login and error pages too, or just write new styles in your css files.
I tried that and I could swear it didn’t work at the time… 
Thanks, Hossein. Quick and helpful as always! 
I’m guessing it’s not possible to maintain the footer outside the content tags, like on the other pages, right?
Cheers, Raúl
I’m afraid your tip works for the login page but not the error pages
On the error pages the footer shows but it is contained within the white box, instead of being by itself below the white box and spanning the entire page’s width.
Any other tricks you can think of?
CSS:
footer.error {
background: #fff;
padding: 12px 20px 3px;
position: relative;
z-index: 3;
width: 450px;
margin: 30px auto 0 auto;
}
footer.error p {
text-align: center;
color: #222;
}
HTML:
<!-- Add footer tag after div.error-wrapper -->
<footer class="error">
<p>blah blah</p>
</footer>
And here is for login page:
CSS:
.login-wrapper > footer {
background: #fff;
padding: 12px 20px 3px;
width: 340px;
margin: 30px auto 0 auto;
}
.login-wrapper > footer p {
text-align: center;
color: #222;
}
HTML:
<!-- Add footer tag inside div.login-wrapper -->
<footer>
<p>blah blah</p>
</footer>
Change 30px margin-top property to proper value that you need. Feel free to ask any other question.
Thanks Hossein,
I had to fiddle a little more with it but your tips got me in the correct path and I got what I wanted. 
Cheers, Raúl
Hello! Im working on the previus version 2.1.0. What do I need to change for the last version update?
Thanks, Antonis
Hello
Usually you should overwrite css, js and assets files, but in version 2.2 there is lots of change in html files. All icon-* classes updated because of new class names in font awesome 4.
Hi, I have a problem with jquery-ui autocomplete? The scroll down list does not appear and I have to use up and down arrow keys to navigate. So, how can I make it as a scroll down list? Thank you.
Sorry, the problem is actually occur when using modal dialog. So, how to make it appear as scroll down list when using the modal dialog?
Hi,
Do we have auto complete sample in demo files?! Anyway, if you can please send me a demo file to inspect and find the problem.
Please help. I am using Flaty Premium 2.2 and every page takes between 15 and 17 seconds before it completely loads. For example the simple Login Screen took 17 seconds. When loading you get dreaded continual circle rotating until it loads. Why is that? This is happening on every page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>I think this is the problem for you!
You DA’ man!.... yep that did it. THANKS!
Hi ShaMSofT, thanks for the awesome theme. I have choose a fixed navbar but when I click ‘mini’ menu icon using mobile version view, the menu does not appeared as a fixed Navbar. When I scroll down and click on the menu, the menu list wasn’t there because its only appear on top of the page. So, I have to scroll up again to view the menu list. Therefore i just want a clarification on these situation weather its normal or not. If it doesn’t, then can it be fixed?
Hi
To fix this issue open flaty-responsive.css, and inside @media (max-width: 767px) add “position: fixed;” to #sidebar selector.
I did not use fixed sidebar because if you have long dropdown menu, maybe some of your menu item does not show in small devices.
Hi, thanks for reply.
So, If I did not use fixed sidebar, where can I handle when I click at the ‘mini’ menu, the page will go on top like ‘Go Top Button’ function?
$('#sidebar').on('show.bs.collapse', function () {
$("html, body").animate({ scrollTop: 0 }, 100);
});
It works. Thank you.
invalidHandler: function (event, validator) {
//display error alert on form submit
validator.errorList[0].element.focus();
},
invalidHandler: function (event, validator) {
var el = $(validator.errorList[0].element);
if ($(el).hasClass('chosen')) {
$(el).trigger('chosen:activate');
} else {
$(el).focus();
}
},
Also you can use ‘chosen:open’ trigger.
If you are not using flaty 2.2, the trigers are like this: ‘liszt:activate’ and ‘liszt:open’
I am using the most recent flaty theme. There there a way to make the error message appear below the chosen box and make it highlight red too?
.has-error .chosen-single {
border-color: #a64240!important;
}
And in js validation code, replace errorPlacement function with this:
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else if (element.next('.chosen-container').length) {
error.insertAfter(element.next('.chosen-container'));
} else {
error.insertAfter(element);
}
},
jQuery.validator.setDefaults({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else if(element.next('.chosen-container').length){
error.insertAfter(element.next('.chosen-container'));
} else {
error.insertAfter(element);
}
},
focusInvalid: false, // do not focus the last invalid input
ignore: ':hidden:not(.chosen)',
invalidHandler: function (event, validator) { //display error alert on form submit
var el = $(validator.errorList[0].element);
if ($(el).hasClass('chosen')) {
$(el).trigger('chosen:activate');
} else {
$(el).focus();
}
},
What you mean? What is the problem?
This code will give focus to the first input that has error.
The text “This field is required” appears above the chosen and i am trying to get it to appear below it. The use then cannot see the name of the field they are to enter http://awesomescreenshot.com/04e24dnk82
else if(element.next('.chosen-container').length {
error.insertAfter(element.next('.chosen-container'));
}
This piece of code (inside errorPlacement function) is responsible for placing error text after chosen element. This is for latest version of FLATY that use latest version of chosen select. Maybe you are not updated. So replace ”.chosen-container” with ”.chzn-container” and check it again.
Hi,
Great theme. I like it.
One question:How can I setup sidebar submenu always not collapsed?
I have not so many entries in my sidebar so it’s uselless to have one click more.
Best Regards,
TomekHi Tomek,
Thank you.
Add below style to your css file:
.submenu {
display: block!important;
}
It works. Thank you.