Suppose I have a layout which includes some element, say DataTable. How do I update its value without using callbacks?
Related
The Goal
I want to have a v-data-table that is editable and looks "nice".
The problem
Adding a v-text-field to make it editable also increases the row-height to a very eye unpleasing level
Original view:
With v-text-field inputs
The quesion
How can I decrease the row height to resemble the one without v-text-fields.
As a Bonus
Because I am quite new to this whole Front-End-Development-Kind-Of-Thing, how would I go about it identifying what is causing this "height issue"?
PS: I've tried to add a JSFiddle but I cant even seem to be unable to figure out how to display the v-data-table correctly...
The basic draft can be found here
Is it necessary for your table to be editable within the columns? How do you decide when to pass data back via request to your Backend? After the user left a field?
If it is not necessary to have the edit option within the table, I would just use the action buttons you already have in your table to trigger a modal in which you can edit the fields. This also allows you to have proper form control before a user can submit a request. There is also a Vuetify Codepen with an example how to do this Codepen
If it is necessary you should implement the v-data-table as v-data-iterator which is essentially the same functionality-wise, but allows for complete control over the look. https://vuetifyjs.com/en/components/data-iterators/
As to how to identify the problem with the v-text-field height you have to use your browser dev tools. You would then realise that the input has default paddings and margins but also a whole lot under the hood. It e.g. allocates space for error messages to pop up and for a label to go above the field.
And how to fix your JSfiddle you can read in the getting started section of the vuetify documentation under CDN https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn.
you can use the "dense" property for Lower height of v-data-table inputs
https://vuetifyjs.com/en/components/data-tables/#dense
I'm using angular, and the question is, if I put all my SVGs in one file, can I dynamically put them in the HTML code depending on a condition? It has to be SVGs because I need to use the fill option dynamically too.
I can just use *ngIf but with the long SVG codes, it becomes unreadable. Is there a viable solution? Thanks!
So here's how I solved this in angular. I made separate components for each svg. Then pass value for stroke and fill to those components, and use the value to assign class.
So basically, I get the value X from backend, that values gets passed to the component, and that is switched around conditionally.
<app-example-svg [fill]="fill" [stroke]="stroke" *ngIf="type === 1"> </app-example-svg>
Now this value decides, which svg is used.
2nd, I use these values to change the classes applied.
ngOnChanges() {
this.changeColor(this.fill, this.stroke);
}
changeColor(fill, stroke) {
if (stroke) $('.svg').addClass(`stroke${stroke}`);
if (fill) $('.svg').addClass(`fill${fill}`);
}
And I get dynamically switching SVGs, with dynamic switching of fill and stroke properties.
Thanks to everyone who replied!
Im trying to build a form in angular, when you blur on a field and the field is in an invalid state it adds a 2px red border around the edges of the field, the problem is that when one input field is touched all of them inherit the touched because the ngform object applies the ng-touched class to the form element which in turn all inputs inherit. what is the correct way of doing what I'm looking for?
Picture of what I think the issue is
Only one of these should be highlighted
HTML
CSS
if you want use ngModel alone use a template reference variable
#myTemplateVar="ngModel"
Else, if you want to make a binding use [(ngModel)], see Angular docs template driven form
And, please, better write the code, not use images, if you write the code, select it and use Ctrl+K it's is formated as code
How can I go about creating a form which pops up when the user clicks a button on a Jade template? I tried the following in HTML, which works:
http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Now to use this in my Node.js project would I need to create a separate Jade file for the form itself? That is what I tried and then I tried to display the form like this:
function div_show() {
alert("Test");
document.getElementById('abc').style.display = "block";
}
Unfortunately that does not work. What is the recommended approach for creating a pop up form in Jade? I am really confused with Jade and I can't seem to find a good tutorial for this, there are loads for HTML...
Thanks for the help!
Normally for this you would use:document.getElementById('abc').style.visibility="visible";
To hide your table use:document.getElementById('abc').style.visibility="hidden";
When using the 'style' attribute you are using plain css commands. Make sure your default div style settings have it 'hidden', if that is what you want.This display:block;visibility:hidden;' must exist in your default settings for that div style so the DOM has a clear path to what it is controlling. By itself 'display:block;' does not hide or make objects visible, it is mostly about the shape the div creates as a container for objects.
As an option you can use:
document.getElementById('abc').style.display="block";
To hide your table use:document.getElementById('abc').style.display="none";
For this you would set your div style settings to 'display:none;visibility:visible;.
In this case 'display="none"' removes the object from all display layers and could allow other objects to fill in it's space. When it is visible it will push other objects on the same z-index out of the way. If it has a higher z-index, say +100 higher, it will pop-up above the other objects on the page. The 'visibility' attribute only controls the objects visibility, it does not remove it from the display memory. It can still take up space even though it is not visible. The 'opacity' attribute does about the same thing, except it allows you to also make an object as transparent as you like.
I created a method and pass the element type, id, and any inner text that instantiates a new html element. The last statement: Me.Controls.Add(element) adds it to the end of the page, but I would like it to be inserted in a specific position (between 2 divs within a form). What I am describing is very similar to this post on SO here, although it was for javascript.
Perhaps look at using a PlaceHolder control..