VUEJS Set autofocus to ALL user inputs when component is created - vuejs2

I need to focus all the form user inputs onCreate(), so to make clear to the user that he can edit the fields if he needs to.
The closer thing I found is something like:
<input ref="email" />
const input = this.$refs.email
methods: {
focusInput() {
this.$refs.email.focus();
}
That should work, but I was looking for a better way to do it, without applying the ref attribute to every single input.
Is there a way to wrap them all at once?
I tried attaching the ref to the form <b-form ref="focusInputs">, then, in the method, access the inputs through it
focusInputs() {
this.$refs.focusInputs.input.focus();
}
and call it in created:
created(){
this.focusInputs()
}
But in the console I got:
Error in created hook: "TypeError: Cannot read property 'input' of undefined"
I think that's because I am using bootstrap-vue, so the input tags are <b-form> and <b-form-input> (instead of just <form> and <input>). CSS and Javascript, as far as I know, are not able to access these tags as the can with form or input.
So, do you think is there still a way to wrap them all, or do I need to mark them singularly (either with a class or with ref).
Anyone know?
Thank you,
x

You can create a css class that will apply the bootstrap textbox highlight color to any textboxes you want. The below CSS should do the trick. You can find this CSS in the bootstrap files, I just changed the name and removed the focus requirement.
You cannot however actually "Focus" multiple fields since focus is where the input cursor is set. You can only auto focus one field at a time.
.fillable{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

Related

Ability to disable text input in package "vue-search-select" - "basic-select" component

I want to disable text input in the "basic-select" component, from the "vue-search-select" package
because there are already ready-made styles for it, and I would not want to create a separate customized select
is it possible? Tell me please
I guess there is no explicit API to disable text input because this package is going to make a "searchable" select component. The text input can be hidden using CSS, however.
.search {
display: none;
}
/* or even better */
.ui.search.dropdown > input.search {
display: none;
}
However, you should be careful about the selector you choose. Depending on your project, it might have some side effects. It might be better to add a custom class to the component and use it as follows:
.my-custom-class .ui.search.dropdown > input.search {
display: none;
}

How to style Grid cell/row background without using classname generator

I searched a lot, but every solution was to include some constant CSS class names into the page, and use the Column's ClassNameGenerator to set the proper classname on the cell/row.
Now this might be a good solution when the developer can decide on formatting a cell, however when a user can decide (especially with a script written as cell renderer) how a cell will look like, it is not possible to use the ClassNameGenerator.
So question is, how can I format the cell/row background programmatically, not using any CSS? I can provide custom component as cell value. So it's fine to render a label with icon, or just icon, or a checkbox, however coloring this rendered component is not enough, since this is smaller than the cell itself, making it look really ugly. I need to access the root element of the cell, and color it using getStyle().set("background", "xxxx"). How to achieve this?
Thanks!
You can use a TemplateRenderer.
For example:
Grid<Person> grid = new Grid<>();
grid.setItems(people);
grid.addColumn(TemplateRenderer
.<Person>of("<b>[[item.name]]</b>")
.withProperty("name", Person::getName)
).setHeader("Name");
Checkout this tutorial for more information: https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid
OK, finally I solved. I use a template renderer with a proper template structure. I modified the cell style in a way, that my renderer DIV fills the entire cell (removed any padding/margin from the original cells)
<dom-module id="grid-style" theme-for="vaadin-grid">
<template>
<style>
[part~='cell'] ::slotted(vaadin-grid-cell-content) {
padding: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--cellopa: 255;
}
[part~='cell'][aria-selected~="true"] ::slotted(vaadin-grid-cell-content) {
--cellopa: 0;
}
</style>
</template>
</dom-module>
I also added some simple CSS declarations to one of the main CSS:
vaadin-grid-tree-toggle flow-component-renderer {
width: 100%;
height: 100%;
}
vaadin-grid-cell-content flow-component-renderer {
width: 100%;
height: 100%;
flex-grow: 1;
}
This way the rendered DIV fills the whole cell and I can color it's background.
Now the problem comes with the selection, since the selection is not visible any more. For this you find the --cellopa variable set to 255 normally and set to 0 for selected cells.
Now when I define a background-color on the div, I use rgba and I set the alpha to the var(--cellopa) variable, like this for example rgba(255, 0, 0, var(--cellopa))
Now when the row is not selected, the cellopa is 255, so the background is visible, when I select the row the cellopa is set to 0, so the background of the DIV gets transparent, and the row selection color on the row is visible. This is super fast, and changing the selection does not cause any glitch, and also the previous coloring state is restored properly.
I also managed to get around with the treegrid and managed to color even the hierarchy column fully using a special template for the hierarchy column with some padding taking the level into account.

Some areas inside the Vuetify Dialog box don't close it even if there is no content there

See this image here of my custom Lightbox component.
One should be able to simply exit the component and go back to the page by clicking on anywhere outside the image or the v-sheet component on the right (which by the way, is supposed to be touching the image, but I can't figure out how to move it without using margin).
Unfortunately, the red boxes exist - they are areas where clicking should close the dialog, but don't. This is because the entire Dialog component is the green box - it believes even those red boxed areas are part of the component.
I've been attempting to use #click and v-click-outside directives where possible to try and exclude the image and the sheet component can be clicked but everything else closes the dialog, but unfortunately I only get strange behaviors that donn't help at all.
Also, I found out using margin: auto will create another unclickable area, so I need to find out another way to move it over.
Source Code
Problem 1:
"is supposed to be touching the image, but I can't figure out how to move it without using margin"
Instead of lg="10" on the first col, you can use lg="auto" so it will shrink to fit its contents.
justify="center"
class="fill-height"
>
<v-col
- lg="10"
+ lg="auto"
md="12"
offset-lg="0"
class="fill-height text-right"
>
Problem 2:
"areas where clicking should close the dialog, but don't"
You can use pointer-events: none on the dialog body to disable click event capturing, then pointer-events: auto on specific elements to selectively enable it.
<v-col
lg="2"
md="4"
align-self="top"
- #click="dialog = false"
>
<v-sheet
class="rounded-tr-lg text-left"
...
- <style lang="scss">
- .v-dialog {
+ <style lang="scss" scoped>
+ ::v-deep .v-dialog {
margin: 0;
padding-left: 24px;
padding-right: 24px;
box-shadow: none !important;
+ pointer-events: none;
+ }
+ .v-image,
+ .v-btn,
+ .v-sheet {
+ pointer-events: auto;
}
</style>
Option 1: Use flexbox and #click function to close whatever
Basically, if you get your css to do a similar layout, but fill those red boxes with a background: blue you in turn can put an #click on that same div, which will close whatever you need.
Option 2: Use Modals
I would use a parent component that communicates to an "image component" and "image details component" (such that the two components are siblings.
Moreover, I would personally use v--modal for both of these sibling components, and have the closed event tied to a single instance of closing both modals by names
The shiftX and shiftY should be enough for placement.
https://www.npmjs.com/package/vue-js-modal

Ionic4 Print Media Query for Scrollable ion-content

Pretty straightforward problem. Have scroll-able ion-content in my Ionic4 application. I want to be able to print it gracefully by applying #media only print styles. I'm almost there, but I have one major problem. I cannot get the vertical scrollbar to disappear for printing. Additionally, I only ever get one page printed, containing only the content that is in view when I print the page. I've scoured the web for solutions, and come across and tried various suggestions in the context of Ionic3 and earlier, but I haven't found the magic bullet for Ionic4 yet. Has anyone encountered and gotten to the bottom of this yet?
I have been through the ringer on trying to print content in Ionic 4. Some of the steps i followed to print multiple pages.
remove any flex-box styled lists. They just will not print how you want them to across pages, though they have worked fine for me if the content fits in a page.
for items you want to be seperated by page, its best if they are a display: block; styled item, so that that in the print style sheet you can use one of the page-break properties on it
on the item containing your list, the ion-content for example, make sure you remove any max-height attributes from it or any of its ancestor or child elements, as well as removing the overflow: scroll from these elements as well so that it allows your content to go from page to page. for example on my stylesheet for printing (cant share it because of NDAs) I had a lot of overflow-y: visible on elements just to make sure it shows. if you find an element thats cutting off your html, it should be the primary target for experimentation.
you can simulate a print in the dev tools, i found it useful, it's good for iteration here's a link
some other things that may help, but i am not sure as I did so much testing across browsers, and only vaguely remember what impact that css property had is to have the body with a static position, as well as having contain: none on the body to say that the browser should render as normal, little more explanation here
i do not know the specifics of your use case, but if you don't mind foregoing the native print button, and just giving the user a button to click to trigger the print, then that would be more manageable as you do not have to account for all the scaffolding around that specific element that you want to print (the ion-router, ion-page, and all the ancestors)
If you did that then you could put all your items you want to print into a div with an id of printSection or what you prefer, and then the javascript that is responsible for that page you can create your own print function. In my example i will use angular, if you are not using that then preform whatever DOM selecting you need to to get the native html out of your template.
#Component({ ... })
export class Page {
// select the item holding your print content by `#property` you gave it
#ViewChild('printSection', { read: ElementRef }) printSection: ElementRef;
...
customPrint() {
const printContent = this.printSection.nativeElement;
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML); // pass in the native html you got
/**
* you should probably use an observable instead of an interval for this,
* but this is just to illustrate a bug where the print would be fired before
* all the content was written
*/
const interval = setInterval(
() => {
if (document.readyState === 'complete') {
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
clearInterval(interval);
}
},
200);
}
}
I Solved it following this process
First, remove the content to be printed from ion-content. Use a div instead of ion-content(shadow-dom is implemented with ion-content which blocks your CSS classes)
You also need to force the CSS below on ion-page when printing (it is initially set to position: absolute, by default)
In my case I was printing from a modal component which has a default class "show-modal". I was able to print on multiple pages by target that class this way
#media print {
.ion-page {
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
position: relative;
flex-direction: column;
justify-content: space-between;
contain: none;
overflow: visible;
z-index: 0;
}
.scroll-content,
ion-modal.show-modal,
ion-modal.show-modal .modal-wrapper,
ion-modal.show-modal .ion-page.show-modal,
ion-modal.show-modal .ion-page.show-modal > ion-content,
.ion-page.show-modal,
.ion-page.show-modal > ion-content,
ion-tab,
ion-tabs,
.app-root,
body {
contain: none;
position: relative !important;
height: auto;
overflow: visible;
}
}
I'm also trying to solve this same issue. I've scoured the Internet, and tried many an idea, but none has worked so far.
Perhaps we could solve this collaboratively. I'd put this as a comment, but I don't have enough rating points, so the system will not let me.
This is what I've found so far. In Chrome Developer Tools, you can click on a settings icon, then scroll to "Rendering," and on "Emulate CSS media type," select "print."
When I do that, it shows what the print view is. I created a separate css file, let's call it print.css, and in it, there is
#media print {
/* add your css styles for print here */
}
I know my print.css is being processed because I've
display: none
for ion-header and some tabs at the bottom, and they do disappear when I select "print" emulation in Chrome.
What is interesting is, I'm seeing the whole page -- scrollable and all -- on the screen in this print mode. However, every time I try to print it, only one page shows up.
That page, however, doesn't always start at the top. It includes the current viewport.
Which is why, I'm wondering if there is something in the css that is trying to keep the whole thing as a page. i.e., preventing a page break?
I'm experimenting with things like this:
ion-content, .foo, .bar, ion-list, ion-tabs, ion-item {
break-inside : auto !important;
break-after : auto !important;
break-before : auto !important;
}
(where foo and bar are classes you might have of your own.)
This above one breaks things. Removing ion-tabs, ion-list, and ion-item shows the full page.
I'm also experimenting with the following. None has worked so far, but that is probably because I haven't selected the right tag or class.
display: block !important;
height: 100%;
overflow-y: visible !important;
max-height: unset !important;
contain: none;
You may want to experiment with the tag in question that might be preventing a page break. Some people are suggesting it's flexbox or grid that's the root cause. I'd love to know how to find the root cause.
Good luck! If something works, let us know, so I'll also try it in my code.

Validating if the Ext.grid.panel is empty

I am trying to create a grid panel, that should highlight the grid in red, (as it happens when the validations fail on other components,) when the grid is empty. Is there a simple solution for this?
On the most basic level you can add this css:
.grid-highlight {
border: 1px solid red !important;
}
And upon load (or datachanged) events check if the store is empty and then do either:
iGrid.addCls( '.grid-highlight' );
iGrid.removeCls( '.grid-highlight' );