Need to fix some CSS

Hello Radzenians,

I have a datagrid, with some cell's templets set to set to be read-only TextArea controls. Unfortunately on mouseovers with these TextAreas the mouse cursor still changes into an input cursor, even though they're read-only.

I've used my browser's developer tools to try to find the CSS that's changing this, but no luck - I'm kind of a noob. Is this even necessary? Can't I add an attribute to the TextArea to override or something?

Any hints from my favorite peeps (@Thomas & @kim) would be most appreciated...

Thanks,
Slosuenos

Hello @SloSuenos !

You can easily change the cursor in the component style. However Radzen already has its own use of the style attribute, so you can't add another style attribute manually. But you can add another item to the current style, by overwriting an existing property. Here's an example with the Width property, but this can be done using any other style property:
image
image

<RadzenTextArea style="float: right; width: ; cursor: pointer" Name="Textarea0"></RadzenTextArea>

Here you can find a list with all the cursors.

UPDATE: unfortunately I can't find a way to show my cursor in the screenshots, but I double checked and this method is working.

1 Like

@kim you're the best! What a great trick.

Strange, I see that the previous forum posts here also change the cursor to edit style - is that normal or some sort of standard? Perhaps so that you can select text for copying? Either way, it will confuse my end-users, so thank you very much. Owe you one :yum:

Slosuenos

1 Like

Hi all,
it were great if Radzen allows "merging" of the style attributes. Simply add an attribute in Radzen Designer and radzen should "add" or "replace" (if already there) while generating the blazor page. That can make a few things much handier. attributes are simple. split and join should do the job.
perhaps the radzen team will think about bringing in this feature? :wink:

Kind Regards
Thomas

1 Like

I am not @Thomas or @kim but I know why this happens. This is the default cursor all browsers display for a <textarea> element. I have two questions for you:

  1. Why are you using a readonly textbox in your template? Readonly textboxes are very confusing as they look exactly as enabled ones and users expect to be able to type in them. Changing the cursor with CSS will not improve things a lot. This is bad user experience in my opinion.
  2. If you must use textboxes why not disabled ones instead of readonly? Users are familiar with it and know that they can't type in a disabled textarea.

Or perhaps using a label component? does labels show crlf's correct?
Only an idea... not tested

Thomas

PS: @korchev
What do you think about the "attribute merging"? I think its better than using "; cursor:point" in the width attribute or similiar constructs.

1 Like

Word wrapping is demonstrated here: Wrap Text in TextBox

I have no idea what attribute merging is.

I agree this looks as a hack. I would use a CSS class for that.

1 Like

I think @Thomas is talking about adding an existing attribute, but Radzen figuring out that it already exists, thus only appending the attribute value. Here's an example:
image

Right now Radzen simply adds the attribute and causes the duplicity error shown above. It could also overwrite attributes that only have one value, such as MaxLength for example:
image

1 Like

Yes. When...
there is a style attribute e.g. style="width:100px; height:200px" that is generated by radzen.
Then someone creates an attribute i radzen designer
Name:"style" Value:"font-size:14px"

Now... when radzen generates the page... the generator looks in the generated styles... found names "width:100px" & "height:200px" ( split";") and "adds" "; " and the "font-size:14px" attribute to "style=".
So we have style="width:100px; height:200px; font-size:14px"
No duplicate "style"... all fine.

Thomas

1 Like

@korchev I'm using a read only textarea because I'm trying to emulate an existing spreadsheet with the datagrid. The spreadsheet's rows have cells that contain multiple lines of wrapped text that users need to scroll through and quickly examine. Multiple lines are a must, and I think the read only textarea is nearly perfect. Its really cool how it scrolls or can be pulled down with the mouse by an end user to expose more lines of text. Setting their border colors to light grey makes it fit in well. A disabled textarea looks out of place here in my opinion.

Below are three textareas. 1st is disabled and pulled down. 2nd is enabled, read only and pulled down. 3rd is read only, not pulled down.

While the mouse cursor on the disabled textarea is what I'm looking for, (and I'm surprised to see that it can still scroll and be pulled down), the greyed background and text are more difficult to read and look out of place...to me. I suppose the grey stuff could be fixed with some css, but I don't see any point. Are there any advantages to disabled over read only?

I may experiment with using a text box or label instead of the text area, but will they scroll and pull down also? Ideally, I'd rather not have to use template for these cells at all if there's a way to display multiple lines with word wrap, but again scrolling & pulldown?

And for what it's worth, I'm really looking forward to replacing these textareas with the hopefully coming soon WYSIWYG editor on the add & edit forms.

@kim, @korchev & @Thomas thanks for your input. You guys rock!

Slosuenos

2 Likes

I see what you mean. This is indeed a nice thing to have. We will support it in the next Radzen version.

1 Like

@korchev,
Great! This will help alot!

Thomas

Thanks a lot! Confirmed in the latest version.

Even tough the data-binding is not working when appending values for the style, I don't know if that's even possible.

@korchev currently how would I bind the display of a row for example?

In template forms when I hide components, the rows have some margins and some useless empty space is kept shown.

A ternary should work:

${visible == false ? "display: none" : "display: flex" }

1 Like

This is not working inside Template's.

Here's an example:

We will need a reproduction for this one.

OK, so after some testing there seems to be problems when having a style too long. I made an app from scratch and did the same and couldn't reproduce, as you guys probably did aswell. Then I copied the whole style from my old project and the problem occurred.

Basically, prepend the code below to the style attribute right before the binded attribute:

height: 99%; margin-bottom: 1px; margin-left: 1px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; padding-top: 1px; width: 99%;

Final coding should look like this:

I am not quite sure how to address this Blazor limitation. Any suggestions?

Yes, just needs some string manipulation:

style="@($"height: 99%; margin-bottom: 1px; margin-left: 1px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; padding-top: 1px; width: 99%;{(testTestClass.hasBorder ? "border:5px groove gold;" : "")}")"

This method worked like a charm for me.

Yeah, I remembered this one. Will try to handle it in Radzen somehow.

1 Like