How to align Label and Textbox on same line in Angular Formly? By default the Label is placed above an Input. How to align it in-line with the input?
Are you using bootstrap templates ? If yes is this what you are looking for?
If you are not using bootstrap templates then you can find the example there on how its done and make your own.
REMEMBER: Even though sometimes there is space to put the label on the left of the input (so it's on the same line) there are cases where it HAS to be above the input so that it will fit on screen (be responsive) and give a good user experience.
In know that it is late. But i can add something that works for me
Your type must be inline not just input or stacked-input:
type: 'inline-input'
Related
A Button in Godot can only hold a single line of text. I can overcome this limitation by placing RichTextLabel node inside the button.
Now the button can contain more lines of text, but its height doesn't change automatically when more lines are needed. Instead the text just overflows:
Of course I can manually resize the button to be higher, but I'd like this to happen automatically depending on the amount of text inside. Specifically, I'm generating a list of these buttons programmatically and showing inside a HBoxContainer, with some buttons having longer and other shorter text.
Is there a way to achieve this with Godot layout tools?
Since the Button is in a Container, it is in control of its rect_size. The best we can do is specify a rect_min_size. There is no layout preset to have a Control depend on children Control. So, to answer the question as posted: No, we cannot achieve this with Godot layout tools. We need some scripting.
We need to set the rect_min_size for the Button depending on the RichTextLabel. We can ask it for the height of its content with get_content_height. Which also means we need to set the width beforehand. However, it will not update right away when we set the text (we are going to use yield).
Apparently you don't want the Container to control the height of the Button. If that is the case, I think you can remove all the flags from size_flags_vertical.
About the width, since as I was explaining before we need to set the width to get the height… I suggest you let the Container expand the width of the Button as much a posible. Which mean setting both the Fill and Expand flags on size_flags_horizontal.
Then, with the RichTextLabel properly set to take as much width of the parent Button as possible, you can read it height, and use it to set the height of the rect_min_size of the Button.
One more thing: you want to set the mouse filter of the RichTextLabel to Ignore or Pass, or it will prevent pressing the Button.
This is the code I came up with:
var b := Button.new()
b.size_flags_vertical = 0
b.size_flags_horizontal = SIZE_EXPAND_FILL
add_child(b)
var l := RichTextLabel.new()
l.mouse_filter = Control.MOUSE_FILTER_IGNORE
l.set_anchors_and_margins_preset(Control.PRESET_WIDE)
l.text = "Some\nMultiline\nText"
b.add_child(l)
yield(get_tree(), "idle_frame")
b.rect_min_size.y = l.get_content_height()
I'd like this to happen automatically depending on the amount of text inside
Sadly changing the text does not resize, nor change the minimum size of the RichTextLabel. And RichTextLabel does not have a "text changed" signal. Nor "bbcode text changed" signal. Furthermore, it might not be feasible to intercept these properties (see append_bbcode et.al). It is proabaly easier to do with a regular Label.
Anyway, what I'm going to suggest for this is to make a Control that wraps the RichTextLabel, offers whatever interface you actually need, and in any method where you change the text, afterwards, you do the equivalent of this:
yield(get_tree(), "idle_frame")
b.rect_min_size.y = l.get_content_height()
(Godot 3.x)
Without using scripting, it is also possible to achieve the same goal by wrapping both nodes as sibilings within a container, for example a MarginContainer. Enable the RichTextLabel's fit_content_height property, which will result in the label expanding the container's area as much as necessary, which will in turn resize the Button.
Horizonal splitting is simple.
Is it possible to split vertically? Have wide screen so right hand side is empty anyways.
Edit: I would want to see basically a view of the SAME module on the left, and on the right side of the screen. I know I can put multiple windows next to each other about different modules.
A workaround could be to split the code into multiple modules and change variable scope, but I hope there is a simpler way.
Appears when a new window is inserted.
Think the only workaround is to:
insert an additional module
copy over your code there
arrange these 2 modules vertically, and use e.g. the right-hand side only for viewing, while modifying the left-hand one, to stay consistent.
I have a CodenameOne application which has a TextArea that should display a multi-line text.
When I run the app in the simulator and click on the text-area, the spacing between the lines and possibly also between the characters change so that the area that the text occupies shrinks a bit.
Why is this?
What should I do to prevent it?
That is due to the switch from our drawing to the native editing which will always render things slightly differently. E.g. things like line spacing are really hard to get accurately for every native device.
TextArea has a setRowsGap method that allows you to specify the spacing between rows in pixels but since this differs between OS's its probably not ideal.
I have a program here that uses the GTK Status bar and I'd like to have multi-line output in it. When I try to output multiple lines into it, I get glyphs instead as seen below:
I'd expect it to work like in emacs:
After some searching, I discovered layoutSetSingleParagraphMode which seems to do exactly what I want. The default setting is False for most widgets and we're not setting it ourselves anywhere which makes me think that Statusbar defaults to single paragraph mode.
My problem is that I have no idea how to go from Statusbar to PangoLayout upon which I can use this function.
The closest I have come was finding widgetGetPangoContext which then let me get PangoLayout with layoutEmpty but as the name suggest, this seems to just create a separate PangoLayout which doesn't affect the statusbar when manipulated: pushing or popping of text behaves as it did before this.
Is there a function I'm missing? Admittedly, gtk2hs swims in a sea of type-classes to emulate OO which doesn't contribute to the readability of the generated docs. It seems that it should be a simple task.
If we're never meant to get out a PangoLayout from existing widget then how can I achieve what I want? There seems to be no option to choose the paragraph mode at Statusbar creation time.
See this for a GitHub issue for this project relating to this.
Please try this:
Use statusbarGetMessageArea to get the Gtk.Box where the status bar's text label is.
Then get the text label with containerGetChildren <status bar message area>. This function returns a list of Gtk.Widget with just one element, the label.
Cast the widget to a label with castToLabel.
Now you can set multi line mode with labelSetSingleLineMode <label> False.
Set the label's contents with labelSetText or labelSetMarkup.
I have tried it with success (gtk 0.12.5 from Hackage, using GTK2, haven't tried it with GTK3).
I am trying to align two input-texts in both sides, meaning i want the label part to be aligned in the left side and the value part to be aligned in the right side. I do not want to use the alignment with thE form panel layout beacuase it doesnt do what i want. For the time being i dont want to use css also. Any clues?
Check this page the Sixth one from the top, the label-cell should make everything the way you like.
PS: you will have to use skinning which basically uses CSS!