TabControl button size

[sjcomp]

Hello,

I'm using CELayoutEditor to add TabControl to my gui. It looks good at 640x480, but if I increase the screen resolution, then text in the tab buttons is to big to fit into the button. How can I change it, so it always fits?

Here is the example: 640x480

And with the higher resolution:

Thank you.

[scriptkid]

Hi,

[edit] I replied with a note about the AutoScaled font setting, but appearantly the tabcontrol on my end looks okay with both this setting on or off, and on multiple resolutions. Maybe you can post your .font file contents + your layout? [/edit]


Thanks.

[sjcomp]

Interesting to notice that there is no problem if I create tabcontrol at a large resolution. Text gets smaller as I decrease the resolution of the tabs.
Here we go:

Code: Select all

<?xml version="1.0" ?>
<Font Name="Tahoma-12" Filename="tahoma.ttf" Type="FreeType" Size="12" NativeHorzRes="800" NativeVertRes="600" AutoScaled="true"/>


I've created a new layout using CELayoutEditor 0.6.0. I've placed tab control when the resolution was set to 640x480 if I go to full screen 1440x900, then words are hardly fit into the tabs.

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

<GUILayout >
    <Window Type="DefaultWindow" Name="Root" >
        <Property Name="InheritsAlpha" Value="False" />
        <Property Name="UnifiedMaxSize" Value="{{1,0},{1,0}}" />
        <Property Name="UnifiedAreaRect" Value="{{0,0},{0,0},{1,0},{1,0}}" />
        <Window Type="TaharezLook/TabControl" Name="Root/t" >
            <Property Name="Font" Value="Tahoma-12" />
            <Property Name="TabHeight" Value="{0,22.2812}" />
            <Property Name="UnifiedMaxSize" Value="{{1,0},{1,0}}" />
            <Property Name="TabPanePosition" Value="Top" />
            <Property Name="UnifiedAreaRect" Value="{{0.3,0},{0.3,0},{0.732813,0},{0.55,0}}" />
            <Window Type="DefaultWindow" Name="Root/t/Tab 1" >
                <Property Name="Font" Value="Tahoma-12" />
                <Property Name="Text" Value="Global" />
                <Property Name="Visible" Value="False" />
                <Property Name="UnifiedMaxSize" Value="{{1,0},{1,0}}" />
                <Property Name="UnifiedAreaRect" Value="{{0,0},{0,0},{1,0},{1,0}}" />
            </Window>
            <Window Type="DefaultWindow" Name="Root/t/Tab 2" >
                <Property Name="Font" Value="Tahoma-12" />
                <Property Name="Text" Value="Qq" />
                <Property Name="UnifiedMaxSize" Value="{{1,0},{1,0}}" />
                <Property Name="UnifiedAreaRect" Value="{{0,0},{0,0},{1,0},{1,0}}" />
            </Window>
        </Window>
    </Window>
</GUILayout>


[sjcomp]

Actually I found that the only difference between tabcontrol created at a higher resolution is TabHeight value which is larger for a larger resolution and given that it's more than one it's given in pixels. So no matter what the resolution is the actual height of the tab stays the same. If it's ok in low resolution, than words stick out in high res, and if it looks good in high res, then the buttons are extra huge in a small resolution (because font is scaled).

Is there a way to make it proportional?

Thanks.

[CrazyEddie]

Hi,

I did not get a chance to look at any code, but if there is no possibility to specify the tab button height as a UDim value, then this should be filed as a bug.

CE.

[sjcomp]

I did not get a chance to look at any code, but if there is no possibility to specify the tab button height as a UDim value, then this should be filed as a bug.

I see in the lookandfeel file that

Code: Select all

        <Child  type="Simulator/TabButtonPane" nameSuffix="__auto_TabPane__Buttons">
            <Area>
                <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="RightEdge"><UnifiedDim scale="1" type="Width" /></Dim>
                <Dim type="TopEdge">
                    <PropertyDim widget="__auto_TabPane__Buttons" name="EnableTop">
                        <DimOperator op="Multiply">
                            <UnifiedDim scale="1" type="Height">
                                <DimOperator op="Subtract">
                                    <PropertyDim name="TabHeight" type="Height" />
                                </DimOperator>
                            </UnifiedDim>
                        </DimOperator>
                    </PropertyDim>
                </Dim>
                <Dim type="Height"><PropertyDim name="TabHeight" type="Height" /></Dim>
            </Area>
        </Child>


It looks like there is UnifiedDim specified. But in the layout it's simply TabHeight, how can I specify that I want to use relative size?

Thanks.

[scriptkid]

Hi,

TabHeight is a UDim, so instead of the pixels you might make a combination. Let's say you want it to be 8% of your window, plus some pixels, use:

Code: Select all

<Property Name="TabHeight" Value="{0.08,5}" />


HTH.

[sjcomp]

Thanks scriptkid, it did the trick!

[scriptkid]

^^Excellent