How does one disable the backdrop in the angular bootstrap modal backdrop?
I've tried css hiding the outer container of the modal:
.modal {
display: none;
}
but that ends up hiding the modal itself. even if i override the actual modal.
My problem is i need to be able to click and interact with the text on the fg while in the modal. E.g. i want to drag an item inside the bootstrap modal and into the foreground outside the angular bootstrap modal.
Anyone have any ideas?
I'm using the standard angular bootstrap modal markup:
<ui-tabset>
<ui-tab>Tab 1</ui-tab>
<ui-tab>Tab 2</ui-tab>
</ui-tabset>
There is a backdrop parameter when instantiating the modal:
var modalInstance = $uibModal.open({
backdrop: false,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: { ... }
}
In addition, the backdrop can be given a class with the backdropClass parameter, which you could then override the fault css if backdrop: false wasn't enough for your needs.
The default backdrop class is modal-backdrop which takes the whole window with:
top: 0;
right: 0;
bottom: 0;
left: 0;
The modal class has the same styling applied which effects the position on the page as well as interaction with non-modal elements.
Related
I use v-slide-group to slide menu items vertically in a menu in the mobile version.
Unfortunately, the buttons within the slider can only be activated by multiple clicks.
If I deactivate flexbox within v-slide-group__wrapper the slider is still there through the parent element and the buttons are clickable again. Unfortunateley the styling is gone. I suspect the flexbox in v-slide-group__wrapper is affecting the buttons. How can I change v-slide-group__wrapper so that my elements are clickable again?
I cannot access v-slide-group__wrapper, do I have to use important!to make changes in vuetify components?
<style lang="scss" scoped>
// Vuetify workaround https://github.com/vuetifyjs/vuetify/issues/8875
::v-deep {
.v-slide-group.v-item-group > .v-slide-group__next,
.v-slide-group.v-item-group > .v-slide-group__prev {
display: flex !important;
&--disabled {
display: none !important;
}
}
}
</style>
I have a page consisting of a component Main.
Main further contains two components - NavBar and Body. Body also contains two components - ViewTable and AddPerson. Inside the ViewTable component, I want a modal to load when a field in the table is clicked. I've got the functionality right but I'm stuck at the CSS part.
Right now, the modal looks like this -
How should I go about doing so? I'm new to React and the component structure
There's a good react library called react-modal i can recommend. It's a bit hard to get into but once you get it to work it's great.
If you want to do it the vanilla way, use position: absolute for the modal. To get the transition to work, use react-transition-group to toggle the opacity and animate the transition. It'll probably take some time to get into react-transition-group since it's a bit confusing at first glance.
As suggested by #gian.gyger, react-modal with react-transition-group is the right way to go.
But, if you have already implemented the modal with plain react and want help with CSS alone, this could help. To make the modal position fixed so that it doesn't occupy space in the lower layer, we could give the following
.modal-container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width:100%;
background-color: rgba(0,0,0,0.4); /* for darker background when modal is open*/
/*z-index sets the modal on the higher stack above all of the others */
z-index:10
}
.modal {
width: 50%; /* or above or lesser */
background: red; /* modal background color */
margin: 20% auto;
}
Here, I am assuming that element with modal-container class is activated only upon the desired action (like, a button click) and modal-container is an empty div that just contains within it the modal element
Reference: W3Schools
I want to have a button that takes me to a specific part of my horizontal scrolling website.
I am using Wordpress. I am willing to use any theme (or customizing any theme) as I've already tried several.
I tried using id, elementor menu anchors, 'page to scroll id' plugin...
Everything works only as long as the website scrolls vertically.
I add custom CSS in WP Customizer to make it horizontal. It works only when scrolling with the mouse.
However, the ids, or anchor links don't make the page scroll horizontally when you click the button (or text, or whatever takes you to the #id_name).
I know it has to do with the CSS, and that I probably need to use a js scrollbar, or something like that, but I can't find something that works so far.
I am using Astra Theme and Elementor.
This is the extra CSS i used:
.elementor-inner {
width: 100vh;
height: 100vw;
overflow-x: hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
.elementor-section-wrap {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
display: flex;
flex-direction: row;
width: 600vw;
}
.section {
width: 100vw;
height: 10vh;
}
::-webkit-scrollbar {
display: none
}
My solution is not specific to a Wordpress theme, but I hope it will help you out nonetheless. If you want to post your HTML markup, I can give a more specific answer for your scenario :)
Assuming your page layout is already set up with horizontal scrolling, here are the steps you'll need to take to get that anchor functionality working:
Set an ID on the element you wish to scroll to.
Set a click listener on the button/link you'd like to trigger this scroll from.
On click of the button, get the offsetLeft property of the element you'd like to scroll to.
Set the parent container's scrollLeft property to that value from above.
HTML:
Scroll to Element!
<!-- your existing markup -->
<div id="my-element">
<p>Content would go here</p>
</div>
<!-- /your existing markup -->
Note: I'm using an anchor <a> tag with an href attribute here, since we should keep this in line with the web accessibility guidelines. You're welcome to use a <button> and maybe a data attribute, if needed.
JavaScript:
// (These class names would be specific to your case)
const myButton = document.querySelector(".my-button");
const scrollContainer = document.querySelector(".scroll-container");
myButton.addEventListener("click", event => {
// Prevents the link's default behavior:
event.preventDefault();
// Gives us the string: "#my-element":
const link = this.href;
// Finds the corresponding element:
const element = document.querySelector(link);
if (element) {
const leftPosition = element.offsetLeft;
// This line actually takes us to the element:
scrollContainer.scrollLeft = leftPosition
}
});
Couple things here:
You will need to change the various class names here, based on what your HTML markup looks like.
The only requirement for the offsetLeft property to be accurate, is that the scroll container has relative positioning.
Animation?
As a bonus, you could animate the scrolling, so it's not just an instant "jump". I would be happy to outline how to do that as well, just let me know.
If I get you right you want to scroll horizontally, to do so you can do it using jQuery:
<script>
$elementToScrollTo = $('#scroll-to');
$whereToScroll = $elementToScrollTo.offset().left - 30; // 30px just to give some space before the element
window.scrollBy($whereToScroll, 0);
</script>
First line to select the element you want to scroll to
Second line to get the offset left (how far is the element from the left [in px])
Third line is to tell window to scroll in X coordinates
My application shows a UI-Bootstrap modal inside a div, above it there is navigation bar, usually when I start the modal the entire background is applied with a backdrop (dimmer), my modal is not appended to body but rather to the div like so (modal options):
appendTo: angular.element(document.querySelector("#mainContent")),
backdrop: true,
plunker
#mainContent is several levels down the DOM from body, but the entire viewport is dimmed by the backdrop. Is there a way to apply the backdrop (or even the entire modal assembly) to only 1 element instead of the entire viewport?
You have to change the CSS part of the backdrop to this and it will only cover the first parent container that doesn't have position:absolute
.modal-backdrop {
position: relative;
width: 100%;
height: 100%;
z-index: 1040;
background-color: #000;
}
I have added it on the plunker
I am using Angular Material and I am using tabs in an md-dialog. When navigating through the tabs the dialog height is scaling really smooth according to the content of the tab. However, when using an ng-if to show or hide content, the dialog height changes but there is no smooth animation. Is there a way to animate the change in height when showing and hiding elements inside dialog?
This is a codepen of the tabs with a checkbox for adding content:
http://codepen.io/csteur/pen/zvjgRr?editors=101
You'll need to use animation yourself to show and hide the new content. It doesn't look like ngIf works well with material dialogs, but ngShow works fine:
http://codepen.io/anon/pen/zvaYEy
I added CSS and modified your HTML. It seems that ngAnimate behaves a little different in material dialogs, so I had to add the transition on the main class and 2 extra classes that you don't normally use to the HTML:
CSS Addition:
.animate-show {
height: 0;
background: white;
overflow: hidden;
transition: all 0.5s;
}
.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
transition: all 0.5s;
}
.animate-show:not(.ng-hide) {
height: 60px;
}
HTML Change:
<p ng-show="addText" class="animate-show ng-hide ng-hide-animate">