Jump to content
michael3785

Tweaking tab control height

Recommended Posts

michael3785    0

I have avery big solution that was built in FM7 originally and it needs a UI overhaul. So, no themes are as good as they are I am rolling up my sleeves and putting together a reference design. have been looking around at design templates to lift (speaking frankly) and I like the FM Starting Point design. However there are a few things I need to tweak that I can't readily see how to do it in Inspector. The main one is the height of the tabs in the tab controls. They are too high for my layouts. As far I can see I either have to hack the CSS somehow or I have to use a conditional fomatting workaround, set the text size really small to reduce the height of the tab, then conditional format the text back up to the correct size, which is a bit yuck, seeing as I have lots of tabs.

Any advice much appreciated. Many thanks.

Share this post


Link to post
Share on other sites

I would think hacking the CSS is the worse idea.   I don't quite understand this part:

On 7/4/2017 at 11:23 AM, michael3785 said:

 So, no themes are as good as they are.. 

If you dig a little deeper into FMSP you'll see changing the tabs is easy.  Go into layout mode, click on a tab control, open up the inspector palette on the styles tab.  You'll see the very large tab controls on the Contacts layout listed with the style of Default.  Try changing it to Alternate Tab Control.  This styling for the tab control is attached to a custom theme.  You can go through and change themes (on a copy first).  Go through all themes until you see the elements you like-Tab controls, scroll bars, etc.  Then save them as a new style to attach to your custom theme.

But more importantly if you're coming from FM7 to 16, research Themes and Styles on the forums and blogs.  You really should create a new custom theme, and style all objects and save to the custom theme.

You can also create tab panels with no labels, and use the button bar to mimic labels, where selecting a button changes the tab panels.

Share this post


Link to post
Share on other sites
Lee Smith    145
On 7/4/2017 at 8:23 AM, michael3785 said:

have avery big solution that was built in FM7 originally and it needs a UI overhaul

This doesn't sound like you are using FM Starting Point, rather instead, a file you developed in FileMaker Pro yourself?

Quote

looking around at design templates to lift (speaking frankly) and I like the FM Starting Point design

I sent you a Private Message, please read it first.

Share this post


Link to post
Share on other sites
nick.hunter    1

Hi, I'm Nick Hunter developer at RCC who designed the new FMSP.

There's only one way to tweak Tab Control height. 

There is 2 type of Tabs: 

  • The Tab Control in Themes for Desktop
  • Tab control in Themes for Touch.

Tabs for Desktop are "thin" when tabs for touch are twice as big.

How to transfer thick tabs control from a Touch Theme to a desktop theme?

1- Create a layout with the theme of your choice for Touch.

595d744424c79_ScreenShot2017-07-06at2_20_21AM.thumb.png.544e7d044980fc1df919f8c46fd95569.png

2 - Create a Tab Control

3 - Copy the Tab Control Tab from the theme for touch.

595d7302e3703_ScreenShot2017-07-06at2_12_40AM.thumb.png.eb3dce5e21eebe8c05a71a38366152b4.png

 

4 - Go to the layout with the theme for Desktop

5 - Create a Tab Control 

6 - Paste the style to the Tab Control... The tab becomes like the one for Touch.

595d74ac0bf30_ScreenShot2017-07-06at2_21_30AM.thumb.png.01c53704eccd6d2de0f4895a35c08303.png

7- Save a new Style... and Voilà.

595d73db4d596_ScreenShot2017-07-06at2_13_32AM.thumb.png.7f51c1aec66546b17453dd24ff7f3bec.png

You have now both Tab Control in the same layout.

595d73ea1eb56_ScreenShot2017-07-06at2_18_06AM.thumb.png.8cf891f6d3c47b8eb3fa51b1ede16f01.png

 

 

 

Screen Shot 2017-07-06 at 2.13.24 AM.png

  • Like 1

Share this post


Link to post
Share on other sites
michael3785    0

Hi Nick

Many thanks for your explanation. That worked perfectly :)

I copied the smaller tab control from the other layout over to my working one and created a new style based on it.

Thanks very much

Michael

 

Share this post


Link to post
Share on other sites
Lee Smith    145

Here is a link that discussed this same thing. The answer here https://community.filemaker.com/message/79268#79268 might be of help.

 
Quote

 

DavidJondreau  Apr 23, 2012 12:52 PM (in response to jgalt)

Set the font size to get the tab height you want. Then set conditional formatting on the tabs to a calc = 1 and set your desired label font size.


 

I used calc as Self = 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • By Monarch
      Is it possible to set a trigger on the tabs that sets one global field/one variable?
      For example: I have seven tabs: Monday, Tuesday....Sunday.
      Clicking each tab would set a variable: Mon, Tue... and so on accordingly.
      But I can't assign script parameter to each tab - it sees it as one script with one parameter.
      I can name each tab as object, but how do I extract object name and use it for changing data in the field/variable?
      I hope it's clear...
    • By docasar
      Hello,
      I have a tab control panel with four tabs, and I would like to achieve that when I change tabs a script is triggered and would set the value of a global field called "zzz_g_collection_type" according to the tab name which is active.
      I need this field to dynamically filter the products that are shown on 1_row portals that I have put into each tab panel space.
      I have followed Elishree Dey tip on http://burnignorance.com/filemaker-pro-tips/trigger-a-script-when-user-changes-the-tabs-in-filemaker/ but I cant make it work, it only changes the value of "collection_type" field once and only to show that the first condition is not met.
      I have attached the picture of my script.
      My initial idea was to place on each tab space a picture-field of a product as a 1 row portal and then duplicate as much as products I have so when I click on the picture a script is triggered and the product is added to the invoice.
      Morever, I have set an Object name to each tab Control so it would work, and also the desired value for zzz_g_collection_type comes from another related table with only one record that I use as preferences, this is on Preferences Table I have three fields called "Product_Type_Short_#" and those match on Elishree Day script tutorial.
      Any ideas what I could be doing wrong?

    • By Trinity32244
      I am new to using themes and styles.  I have chosen the onyx theme for my new project.  My issue I am having is for tab controls I put in the layout are not formatting when I change object attributes.  I have set fill and line to no fill and no lines yet it still shows up with borders and a bar behind the tab selection area.  I use transparent tab panels for a lot of user interface objectives and have wasted hours trying to figure out why it won't change when I make them in the inspector bar
       
        
    • By dataclip
      Hi, 
       
      I have created an interface with a tab control panel. On my computer it looks like the DeveloperPC image. However, if my customers opens the file on his computer he sees the customerPC image. In other words he does not see the tabs on his screen. When he changes the zoom level to 150% the tabs appear. Any idea what can cause this behaviour??
       
      Thanks,
       
      Joost Kingma
       


    • By scoony
      Hi All,
       
      I'm in the process of designing a Filemaker Go 13 solution for my company. One of the layouts has six questions which the relevant response in Pop-over menus. I have also set the tab order which opens the next questions Pop-over answer options.
       
      Once the last question has been answered I'd like to highlight a button.I realise that the tab order for iOS does not recognise buttons. I have tried to use the following with no success.
       
      Script Trigger on last question field:
       
      OnObjectModify with script GoTo Object naming the button I would like to highlight
       
      At the moment the script trigger is ignored and the first question is highlighted again, as in the tab order going in a loop.
       
      Any ideas would be much appreciated.
       
      Thanks
       
      Zab
       
       
×

Important Information

By using this site, you agree to our Terms of Use.