Material-ui Select adapts the select's width according to selected MenuItem's width. I would like to keep it as large as the largest possible menu item: It looks a bit unfinished when the form modifies its size. I couldn't find any reference to that in the doc.
I can fix the width in css, but it's not adaptative to option
edition.
I can use JS to multiply the number of characters of the menu item and multiply it by the maximum width of one letter and apply this width to the select.
Is there a simpler solution I didn't find?
Thanks
Related
I have an UI element that has a Text and an Image as its children. It has a HorizontalLayoutGroup component that enables Control Child Size and Child Force Expand.
I want the Image has a fixed size, and Text has strechable size controlled by the HorizontalLayoutGroup. So when the Image is set to inactive, the Text fills the whole space and when the Image is active, the Text shrinks a little bit in order to give space to the Image. Right now this part works good.
My second goal is to align them to both ends: the Text in the left and the Image on the right with space in between. But changing Child Alignment can't achieve this.
I tried the following solution:
Add LayoutElement both to Image and Text. On Text, enable Flexible Width and set a a value, on Image, enable Min Width and set to a value. Manually adjust the two values until it seems right.
This solution seems to work, but I don't know why. Is anyone familiar with this?What's the recommended way to do it? Thanks!
I worked it out. On the LayoutElement, treat Preferred Width or Preferred Height as Max Width or Max Height. Enable them, set the value the same with min value. One the other objects that you want to stretch, enable Flexible values. Then all worked as we want.
I am trying to setup a style based on bootstrap3.
Basically I want to try and reduce the size of the input elements which I have done, getting a decent proportion of 'box' vs 'text'.
However if I use the same font-size in a select box with the same size then I get a situation where the text is masked along the bottom edge...
I think there is a tiny bit more margin at the top of the select box, but for the life of me I cant find where that is set in BootStrap to change it (if at all).
I think all I need to do is move the text in the 'select' element up by a couple of pixels and it will align with those bits of text in standard text boxes....
Can anyone point me in the right direct please?
Found the associated CSS in the bootstrap, with a bit of trial and error....
Mainly in the 'form-control' section.
but now also using Bootstrap 4, with a couple of additional styles.
I am using sap.ui.table.Table. This table has some very good feature but I am having a tough time to figure out how to set the column to auto width.
Currently, all the columns are fixed size but I want something if column A value is small, then auto adjust it rather than having fixed size. Same for if the column value is large, then adjust it to show the value.
I saw the other question sap.ui.table.Table how to optimize column widths but the answers there are to get column layout with fixed sizes, not auto width.
The control sap.ui.table.Column offers a property called autoResizable by which the user can resize the column width depending on the content of the column's template.
<Column
autoResizable="true"
...
From API Reference:
Enables auto-resizing of the column on double clicking the resize bar. The width is determined on the widest currently displayed content. It does not consider rows which are currently not scrolled into view.
However, as you can see, it requires user interaction. Doing it without user interaction programmatically can be achieved by using the (currently experimental) API autoResizeColumn from sap.ui.table.Table.
myTable.autoResizeColumn(/*ColumnIndex*/); // experimental!
Here is an example of both approaches: https://embed.plnkr.co/NQpkJo/.
I use iReport to create reports, and I would like to know if there is a way to set the width of "optically grouped fields". They should be set to the minimal size that still displays longest text. I have Static Text on left side and Text Field right of them. This Text Fields are set to the width 150 and alignment to right, but I'd like to set smaller size to wipe out white spaces.
Consider some thing like this
Name: Paul
Surname: Smither
And want automatically to
Name: Paul
Surname: Smither
etc. can be smaller then preset size but no bigger.
Is there a way?? even some component
You cannot change the element width dynamically without using Java frameworks.
The quote from JasperReports Ultimate Guide:
ELEMENT SIZE
The width and height attributes are mandatory and represent the size
of the report element measured in pixels. Other element stretching
settings may instruct the reporting engine to ignore the specified
element height. Even in this case, the attributes remain mandatory
since even when the height is calculated dynamically, the element will
not be smaller than the originally specified height.
You can read this article for better understanding the mechanism of changing the element size.
If it's genuinely just a couple of fields that come from the same row in the dataset, then you could hack something together.
Use a monospace font
Define your maximum field length with a String set to N spaces. For example:
$P{MaxLengthString} default value is 10 spaces: " "
Change your field text from $F{FirstName} to this:
$P{MaxLengthString}.substring(
$P{MaxLengthString}.length() + $F{FirstName}.length() - java.lang.Math.max($F{FirstName}.length(), $F{LastName}.length())
) + $F{FirstName}
That is... er... a bit more complex. And it only works with monospace fonts. And I can't believe I really suggested this. Don't do it. (But it ought to work.)
I want to set height of tiny mce depending on the type of element it is initialized for. For example, I want to set height 200px for headings and use mce's default size for for paragraph and ordered and unordered lists. Also, I want to adjust height of the mce instance with the content. Instead of adding vertical scrolls, it should increase with content.
Help APPRECIATED.
For this you need to specify editor_css in the tinimce init.
There you should change the desired values.