114 comments found

  • Has been a member for 0-1 years

How do I make the sidebar and navbar fixed by default?

Default-user

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

ShaMSofT

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.

Default-user

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

ShaMSofT

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.

Default-user

It is 2.0. I will create one and let you know

  • Bought between 50 and 99 items
  • Has been a member for 3-4 years
  • United States
clintre Purchased

Any plans on updating to the latest Bootstrap 3.1?

ShaMSofT

No, It works fine with v3.0.2

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

Hopefully this is a simple request. I need different/more icons than the default. Currently I’m looking for the PayPal logo, but as I go I feel there may be a few others.

How hard is it to redo the icon set?

ShaMSofT

Replacing icon set needs change to all of files! I mean I used font-awesome in all of elements. I think it’s better to add another icon set, not replacing with current one

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

Help…...I am getting the following errors in IE8 and my top and side menus are not displaying:

1)
Message: Invalid argument. Line: 1 Char: 713 Code: 0 URI: {mydomain}/assets/plugins/excanvas.min.js
2)
Message: Invalid argument. Line: 4 Char: 5469 Code: 0 URI: {mydomain}/assets/plugins/jquery.sparkline.min.js
Default-user
rking53 Purchased

Is it possible for me to change anything to make this compatible with IE8?

ShaMSofT

As you know, we are not supporting IE8 and mentioned in Compatible Browsers. It’s depend on you if you could or not, but yes, it is possible. Do not forget to backward jQuery to version 1.x from 2.x. Also there is possibilities that some of plugins do not support IE8.

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

Hi, I was wondering what did you do to disable the use of ‘modal-lg’ class. I cant find anything in the css or js that overwrites it. http://getbootstrap.com/javascript/#modals-sizes

ShaMSofT

Hi,

.modal-lg and .modal-sm added to bootstrap from version 3.1.0, but our last update is using v3.0.2. As we do not have any plan to release more updates for this template, you can update your bootstrap files to latest version to have this functionality.

Default-user
kpoint Purchased

Ah great stuff. Thanks

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

How is it possible that I use a tooltip on a ?

ShaMSofT

You can find samples on following page: http://themes.shamsoft.net/flaty/ui_general.html

Default-user

I tried it already, but it doesn’t work.

<span class="tl-icon show-tooltip" data-placement="bottom" data-original-title="Tag"><i class="fa fa-ellipsis-h" /></span>
ShaMSofT
Try this one:
<span class="show-tooltip" data-placement="bottom" data-original-title="Tag"><i class="fa fa-ellipsis-h" /></span>
Default-user

In that case I’ve got no more formatting. I found out that the tooltip doesn’t work if I use “postion: absolute;”, but how can I fix it?

ShaMSofT

It’s work for me! I try your original code and it’s work well. What’s your problem exactly? You hover on the “ellipsis-h” icon and tooltip is not showing? In this case, add data-container=”body” attribute to the span and see if the problem exist yet.

Default-user

Yes, that’s the problem, but the formatting doesn’t work anymore, maybe I have to say that I want to use it in the timeline..

ShaMSofT

I test the code in the timeline demo page right now, and it’s works! It seems the problem is not with the FLATY, you can test it yourself in the timeline demo page.

Default-user

Hmm.. I used “margin-left:50px;”, because I want to have two icons parallel. Maybe this is a problem?

ShaMSofT

I do not think so, but you can remove it and test the page. Use your browser’s developer tools, remove/change styles to see what will happen.

Default-user
It is the problem, if I don’t use it the icons are overlaped, but it works very nice.. – if I use this method:
 <span class="tl-icon show-tooltip" title="test"><a href="#modal-preans" class="fa fa-comments" data-toggle="modal"></a></span>
But if I use margin, the tooltip works only above and under the icon, but only in a very small area..
  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

Lovely looking template. But when I browse to the preview site on my iPhone 5, it doesn’t degrade to the mobile view? Anyone else experience this behaviour?

ShaMSofT

Thank you. I guess it’s because of the Themeforest page preview. Check the template from this url: http://themes.shamsoft.net/flaty

Default-user

Indeed you are correct. That link works well! And for that reason, the Captain must invest! :-) Thanks…

ShaMSofT

Thank you too :)

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

Hello,

I’ve added a navbar to one of my pages and i am trying to add some input controls (input for search) that pull right but i am having trouble with the styling. i do not need a form element (i tried and this did not work either). any help would be greatly appreciated!

awesome theme!

ShaMSofT

Hello,

What’s your styling problem? Can you provide an online demo?

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

Any plans on adding a search results box that can be expanded under the search bar? Like an autocomplete or results on the fly. Thanks!

ShaMSofT

No, we have not any plan to add new features. Maybe you can use typeahead.js

schmidjon
Okay no problem! Was gonna use a server-side search engine anyway so I coded the client myself making use of .dropdown-menu. This is how it looks like: http://www.jonathanschmid.de/ext/flaty-search.png

