In this sap.ui.layout.form.SimpleForm, I have 2 controls in the same row. Right now, they're somewhat uneven without any formatting done to them. How do I make these 2 controls both occupy 50% of the total row space?
I think this can be seen in the following sample:
https://sapui5.hana.ondemand.com/#/entity/sap.ui.layout.form.SimpleForm/sample/sap.ui.layout.sample.SimpleFormToolbar
Basically all controls have the aggregation <layoutData>. There you can add your own layout information:
<Input value="{ZIPCode}">
<layoutData>
<l:GridData span="XL2 L1 M3 S4" />
</layoutData>
</Input>
Of course this also works for a Select.
Now you just have to determine what you want to pass to the span property:
Usually layouts are based on a 12 column grid. You have to assign some columns to your Labels, maybe some empty space at the end and the rest belongs to your Inputs or Selects.
Your SimpleForm will probably have these properties:
<f:SimpleForm layout="ResponsiveGridLayout"
labelSpanXL="4"
labelSpanL="4"
labelSpanM="4"
labelSpanS="12"
emptySpanXL="0"
emptySpanL="4"
emptySpanM="0"
emptySpanS="0">
So for XL you see that 4 columns already belong to the Label and 0 to empty space at the end so you have 8 columns left. Therefore both form controls should get 4 columns.
L has 4 Label columns and 4 empty columns so each form control should get 2 columns.
M is similar to XL.
S already has 12 columns for the Label. Therefore your controls will be pushed into a second row below the Label where they each can use 6 columns.
So in that example I would suggest passing the following layoutData to both controls so they take equal space. If your SimpleForm has different values for label space end empty space then you have to recalculate.
<l:GridData span="XL4 L2 M4 S6" />
Remember to declare the l namespace at the beginning of your View so you can use the GridData control:
<mvc:View
...
...
xmlns:l="sap.ui.layout">
Related
I'm using MUI slider, and I'm at a loss how to create a slider with mapping for values more than 100. Apart from creating all 180 days in the mark array and restricting the values, is there another way to do it? I was hoping to be able to set something like step={1} and stepLength={100/180} which will give the distance travelled on the line per step (signifying one day).
I have this codesandbox with my not-working-correctly example.
Just had this same problem. Add
max={180}
In your
<Slider
...
min={0}
max={180}
...
/>
Then change the values under your labels inside of
const Marks = [...];
To get your desired output!
If you want to add a side button to increment by a certain amount, MUI also has an input field option.
I need to fit a Label and a Hbox within block layout.
<l:BlockLayout id="BlockLayout">
<l:BlockLayoutRow>
<l:BlockLayoutCell width="100%">
<Label
class="sapUiTinyMargin"
text="Hello All"
>
<Hbox>
</Hbox>
</l:BlockLayoutCell>
</l:BlockLayoutRow>
</l:BlockLayout>
Every time I press Ctrl++ / - to zoom in or out, the block layout contents change their position. E.g.: Label shifts right on zoom out and in on zoom in.
What should I do to stop this?
The thing is: BlockLayout is a responsive UI5 element. It is like a flexbox, and it will always try to adjust its elements to "optimize" (so it thinks) the space it has.
I am not fully aware of what you really want to do, but my advice will be to not use BlockLayout and try to place manually (css) your elements (since it looks you don't like the responsiveness of the elements...
Some properties like: justifyContent="SpaceBetween" justifyContent="SpaceArround" alignItems="Center".
Might be useful to you, I'm not sure.
I have created a GridControl with a few fixed width and 2 autowidth columns.
I have set the autowidth columns like this:
<dxg:GridColumn
Width="2*" FieldName="Name"
FixedWidth="False" Header="Name" />
<dxg:GridColumn
Width="6*" FieldName="Subject"
FixedWidth="False" Header="Subject" />
I intended to have a 2:6 proportion regarding the widths of those columns, so I set their Width to 6* and 2* as proportional values.
Strangely, the following happens.
When they are set to 6* and 2*:
When they are set to 5* and 2*:
Clearly, if the multiplier is below 6, it works as there are no multipliers (the columns fill equally the remaining space), but when it is over 5, the proportion goes mad and shrinks the lower multiplied column.
According to their support, it supports proportional settings.
How can I create a 6:2 proportion without setting a MaxWidth?
I suggest to set AutoWidth property of TableView to False, it should then work as expected. Also, I believe you don't need to set FixedWidth on columns (it only works in AutoWidth mode).
Hope this helps!
I've encountered a problem. We know that the select will show a vertical scrollbar when number of elements exceeds 20 in chrome(30 in firefox). Can we find a way to show a vertical scrollbar when the number of elements exceeds a specific count. Below is an example:
Thanks for any advices.
Use size in your vertical scrollbar to change the default value
Set the "size" attribute of your list to the specific count value.
example:
<select size="yourSpecificValue">
</select>
if the items in the list exceeds this value the scrollbar will be automatically added.
There is a function that sets size of the selected text: RichTextArea.BasicFormatter.setFontSize(RichTextArea.FontSize fontSize))
It takes an absolute font size argument (1-7). But I need to set size in pixels. Is it possible to do somehow?
Any suggestions or ideas are welcomed =)
You have to implement your own control (i.e. a ListBox) which on selection would insert tags like
<span style="font-size: 12px;"> ... </span>
around the selected text.
A good implementation will also remove unnecessary tags if a user applies font sizes to overlapping portions of the text.
You can add this control to the toolbar that you use with your RichTextArea.