V6 feature sorely missed in V7.0

ACDC

In V 6.0 we had a really good feature that let you position the icon on any one of the main tabs or form tabs - either left/right/bottom/top. We used this extensively as it allowed us to enlarge the size of the tabs by positioning the icon at top or bottom of the tab. This runs through our whole theme and is vital to the look and feel of our product which we spent weeks customizing the css to get it right

There is no place in V 7.00 to customize the Main Tabs and exclusively position an Icon by way of a custom css nor is there any advanced script option either. Does anyone have a suggestion as to how this can be done ?

I have called out to support to bring back this feature and they have indicated sometime in the future they might do this. So we are left high and dry pulling our hair trying to find a solution that will let us transition into V7.0

In fact I would like to call out to Support to PLEASE provide some interim solution here, so we can at least claw back the week that we have wasted in trying to find a work around and finally transition to v7

aware_support

Tick the "use mobile style" option for a tab - this can be used not only for mobile apps but for desktop apps as well. This option will make tabs bigger and will use top alignment for icons.

Other than that use CSS to customize your style as you see fit.

Rennur

You can accomplish this quite easily if you use font-awesome icons included with v7.
You'd have to add the css class icon_top to each tab individually.

1) Open startup.html with any text editor
2) Add this css class style within <head></head>

<style>
.icon_top{
display: block;
margin: 3px auto 3px auto !Important;
}
</style>

3) Open visual perspective > Tab settings > Show Icon > Icon by CSS class e.g:

fa fa-truck icon_top

If you are using image icons, you need to create individual classes for each image.

Cheers

crisg0112

Rennur wrote
You can accomplish this quite easily if you use font-awesome icons included with v7.
You'd have to add the css class icon_top to each tab individually.

1) Open startup.html with any text editor
2) Add this css class style within <head></head>
<style>
.icon_top{
display: block;
margin: 3px auto 3px auto !Important;
}
</style>
3) Open visual perspective > Tab settings > Show Icon > Icon by CSS class e.g:
fa fa-truck icon_top
If you are using image icons, you need to create individual classes for each image.

Cheers

Great stuff Rennur!

Rennur

The css to display the icon on the bottom requires some tinkering.
It depends on the theme's tab size, font size etc.

This is only a quick-fix attempt:

.icon_bottom{
    left: 50%;
    position: relative;
    top: 31px;
    margin: -15px 0 -5px 0 !Important;
    padding: 5px 0 20px 0;
}

ACDC

Tick the "use mobile style" option for a tab - this can be used not only for mobile apps but for desktop apps as well. This option will make tabs bigger and will use top alignment for icons.

I have tried this option as suggested before but it makes no difference at all - its seems like the feature option is not working.

Other than that use CSS to customize your style as you see fit.

I have made numerous changes by way of a custom CSS to match our existing theme, so I fully understand the concept. However when an exclusive change needs to take place relating to specific tabs , in this case Main Tabs under Frame Settings, I don't see an option to refer to a custom css in the FRAME SETTINGS and changing the default CSS settings has a global effect on all TABS and that's not acceptable . So I don't see how I can use the CSS setting without a unique CSS reference in the Frame Setup or Advanced script for that matter because there is none - unless of course I am missing something

Rennurs solution seems to be a good alternative (hats off to Renurr) but it seems that this option will need an explicit setting on all our grids and tabs and forms ,- Ideally we need a CSS reference for Frame Settings , rather than one for just background

BenHayat

aware_support wrote
Tick the "use mobile style" option for a tab - this can be used not only for mobile apps but for desktop apps as well. This option will make tabs bigger and will use top alignment for icons.

Support, I had reported this issue a while back, and still doesn't work.
Nothing changes on the tab.

hpl123

1+, hope this can be fixed