Can't change font-size of TabGroup or Tab

benemuc commented 6 years ago

Expected Behavior

Thank you for this tool. I really appreciate it.

However, i struggle with the increase of the font size of a tab-group. I tried the following code:

properties (Access = private, Constant = true)
   ID_ATTRIBUTE_NAME = 'id';
end

methods (Access = private)
   % Button pushed function: Button
        function ButtonPushed(app, event)
          IAN = app.ID_ATTRIBUTE_NAME;
           hWin = mlapptools.getWebWindow(app.UIFigure);
          % Return all registered widgets:
          [~,w] = mlapptools.getWidgetList(app.UIFigure);
          % Filter list:
          w = w(~cellfun(@isempty,w.id) & ...
                 cellfun(@(x)~isempty(strfind(x,'uniq')),w.id),:); %#ok
          for ind1 = 1:size(w,1)
              mlapptools.setStyle(hWin,'font-size','200%',struct('ID_attr',IAN,'ID_val',w{ind1,IAN}{1}));
          end
        end
    end

This code increased the font size of all elements, but without the tab-group (or tabs) font size.

Isn´t it possible to increase the font size of tab-groups (or tabs)?

Thanks a lot!

Actual Behavior

001 After pushbutton is clicked, every font-size is encreased, except the tabs: 002

Specifications

MATLAB Release: R2017b
Operating System: W10

Dev-iL commented 6 years ago

If you take a look at #12, you'll get the idea that tabs / tab-groups belong to the more complex element types.

I made a sample uifigure to test your problem (please try to provide something like this yourself if you report further issues in the future):

f = uifigure();
tg = uitabgroup(f);
t1 = uitab(tg,'Title','Tab1');
t2 = uitab(tg,'Title','Tab2');
[win, widgetID] = mlapptools.getWebElements(tg);

Digging through the dumped HTML code, it seems that the tab text is found in the 3^rd <span> child of widgetid="uniqName_106_0_tablist_uniqName_30_0",

<span class="mwTabLabel" data-dojo-attach-point="labelNode,containerNode">Tab1</span>

I tried changing the size of the text inside this <span>, but that proved quite useless since it doesn't increase the tab size accordingly so much of the text becomes cropped.

Therefore, I believe these elements should be modified somehow through Dijit (possible clue), but I have no idea how... :\

My temporary suggestion is overwriting the CSS attributes of all tab headers by writing some new style attributes into <html><head><script>... like so:

win.executeJS(['document.head.getElementsByTagName("style")[0].innerHTML = ' ...
  '".mwTabContainer .mwTabLabel {font-size: 16px; overflow: visible}"']);

So a full example would be:

f = uifigure('Position',[338,477,393,246],'Resize','off');
tg = uitabgroup(f); 
t1 = uitab(tg,'Title','SomeLongerStringToMakeRoom');
t2 = uitab(tg,'Title','Tab2---');
[win, widgetID] = mlapptools.getWebElements(tg);

win.executeJS(['document.head.getElementsByTagName("style")[0].innerHTML = ' ...
  '".mwTabContainer .mwTabLabel {font-size: 22px; overflow: visible}"']);

t1.Title = 'ActualString';
t2.Title = 'Tab2';
tg.Position = tg.Position.*[1 1 1.4 1];

childID = mlapptools.getChildNodeIDs(win,widgetID);
mlapptools.setStyle(win,'height','40px',childID(2));
childID = mlapptools.getChildNodeIDs(win,childID(2));
mlapptools.setStyle(win,'height','40px',childID(4));
mlapptools.setStyle(win,'height','40px',childID(5));

Which results in:

untitled

benemuc commented 6 years ago

Thanks a lot!

Dev-iL commented 6 years ago

@benemuc I changed the font not by styling a specific element, but by tapping into the CSS definition of the entire uifigure (sort of). If it's still unclear, please join me in chat - it would be easier to explain that way.

StackOverflowMATLABchat / mlapptools