Closed davidn-IA closed 6 years ago
@davidn-IA I'm not sure what the desired result is... Could you upload a screenshot (or HTML code) of what you're trying to achieve or at least explain explicitly what is it that you want to happen?
You can dump the HTML (mlapptools.getHTML
) and edit it manually. Here's my current result:
<!DOCTYPE HTML><html class="dj_webkit dj_chrome dj_contentbox"><head> <meta charset="utf-8"> <!-- Disable all caching --> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame. Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="release/gbtclient/css/uiFigureApp.css" type="text/css"> <!-- CSS : implied media="all" --> <link rel="stylesheet" href="release/gbtclient/css/main.css" type="text/css"> <!--[if IE 9]> <link href="release/css/webwidget_ie9.css" rel="stylesheet" type="text/css" /> <![endif]--><script type="text/javascript" src="https://localhost:31515/remote/proxy/1.4/CheckJsFile.js?time=1515426339231" id="dojo_request_script0" async="" charset="utf-8"></script><title>NoTitle</title><style></style></head><body class="tundra"><div id="gbt_root_node"><div class="dijitContentPane figureContentPane" id="dijit_layout_ContentPane_0" widgetid="dijit_layout_ContentPane_0"><div class="dijitLayoutContainer dijitContainer gbtFigureLayoutContainer" id="dijit_layout_LayoutContainer_0" widgetid="dijit_layout_LayoutContainer_0"><div class="gbtFigureToolsContainer dijitLayoutContainer-child dijitLayoutContainer-gbtFigureToolsContainer dijitLayoutContainerPane dijitAlignTop" id="dijit__Container_0" widgetid="dijit__Container_0" style="position: absolute;"> <div data-dojo-attach-point="containerNode"></div></div><div class="gbtFigureFrame dijitLayoutContainer-child dijitLayoutContainer-gbtFigureFrame dijitLayoutContainerPane dijitAlignCenter" id="dijit__TemplatedMixin_0" widgetid="dijit__TemplatedMixin_0" style="position: absolute;"> <div class="figureContainerNode" data-dojo-attach-point="containerNode,backgroundColorNode" data-tag="c5de43aa" style="background: linear-gradient(red, pink, white);"><div class="mwTabContainer dijitContainer mwLayoutContainer gbtTabGroupBorder mwSizeMixin gbtWidget gbtTabGroup" id="uniqName_106_0" widgetid="uniqName_106_0" data-tag="83f61cd6" style="width: 250px; height: 210px; bottom: 19px; left: 19px; font-family: Helvetica; font-size: 12px; font-weight: normal; font-style: normal; color: rgb(0, 0, 0); position: absolute; border-style: none; background: transparent;"><div id="uniqName_106_0Wrapper" class="topTabContentWrapper" style="left: 0px; top: 22px; width: 250px; height: 187px;"><div class="dijitContentPane gbtWidget gbtTab mwTabContainer-child mwTabContainer-dijitContentPane" data-dojo-attach-point="containerNode,backgroundColorNode" data-tag="d06eb87c" id="uniqName_30_0" widgetid="uniqName_30_0" style="width: 250px; height: 187px; top: 0px; left: 0px; position: absolute; visibility: visible; border-style: none; background: transparent;"><div id="undefined" data-type="matlab.ui.control.TextArea" data-tag="5546b0ce" class="vc-widget" style="left: 99px; bottom: 99px; width: 150px; height: 60px;"><div class="dijit dijitReset vc-defaultFontRules vc-textAreaEditable vc-textAreaAlignLeft vc-textArea" role="presentation" widgetid="uniqName_30_1" style="width: 150px; height: 60px;"> <textarea class="dijit dijitReset" data-dojo-attach-point="focusNode,containerNode,textbox,inlineEditorNode,backgroundColorNode" autocomplete="off" tabindex="0" id="uniqName_30_1" value="" style="width: 140px; height: 55px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; font-style: normal; color: rgb(0, 0, 0); border-style: none; background: transparent;"></textarea></div></div></div></div><div class="dijitLayoutContainer dijitContainer buttonBar tabBar" id="uniqName_106_0_tablist" widgetid="uniqName_106_0_tablist" style="-webkit-user-select: none; left: 0px; top: 0px; width: 250px; height: 22px;"><div id="uniqName_106_0_tablist_previousButton" class="scrollLeftButton" style="-webkit-user-select: none; position: absolute; display: none; left: 0px; top: 0px; width: 12px; height: 22px;"></div><div id="uniqName_106_0_tablist_nextButton" class="scrollRightButton" style="-webkit-user-select: none; position: absolute; display: none; left: 232px; top: 0px; width: 12px; height: 22px;"></div><div class="tab disabled dijitLayoutContainer-child" id="uniqName_106_0_tablistprototype" widgetid="uniqName_106_0_tablistprototype" style="-webkit-user-select: none; position: absolute; visibility: hidden;"> <span class="mwTabHeader" data-dojo-attach-point="headerNode"></span><span class="tabIcon" data-dojo-attach-point="iconNode" style="position: static;"></span><span class="mwTabLabel" data-dojo-attach-point="labelNode,containerNode" style="position: static;">###</span><span class="tabCloseIcon" data-dojo-attach-point="closeNode" style="display: none; position: static;"></span></div><div class="tab bottomOpen firstTab lastTab dijitLayoutContainer-child checkedTab" id="uniqName_106_0_tablist_uniqName_30_0" widgetid="uniqName_106_0_tablist_uniqName_30_0" style="-webkit-user-select: none; position: absolute; visibility: visible; left: 0px; top: 0px; width: 27px; height: 22px; clip: auto; color: rgb(0, 0, 0);"> <span class="mwTabHeader" data-dojo-attach-point="headerNode"></span><span class="tabIcon" data-dojo-attach-point="iconNode"></span><span class="mwTabLabel" data-dojo-attach-point="labelNode,containerNode"></span><span class="tabCloseIcon" data-dojo-attach-point="closeNode" style="display: none;"></span></div></div></div></div></div></div></div></div><script src="release/gbtclient/dojoConfig-release-global.js"></script><script type="text/javascript"> dojoConfig.setLocale(['en-us', 'ja-jp', 'ko-kr', 'zh-cn']); dojoConfig.async = true; dojoConfig.map = { "*": { "MW/dialog": "mw-dialog-utils", "MW/utils/HtmlUtils": "mw-utils/HtmlUtils", "MW/utils/InMemoryStore": "mw-utils/InMemoryStore", "MW/utils/Utils": "mw-utils/Utils" } };</script><script type="text/javascript" charset="utf-8" src="release/gbtclient/browsercheck.js"></script><script type="text/javascript" charset="utf-8" src="release/gbtclient/nls/browsercheck_en-us.js"></script><script type="text/javascript" charset="utf-8" src="release/gbtclient/gbtclient.js"></script><script type="text/javascript" charset="utf-8" src="release/gbtclient/nls/gbtclient_en-us.js"></script><script type="text/javascript" src="release/dojo/dojo.js"></script><!-- Load the main js which will create the conatiner for hosting figure and setup JS component Framework --><script type="text/javascript" src="./componentContainer.js"></script><span style="display: none; white-space: pre;"></span><iframe id="remoteWorkerAsyncProducer" src="https://localhost:31515/remote/proxy/1.4/iframeProxyRelease.html" width="0" height="0" style="visibility: hidden; display: none;"></iframe></body></html>
@Dev-iL some control over the formatting of the tab header would be great. Otherwise we're stuck with that dark grey. Up against a deadline but will try to hack something up. Thanks!
@davidn-IA Ok, so it looks like you want to edit <div id="uniqName_106_0_tablist" ...
(the dark gray) and at least one of its children (uniqName_106_0_tablistprototype
or uniqName_106_0_tablist_uniqName_30_0
). Until a more permanent solution is found I'd go through the dijit registry (mlapptools.getWidgetList
) and choose the right UI elements from there.
Small update: I have an idea what to do about this... The key is to get the child/parent divs of the div whose ID we know, then pass them manually on to setStyle
.. I tried coding it up in JS today but couldn't get it right so far. I believe I'll crack it within a few days. Expect two new public methods...
With my latest changes, adding this to the end of your code has the desired effect:
% use trial and error for child#:
[win, widgetID] = mlapptools.getWebElements(tg);
[childIDs] = mlapptools.getChildNodeIDs(win, widgetID);
mlapptools.setStyle(win,'background','transparent',childIDs(2));
[childIDs] = mlapptools.getChildNodeIDs(win, childIDs(2));
mlapptools.setStyle(win,'background','black',childIDs(4));
Closed by #13.
Grateful for all the attention to our issues so far. Here's one more. A small tweak in "getWebElements" allows the styling of the tab area of a tab group or the tab itself but not the headers using for example the following:
(sco1 edit: code formatting)