Let me know in case you’re interested.

ShaMSofT

Congratulation schmidjon, It’s look interesting. But if i was you, I’d like to add a triangle to the left of the auto-complete block. It can attract the user attention.

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

Hello,

I have added a navbar in a page. In desktop version it works and looks cool. But the style in mobile version (tested in chrome for samsung s4) looks like the dropdown’s items has not background, therefore the items are displayed over the content so ugly. This is an screenshot with dropdown menu expanded: https://www.dropbox.com/s/bbm2j3b1e2ufiln/Screenshot_2014-06-25-20-15-10.png

This is an screenshot without expand:

https://www.dropbox.com/s/0egf5ko60oscv91/Screenshot_2014-06-25-20-14-43.png

Thank you in advance

ShaMSofT

Hello,

It seems you made a lot of changes in the FLATY css file and your navbar in the box is not part of FLATY UI. It’s not part of our support and you have to inspect the element and fix the bugs on your own.

Default-user

Hello,

No, that is not correct. The flaty is as natural as you released. Very simple: try to copy the default code navbar code from http://getbootstrap.com/components/#navbar and paste it to the “blank page” of flaty sample page, you will notice the bug mencioned in the comment above. If you need a live example let me know. I can make it public for you with a fresh flaty installation.

Thank you, Manfred

ShaMSofT

Hello,

The main navigation bar at top of the pages is our navbar. In many projects that I saw, there is one navbar at top, so we develop our navbar based on the Bootstrap navbar (.flaty-nav) and did not style default’s bootstrap navbar. Let me to check it, I’ll answer you again.

ShaMSofT

Hello,

Add the following css code to your css file or at the end of flaty.css:
.navbar-default {
    background-color: #f8f8f8;
    position: relative;
    min-height: 50px;
    height: auto;
    z-index: 0;
    margin-bottom: 20px;
    border: 1px solid #e7e7e7;
}
.navbar-default .navbar-brand {
    color: #777;
    font-size: 18px;
    padding: 15px 15px;
    min-width: 0;
    height: auto;
}
.navbar-default  .navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid #e7e7e7;
    -webkit-overflow-scrolling: touch;
}
.navbar-default  .navbar-nav {
    margin: 7.5px -15px!important;
}
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
    background-color: transparent;
}
.navbar-default .dropdown-menu > li:hover {
    background-color: transparent;
}
@media (min-width: 768px)
{
    .navbar-default  .navbar-nav {
        margin: 0!important;
    }
}
Test it by the bootstrap’s navbar example code. Hope you like it.
Default-user

Very very cool. Your patience and be helpfull person make of you the best author ever.

  • Has been a member for 0-1 years

Is it possible to reduce the spacing between the form element rows?

<label class=”col-sm-3 col-lg-2 control-label”></label>
ShaMSofT
Yes. The label and elements are inside a .form-group and the .form-group has 15px margin-bottom. You can reduce it to 10px by:
.form-group {
  margin-bottom: 10px;
}
Default-user

That worked thanks! Can you also tell me how to reduce the top and bottom padding or height of the text box control inside form group so it takes less space. I tried below .form-control { padding-bottom: 2px !important; }

but that does not have any affect

ShaMSofT
Try this:
.form-group {
    margin-bottom: 5px;
}
Default-user

You pasted the same CSS style again. I was talking about the spacing inside a textbox and not the margin between textboxes

ShaMSofT
Sorry, my bad. You can reduce the height of input by adding the .input-sm class to it, or:
.form-control {
    height: 24px;
    padding 1px 10px;
}
  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
kpoint Purchased

Hi,

Is there any way to fix the overlay bug for the Full Calendar? When the text and buttons meet it doesnt degrade very well. And sometimes it overflows into the next col-md div http://awesomescreenshot.com/0b3334wt74 http://awesomescreenshot.com/0ec334xd12
ShaMSofT

Hi,

You can find an IF statement in the demo code:
if ($(window).width() <= 480) {
    h = {
        left: 'title, prev,next',
        center: '',
        right: 'month,agendaWeek,agendaDay'
    };
} else {
    h = {
        left: 'title',
        center: '',
        right: 'prev,next,today,month,agendaWeek,agendaDay'
    };
}
You can remove some buttons based on your context or window size.
  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

Hello,

I have problem with Advance Date Range Picker. Range input boxes go out of the range box from the ritght side.

input boxes (class=”range_inputs”) marign/padding behaviour is complitely different than ranges ( li class=”ranges”)

BR, Tomek

ShaMSofT

Hello,

It seems it’s work correctly in the demo: http://themes.shamsoft.net/flaty/form_component.html . Yes? Maybe you have made some changes to them from your own styles. Anyway, if you could provide a demo page, so I can inspect the inputs and help you better.

  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 10 000 and 50 000 dollars
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users

Super work! Good luck!;

by
by
by
by
by
by