I am developing web application in Angular 2. On button click I am trying to open popup. I am able to do it in JavaScript. I am trying now in Angular 2.
Below is my HTML code for popup inside main page.
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
In main page I have one text box. When I open popup inside popup text box is also displaying as below.
Filter records text box is in html page and not in popup. Can someone help me to fix this issue? Thank you.
It sounds like you've applied a high z-index to the filter records textbox and button; z-index is a styling attribute that allows you to specify which things appear in front of others, by lowering the z-index on your "Filter records" textbox/button they should sit behind the popup.
Read more on z-index here: https://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
Does anyone know how to get rid of the top bar of the iOS mobile web keyboard circled in red below with the "Done" button on the right?
I'm using React & Next JS in case that makes a difference, and the code used to generate the screenshot is below. I've tried many combinations of input & form but can't get rid of it!?
<div className="bg-red-100">
Example input box
<div className="">
<input />
</div>
</div>
I am new to css and flex. Below is the working url in stackblitz.
https://stackblitz.com/edit/angular-ivy-bh8m8u?file=src/app/app.component.html
I have a left panel and main panel and a click button on the top of the page.
Requirement 1 On the click of the button i want to open the side panel. For some reason the side panel is not opening.
Requirement 2. I want to update the css to use flex if is possible because i am new to flex also
Please help.
Your sidePanelOpen variable isn't updating, and your sidePanel element is translated -150%, so it's off to the left of the screen
Never done any Angular but using the power of logic I've figured out half your answer. Now all you need to do is read a quick CSS tutorial
You originally were just setting this variable true. Using ! you can negate the sidePanelOpen value and get a toggle action going
.ts
openSideBar() {
this.sidePanelOpen = !this.sidePanelOpen;
console.log(this.sidePanelOpen);
}
Here you had the toggled class being set on the wrong element.
.html
<div [ngClass]="{'toggled' : sidePanelOpen}" class="sidebar" id="sidePanel">
<div>
<span id='close'>x</span>
<h4>Bangalore </h4>
</div>
</div>
Lastly, the toggled class won't do anything unless you have some css to hide your side panel
.css
#sidePanel.toggled {
display: none;
}
I have a text box and when you click on it, a dropdown menu will appear with a list of strings, and when you click on a string, that string will be put in the text box.
I need help with creating some simple css code to align and resize the dropdown menu that appears on click, to match the size of the text box!
this is the code of the text box and the dropdown menu:
<div class="row">
<div class="col-xs-12 max300"
uib-dropdown is-open="vm.descriptionDropdownOpen">
<textarea name="description" class="form-control"
ng-model="vm.presence.description"
ng-click="vm.toggleDescriptionDropdown()"
autofocus>
</textarea>
<ul id="descriptionDropdown" uib-dropdown-menu>
<li ng-repeat="descr in vm.loadedDescriptions"
ng-click="vm.presence.description = descr.text;
vm.descriptionDropdownOpen = false;">
{{descr.text}}
</li>
</ul>
</div>
</div>
I gave the generated list in the dropdown menu a ID for the css ("descriptiondropdown") and the text box and the dropdown menu look like this:
image
the white box you see it s because I edited the entries of the list, but you can see in the background the dropdown menu size and above it the text box size, I'd like them to have the same width and to make the dropdown menu start aligned with the box, not on the left of it.
And for last, if you have some tips on how to affect also the font size and spacing between the entries in the dropdown list for the CSS code would be awesome, thank you
I am trying to create a popup to show zoomed text .In the modal popup even if i close the box , on clicking back button in my browser the modal is getting displayed again. Is there any way to permanently close the box ??? Below is my code.. TIA :)
Zoom Text
<div id="openModal" class="modalDialog">
<div>
X
<p class="test">Test</p>
<br>
Close
</div>
</div>
Clicking the "Back" browser button triggers displaying page(s ) from history of browsing. You can ensure that when this action takes place, your modal will be forcibly closed by executing some sort of changing display mode of the div with JavaScript and usage of hashchange event. Something like this code snippet:
if ("onhashchange" in window) {
window.addEventListener("hashchange", function(){
// .... Location changed, so do your thing here...
document.getElementById("openModal").style.display = "none";
})
};
I have an audio clip that plays through once and then the 'Play' button is disabled so that it can't be played again. The only problem is the scrollbar is clickable so that the user can go back to the beginning or forwards which is not the desired process as they should only be able to play it once.
Is there a way of preventing a user from clicking on the blue progress bar as per the image below?
Thanks
There is a div on top of the progressbar with the the class "jp-seek-bar".
It is this div which makes the progressbar scrollable.
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
So you simply need to remove this div. The progress itself will still be visible.
<div class="jp-progress">
<div class="jp-play-bar"></div>
</div>
Another solution is to unbind the event-listener binded to the jp-seek-bar div.