From 83fe2b0afab57482c548ccb360fc1266891fa051 Mon Sep 17 00:00:00 2001 From: xuegao Date: Wed, 25 Sep 2019 11:23:18 +0200 Subject: [PATCH] Fix the ooperational policy ui issue Update the css of the Jsoneditor tab component so that the operational policy UI will not have names overlapped. Issue-ID: CLAMP-511 Change-Id: I05806a398cd7f642290d7dbef1e58533a8bdac1c Signed-off-by: xuegao --- .../OperationalPolicy/OperationalPolicyModal.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js index 1ebe5f0e..4dc1f90a 100644 --- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js +++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js @@ -77,8 +77,22 @@ export default class OperationalPolicyModal extends React.Component { } setDefaultJsonEditorOptions() { - JSONEditor.defaults.options.theme = 'bootstrap4'; - + JSONEditor.defaults.themes.myBootstrap4 = JSONEditor.defaults.themes.bootstrap4.extend({ + getTab: function(text,tabId) { + var liel = document.createElement('li'); + liel.classList.add('nav-item'); + var ael = document.createElement("a"); + ael.classList.add("nav-link"); + ael.setAttribute("style",'padding:10px;max-width:160px;'); + ael.setAttribute("href", "#" + tabId); + ael.setAttribute('data-toggle', 'tab'); + text.setAttribute("style",'word-wrap:break-word;'); + ael.appendChild(text); + liel.appendChild(ael); + return liel; + } + }); + JSONEditor.defaults.options.theme = 'myBootstrap4'; JSONEditor.defaults.options.object_layout = 'grid'; JSONEditor.defaults.options.disable_properties = true; JSONEditor.defaults.options.disable_edit_json = false; -- 2.16.6