2016-05-17 3 views
0

Как уменьшить интервал в ResponsiveGridLayout? На этом изображении я хочу, чтобы не было просачивания между SearchField и Button. Я искал через Google и внимательно изучал API, но ничего не нашел.Интервал между столбцами «ResponsiveGridLayout» (SAPUI5)

enter image description here

РЕДАКТИРОВАТЬ:

   var oResponsiveLayout = new sap.ui.layout.form.ResponsiveGridLayout({ 

     columnsL : 3, 
     columnsM : 3, 
     columnS : 1 
    }); 
    var oFormLayout = new sap.ui.layout.form.Form({ 
     layout : oResponsiveLayout, 
     formContainers : [ new sap.ui.layout.form.FormContainer({ 
      formElements : [ new sap.ui.layout.form.FormElement({ 
       fields : [ this.oSearchField = new sap.ui.commons.SearchField({ 
        width : "100%", 
        placeholder : "Suchtext/ID", 
        search : this._onSearchRequest.bind(this), 
        layoutData : new sap.ui.layout.GridData({ 
         span : "XL9 L9 M6 S6" 
        }) 
       }) ] 
      }) ] 
     }), new sap.ui.layout.form.FormContainer({ 
      formElements : [ new sap.ui.layout.form.FormElement({ 
       fields : [ this.oArrowUp = new sap.ui.commons.Button({ 
        layoutData : new sap.ui.layout.GridData({ 
         span : "XL1 L1 M2 S2" 
        }), 
        width : "100%", 
        icon : "resources/images/arrow_up.png", 
        tooltip : new sap.ui.commons.RichTooltip({ 
         text : "Vorheriges Element der Suche anzeigen" 
        }), 
        press : this._onSearchArrowUpRequest.bind(this) 
       }), this.oArrowDown = new sap.ui.commons.Button({ 
        layoutData : new sap.ui.layout.GridData({ 
         span : "XL1 L1 M2 S2" 
        }), 
        width : "100%", 
        icon : "resources/images/arrow_down.png", 
        tooltip : new sap.ui.commons.RichTooltip({ 
         text : "Nächstes Element der Suche anzeigen" 
        }), 
        press : this._onSearchArrowDownRequest.bind(this) 
       }) ] 
      }) ] 
     }), 
+0

вы пробовали применять [классы предопределенный CSS] (https://help.sap.com/saphelp_uiaddon10 /helpdata/en/77/7168ffe8324873973151dae2356d1c/content.htm) для управления Button и SerchField? – Dopedev

+0

Можете ли вы предоставить скрипку/jsbin того, что вы сделали? – Dopedev

+0

Я добавил код в приведенный выше текст. Я подумал, что, может быть, я смогу избежать стилизации с помощью CSS, но когда нет другого пути, я должен это сделать. – Chris

ответ

1

Here является решением; вы можете добавить пустой Label до SearchField и установить меткуSpan (M/L/S) в соответствии с вашими потребностями. Он также будет отзывчивым, поэтому вы можете его использовать.

+0

Спасибо за помощь :) – Chris

1

класс = "sapUiSmallMarginEnd"

Использование выше класса в SearchField в представлении XML

Смежные вопросы