I created a Blazor fiddle for easier understanding.
On the left hand side, you see, what I have: There is an <input>, two <span>s that display values that depend on the <input> and a third <span> that displays the sum. The <span>s are editable but when I edit the values, the sum is not updated.
In the middle, you see, what I want: I changed two <span>s to <textarea>s and bound their contents to the properties Number3 and Number4. This enables me to have an updated sum not only when the <input> is changed but also when I enter a number in one of the <textarea>s.
These bindings work well with <textarea>s but not with <span>s. But I'd like to use <span>s, because no formatting is necessary (e. g. width and height) and depending on other conditions, the content should be editable or not. I realized this with contenteditable="#(UserIsLoggedIn ? "true" : "false")".
On the right hand side, I tried <span>s but a simple #bind="Number5" produces an error during run time because it is interpreted as attribute and the error is
Failed to execute 'setAttribute' on 'Element': '#bind' is not a valid attribute name.
So I tried #bind-value="Number5" #bind-value:event="oninput" but this only creates an attribute named value. In the dev tools I see, there is a <span value="2"></span> with size 0x0, because it is empty.
Is it possible to bind properties to <span>s just like I bound them to the <textarea>s? If not, can I make a textarea look like and behave (contenteditable="false") like a span?
Related
I have a basic 2 column table for a form. In the left column are the labels, and in the right column are the inputs. When the user submits the form, if there are errors I want to display them directly to the right of the input in which the error was relating to. Could anyone provide an example of how to position a div next to the table row without shifting the columns across?
You could have the <div> representing the error inside of the <tr>. If there is no error it could just be empty. You can use a js templating framework like Mustache.js to pass arguments into your <div>.
I would encourage the use of Flex Grid. This is a CSS ruleset that will help you layout your form. You can still use two column format, with the only change being the you will probably want to reduce the size of the first column relative to the second column, to leave room for an error message.
Another option would be to use abandon tables and use CSS Grids instead.
Take a look at these links for more information:
http://flexboxgrid.com/
https://css-tricks.com/dont-overthink-flexbox-grids/
https://css-tricks.com/snippets/css/complete-guide-grid/
{{expression}}
Let us assume the output it will give is
"ABC-DEF,HIJ-KLM"
Now I wanted to have values after and before "-" to have different colors.
Since it is coming from an expression I don't know how to proceed. I tried building pipes for formatting but it did not work.I am not allowed to split JSON
and populate and style the divs separately.
You can't set css on expression because it is not an html element. If you want to split at '-' and set different color to each part you need to put the parts in two elements (like span or div) and set css on the elements.
I have a QTreeView on my window and I want to set the following behaviour: columns width must be set to resize to contents, which I have done like this:
tabla->header()->setResizeMode(QHeaderView::ResizeToContents);
Now, what I need to do is set rows to only 1 line, so, if a column contains '\n', they should not be displayed (I have a detailed description dialog to see that).
To sum up, I need to set something like "no multiline" on my treeview.
Any help would be appreciated.
I'd rather not extend qtreeview, since I have a lot of thems and wouldn't like to change them all, but if that's what it takes...
QTreeView seems to ignore the newlines in contents when uniformRowHeights is true (seen with Qt-4.8)
This not documented, so normally it shouldn't be relied upon. It would be best to remove the newlines or replace them with spaces when populating the treeview.
Also, I've noticed an exception: if there is only one row in the treeview and it contains a newline, then it gets displayed in two lines, regardless of uniformRowHeights.
In particular I have a GWT project with a
TextArea element which I want to conform to a set width and expand as much as needed to the bottom.
ListBox element which I want to conform to a set width and expand vertically to show the entirety of the displayed list item.
Those are two widgets using replaced elements: <textarea> and <select> respectively.
for the TextArea, there's no way to make it really "resize automatically" other than listening to events and computing the new size (there's actually no need to compute the new size, you can just let the browser do it; see http://phaistonian.pblogs.gr/expanding-textareas-the-easy-and-clean-way.html)
for the ListBox, it's impossible to have the items' text wrap. See Word wrap options in a select list for a similar question in pure JS.
Set the width to whatever number and set height to auto.
I currently have a table that has a few hidden text boxes... The text boxes become visible when certain actions are performed.
The table though changes size according to when the textboxes are visible or now. Ex. When the textboxes are visible the table grows, and vice versa.
I would like to keep the table size at its max size ( size when the text boxes are visible) even when they are not.
Is this possible?
Thanks!
One way is to have something inside the td tags, like a This will cause the td to render.
Another way is to set the controls to "hidden" instead of "none". Hidden allows the controls to still be rendered to html, just not displayed. None will cause the controls to not be rendered at all.
I don't know if the "hidden" setting will still grab the space you want. You might still need the non-breaking space control.