I have this component here and i want that whenever i click on the div content showing the hidden div gets triggered and show the hidden form. I have done that but now i also need to hide the div of that content that was showing when i trigger the hidden div and show that hidden div in place of that particular div but not under all divs. All other content should just remain as it is. Can any one help me? Here is my component
Example Component
An edit is made to the example component.
Find the link posted below
https://stackblitz.com/edit/so-list-lj18vu?file=src/app/app.component.ts
You need to add a flag to each and every item, on click of an item you need to make all the items flag as false and that particular item flag as true
Then it works as expected.
Happy Coding :)
Related
Pop-up window comes with the default search bar in SPO tenant site. So I don't have access to modify any CSS in the search field. I want to set the div in behind when the window pops up.
Explain what you exactly mean. If you want some element in your html appear behind some other element in a single page then you need to use z-index css property. Put an integer as the value of z-index property. The first html element (the one that is behind the other) should have value less than the one that is on the front. give both of the elements z-index.
I've two Div's on my page. one is parent div, another div as pop-up.
Currently pop-up is shown/hide on click of parent div or clicking on button inside pop-up window.
How can I achieve that pop-up will be closed when I click away (anywhere outside pop-up and parent div) ? is there any event mechanism already provided ? if yes, How to use it?
You can create another div with full width and height and z-index bigger that other content and less than pop up. Show that div whenever the pop up is showed. Then you can add this div an click event so when the user click on that div it means that it's outside of pop up.
Here is an jsfiddle for that made with jquery just to give you the idea how to make it .
Here is another one with Angular DEMO
At the moment, my site displays the menu items horizontally and when the user hover over each one, its submenuitems are displayed. However, by the time the user tries to click on the subitem, they disappear. Is there any way I could delay the time in which the subitems are visible?
Yes, it is possible (using CSS3 transistions/animations) to add a delay on this show/hide behaviour but I think the trouble is to do with:
How you've nested your tags
Which tags have the associated :hover styles
If a user moves their mouse off the container element, the submenu is getting hidden again. They need to stay in the 'target area' of whichever element has associated :hover styles for child elements to be displayed. (I presume you're doing the show/hide of the submenu via CSS only.)
Really though, you need to give a code example in order to give specific feedback.
I have a list of reports on a page. I currently have 4 large buttons on the right to view, add, edit or delete a button. We've had complaints about people having to scroll back up to click on the buttons once they've selected a report because they have soo many.
Is there a way to have an html object like a div, stay visible on the page when you scroll it? But within the bounds of the container of the grid?
Thanks
Have you tried giving the buttons or their container position:fixed through CSS? Another way could be to use the onscroll Javascript event to move them or their container.
I have a div section, which is full of tags, on a event on the page I shrink the div section BUT if the user tabs into the div section, it moves so that the highlighted <a href> has focus, is there any way to lock a div section that it's contents don't move ?
So for example the code (psuedo not real) I have the following
<div>
<h4>Heading</hv>
Link 1
Link 2
Link 3
</div>
I shrink the div section so that only the h4 is displayed {overflow:hidden}, however the user can then tab to the elements and this scroll so that they are displayed in the the div "window" which is not what I want, so in effect I get <div>Link 1<div> where what I want to remain is <div><h4>heading</h4></div> in effect I want to stop the contents of the div sectio scrolling so that the selected element is displayed. I know that if they press return the selected link will be follow, but I'm not worried about this, just what is displayed
I hope thats cleared, you can see my problem if you go to link text click on the training section on the left and then back tab (shift tab) , the article section above changes.
Thanks
is there any way to lock a div section that it's contents don't move?
Not really*, but you don't really want that anyway. Even if you locked it in place, the invisible links would still accept focus, resulting in a confusing tab behaviour.
(*: short of something horrendous like changing the scrollTop of the overflowing element from JavaScript onfocus. Ugh.)
What you should probably do is put a div around the links, and set its display style to ‘none’ when the links are elided. That way they won't participate in the tabbing order.
From what I can make of your question, you want your div to stay fixed relative to the browser window. If this is the case, it can simply be done by declaring position:absolute for the div.
If you want something else, please clarify your question.