I am wanting to make changes to styles for instance on the forms if its view only ie not an add or edit page i want teh font size and row spacing to be reduced. I can do this manually in Radzen but its very time consuming. Ic an do it in my code editor but the changes don't get picked up in Radzen.
How can i make this work?
thanks
John
Radzen generates the app from meta data (meta folder). If you modify the generated code directly Radzen will not know about this. You might need to check also this article:
Thanks, i had read this but was hoping there was some way round it.
Let me rephrase the question, what is the best way to make changes to lots of elements in a form.
My example is a form with say 20 fields and i want to chang eth font size for the labels and change the row height so they are more tightly spaced.
If i can't do it in a code editor how do i do it?
thanks
You can apply a custom CSS class to your TemplateForm component and then define specific CSS rules in the server\wwwroot\assets\css\styles.css file.
Ok, got that but how do i change the underlying template such that when i infer a data schema and Radzen builds the page, the autogenerated textboxes all have a class attribute?
Customizing the scaffolding templates is not possible at the moment. You will have to apply the class as suggested.
Are there any plans to allow the customisation of the scaffolding templates? It seems that this would be a great option because if i've undertood you correctly the only way to make lots of changes is to do them one at a time which is very laborious.
The scaffolding templates aren't exposed at the time being. Do you consider setting a single property of a component a lot of changes? You only need to set it once per page. Then use CSS to style everything inside the form.
Sorry I must be misunderstanding you and probably ot explaingin gmyslef very well. If i have a page automatically created by the app the row spacing is about 43px I would like it to be 25px. You can see that i've changed the first one but i've got about 20 more to do on this and twenty other forms so 400 rows in total. That will take me hours and hours.
How do i easily change all the rows?
You can change all rows by adding the following CSS to server\wwwroot\assets\css\styles.css:
form .row {
margin-bottom: 20px !important;
}
Now i'm getting it.
Many thanks
As with the law of unintended consequences this works well but it also affects the pages which im using for add/Edit which have data validators.
Can i change the z-order of the validator so it appears on top of the text boxes?
form .ui-message {
z-index: 1;
}
should do the trick.
thanks, its does exactly that.
Cheers