loading circle/image on div using css - css

I want to show a moving loading circle or some image with text"loading", it must be displayed on click of the save button of form. It must stay on the form till the values are going from client side to server side.
I have my form code in jsni.
help me with the css of it that how can i add the effect to the div of the form.

Related

How to remove unknown property created during opening of a mat-select modal

I am facing problem on removing unknown division created during opening of a mat-select.
When I am opening a modal and after selecting values ,I need to click directly on the button given on side but because of some property of modal a div is getting created and I have to do two clicks on the button to apply changes.
Right now when I am clicking outside the mat-select modal to make it close then clicking on button it is going correct. But I need to open modal -> select options -> direct click on the button given.
Something in the background is blocking the first click when opening a mat-select modal. I am not able to see what is that. Is there some css property that can be block ? I am not getting exact hidden problem.
Modals in Angular Material create something that's called 'backdrop' by default. This backdrop is like a layer right behind your modal, filling the whole page. If you click somewhere on the page, your target will be the backdrop, which then closes the modal.
So for you to achieve, what you want to achieve, you have the following options:
edit the backdrop behavior to not prevent the default click action, so that clicks on the backdrop close the modal but also trigger the action you want
remove the backdrop on opening of the modal (this can be done by setting a flag hasBackdrop in the open methods config parameters) and close the modal programmatically by triggering the close method of the MatDialogRef
This is standard modal behavior, you should include all your needed options either before opening a modal or in the modal itself after being opened.

How can I give CSS styles to each instance of the same dynamic component angular8

Im new with Angular and I am creating a chat application with the same facebook behavior. I need each chat box to appear at the bottom of the screen (right now they appear in the middle of the screen) and as a user is selected the box that comes out You should leave next to the one that is already there.
I also need that when those chat boxes occupy the entire space, something similar to the image attached is shown, a button where the first boxes that you select come out so that you can select and resume that conversation. In the following link I have my application working. Could someone help me? The application code and the demo can see it here.
The image of the behavior that I want is the following:

write tool-tip that can be invoked for ay html element. should consist of 3 elements title, content, Okay button

I really need help. I am unable to find any examples to this particular problem. I have spent many hours and really want to give up. We have never covered this in the program I am in and I really do want to learn even how to begin. I spent 5 plus hours working on this and came up with a solution that worked but since it did not follow all rules it was not accepted. We have not covered tooltips so I’m not sure how to go about this.
The question is to write a tool-tip that can be invoked for any html element on a given page. The preferred position can be viewed left right or bottom of html element. Should contain title, Content, Okay button that will dissolve after user clicks the okay button.
api to be used is
$('#HTML element').showToolTip ( {
Title: 'This is the title'
Content: 'This is the content'
onApprove: function() {
//to be called after Okay button is clicked.
}
} );
showToolTip is a jQuery plugin to create a tool-tip-style alert popup which can be attached to any element when triggered.
It provides a callback function which will be fired when the user clicks on the Okay button inside the alert popup.
The plugin grabs dimensional information about the popup, host element and the viewport width and height to calculate in which direction to show the alert popup. For example it automatically re position the alert popup if TOP, RIGHT, BOTTOM, LEFT doesn't have enough space.
Visit this link to see how to use

How to show ToolTip dynamically via server side code

I would like to show an image tooltip dynamically via server side code.
For example, when user make a selection in a combo box, i would like to load dynamically a text into an image ToolTip, then automatically show (without the user must move curors on image).
Is it possible ?
Thanks

how to setting form display

i have a form input..i've been made it using jquery...
i want my form show not too long..but actually it need to scroll the page in monitor..
how could i setting my form eventhought i have much item for input data??
i want my form show in one page (no need use scroll bar)..
You can make sure that the height of the page does not exceed the standard size.
Or you can use an Iframe inside a DIV.

Resources