I am trying to override the Panel layer styles and decrease the index to 999998 in order to achieve my div to be above the grayed layer and below the panel when Panel is opened. So I tried to override the overlayProps , but as i see there is a Layer component above the overlay that has z-index:1000000 and inherits the styles. How can i override the layer class with a proper way to achieve my case ? Please check my codepen example http://codepen.io/mariosch/pen/dyGYEQG
<div>
<div style={{zIndex: 999999}}>Should be above overlay and below side panel</div>
<DefaultButton text="Open panel" onClick={openPanel} />
<Panel
headerText="Sample panel"
isOpen={isOpen}
onDismiss={dismissPanel}
// You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
closeButtonAriaLabel="Close"
overlayProps={{ styles: { root: { zIndex: 999998 }}}}
>
<p>Content goes here.</p>
</Panel>
</div>
Panel takes another prop called layerProps that can be used to set the zIndex of the layer.
layerProps={{ styles: { root: { zIndex: 999998 }}}}
That said, there are still some zIndex issues with the panel overall that would need to be solved to have the text in the div show up where you'd like.
Do you want the panel the be "blocking"? If not, you might consider passing isBlocking={false} to the panel, and it would leave the entirety of the content visible.
In this example (based on yours) I added a second button to toggle the behavior of the isBlocking prop and it might also provide what you're looking for.
<Panel
isOpen={isOpen}
isBlocking={false} // <-- this makes the rest of the content on the page visible and interactive
onDismiss={togglePanel}
>
<p>Content goes here.</p>
</Panel>
Related
I'm having an issue with wrap around scrolling when there are only two slides in the carousel. With the exact same setup, everything works correctly if there are three ore more slides, but with only two slides the carousel will only scroll Left to Right regardless of which navigation button I click or which direction I swipe. The order of the slides is correct, as is the pagination, it's just the animation that's incorrect. If I turn wrapAround scrolling off, I can correctly scroll the slides left or right, but with it turned on, they only scroll right. Here is the setup for the carousel and settings:
<carousel :settings="settings" ref="carouselRef">
<slide :key="index" v-for="(photo, index) of project.photos">
<div class="pic-outer">
<img
class="pic"
:src="photo"
draggable="false"
/>
</div>
</slide>
<template #addons>
<pagination
:style="{ opacity: project.photos.length == 1 ? 0.001 : 1 }"
/>
</template>
</carousel>
const settings = {
itemsToShow: 1,
itemsToScroll: 1,
wrapAround: true,
};
This issue is occurring even if I place the carousel in an empty component with no styling, so I can't think of anything else that could be interfering. I'm curious if anyone has run into this before or if there are any suggestions.
This was resolved by updating to the newest version of vue3-carousel.
I'm tryin to add a bar at the bottom of my ElectronJS application and I'd like it to be positioned in the same way as the blue bottom bar in VSCode, where the scroll bar ends/stops above it.
Unfortunately, there always seems to be a small space on the right side where the scroll bar would appear when the content overflows (I don't want to disable the scroll bar / behavior with things such as overflow: hidden; See Edit 2).
I did some testing and with the code below you can see my desired behavior seems to happen with the nav-drawer, i.e. its scroll bar stops right above the v-bottom-navigation, which would be my bottom bar (the thick grey line you see is the scroll bar).
I'm semi-new to this, but I can't figure out why exactly that happens and how to modify it in order to get the same behavior for the whole application.
VueComponent.vue
<template>
<div id="nav-drawer">
<v-navigation-drawer
v-model="drawer"
app
color="white darken-3"
mini-variant
permanent
>
<v-avatar
v-for="n in 30"
:key="n"
:color="`grey ${n === 1 ? 'darken' : 'lighten'}-1`"
size="36"
class="d-block text-center mx-auto my-3"
>
<span>TT</span>
</v-avatar>
<v-avatar class="d-block mx-auto">
<v-btn icon small color="primary">
<v-icon>fas fa-window-maximize</v-icon>
</v-btn>
</v-avatar>
</v-navigation-drawer>
<v-bottom-navigation v-model="value" height="20px" background-color="primary" app>
<v-spacer></v-spacer>
<v-btn icon small>
Button
</v-btn>
</v-bottom-navigation>
</div>
</template>
<script>
export default {
name: "NavDrawer",
components: {
//
},
data: () => ({
drawer: true,
})
}
</script>
P.S. I'm using ElectronJS with VueJS+VuetifyJS - I set it up as described here. Any help is appreciated.
Edit 1: I went through the VSCode source code and found the UI elements (vscode/src/vs/base/browser/ui/). Unfortunately, I wasn't able to figure out which of those is the bar at the bottom (apparently called System Bar, according to some threads I found here and there).
I think it might be the toolbar, but that seems to be part of the actionbar, which is the menu on the left (by default) and doesn't seem to have much CSS to indicate that it's the bar at the bottom.
Edit 2: I tried adding html {overflow: hidden;} in the style section of the main index.html file. It removes the bar of the main page section (the scrollbar you see in the second picture with the two arrows and green button) and the possibility to scroll, but the scrollbar of the nav-drawer remains and the scrolling still works. So, I guess this would be an option if I could still have the scrollbar in the main page section with the code above with the hidden feature enabled as well. Not sure if that's possible though.
Edit 3: Using html {overflow-y: auto;} in the index.html file, removes the scrollbar when there isn't content that is overflowing and it looks just like I want it, but when there is, it still taking up space and looks like the the second image in my post.
Found this example: CodePen
For my case the solution is adapting the :root {...} part to my application, which means to mark the bottom bar as the footer and calculate the content area depending on its size.
The html {overflow: hidden;} must also be in the index.html file's style section.
I have a Vue project and I have more than 50 components now, I want to prepare a dark mode for the entire project and I want to control the Mode type from a button on my navbar. I made a test version so I figured how to active and deactive classes but I don't know how to do that for the entire project by clicking a single button or check a checkbox. Here is my test;
<div class="container-main" :class="{'background-dark' : darkMode }">
<!-- Enable Dark Mode -->
<div>
<label class="form-switch">
<input type="checkbox" class="switch switch-md" v-model="darkMode" />
</label>
<label">Enable Dark Mode</label>
</div>
</div>
<style scoped>
.background-dark {
background-color: black;
}
</style>
When the switch is checked, darkMode variable turns to true and the class gets active, so my background color turns to black. My question is, I will create the dark mode version of the CSS file I use right now and I want this control to be in the navbar, how can a button or switch control the entire components' css classes in a project. If I need to use props, how do I do that? Thanks in advance.
I have form with autofocus on first field.
I'm using the eager validation mode.
The issue is that when I click anywhere on the page, input loses focus and gets validate and cancels the click on the page.
Is there a way to somehow allow blur with empty value, unless I call validation manually on submit?
My code snippet:
<b-form-group id="input-group-2" label="Your name:" label-for="input-2">
<validation-provider name="name" rules="required|min:2" mode="eager" v-slot="{ errors }">
<b-form-input
id="input-2"
v-model="credentials.name"
placeholder="Your name"
:class="{'is-invalid' : errors.length}"
autofocus
/>
<b-form-invalid-feedback :state="!errors.length">{{errors[0]}}</b-form-invalid-feedback>
</validation-provider>
</b-form-group>
I would like to make something clear, vee-validate doesn't prevent "click" events, it's just that when you are clicking outside, you are blurring the field. Thus triggering validation when the error message appears, it pushes the other elements down due to its line-height, which pushes the button/link down, causing you to click outside.
I would say this is not a vee-validate issue, but rather a CSS problem, ideally, if you are displaying error messages underneath the fields you should compensate for the additional space to prevent the UI from jumping which is annoying to users as well.
A simple margin-bottom equal to the line-height of the error message should do the trick, another approach is to have an absolute error message with a relative wrapper around them, have a bottom padding equal to the line-height and it would work as well.
.InputMargin:not(.has-error) {
margin-bottom: 16px;
}
.InputPadding:not(.has-error) {
position: relative;
padding-bottom: 16px;
}
.InputPadding:not(.has-error) span {
position: absolute;
bottom: 0;
left: 0;
}
You view the sample here: https://jsfiddle.net/logaretm/4mx0hy58/17/
Now if your UI framework of choice doesn't handle this case, you could PR it for them or open an issue in their project tracker.
Ended up avoiding automatic validation, switched to passive mode instead of eager. In the config file with this line:
setInteractionMode('passive');
I just call validate manually on submit:
async onSubmit() {
const isValid = await this.$refs.observer.validate();
I have a loadMask. This sets a gray background and on top of that the loading image that says Loading. From the documentation:
// Basic mask:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
The problem is I only want the small square with the loading image and the "loading..." label, I need to get rid of the gray background.
This gray background get dawn in .x-mask x-mask-gray div. I have tried setting the CSS of this div to different values for width and height but I can't make it work.
here is the HTML:
<div class="x-mask x-mask-gray" id="ext-gen1099" style="width: 1124px; height: 575px; ">
<div class="x-mask-loading">
<div class="x-loading-spinner">
<span class="x-loading-top"></span>
<span class="x-loading-right"></span>
<span class="x-loading-bottom"></span>
<span class="x-loading-left"></span>
</div>
<div class="x-loading-msg">Loading...</div>
</div>
</div>
If you see, width is set to 1124px and height to 575px, I need that to disappear, make it 0px or remove the whole x-mask-gray but without removing the child nodes. And hopefully view the "Loading..." label centered.
I hope you can help me, any suggestions are greatly appreciated.
Your best option is to override those styles but just make the background transparent instead of trying to remove the DIV completely.
If you add the following CSS it will leave the mask's background transparent.
.x-mask, .x-mask.x-mask-gray
{
background-color: transparent;
}
Alternatively, you could override the Ext.LoadMask's onBeforeLoad method and pass in true as the last parameter of the mask() method (which is the 'transparent' parameter) which will remove the x-mask-gray class from the masking DIV, as below:
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: "Please wait...",
onBeforeLoad: function(){
if (!this.disabled) {
this.el.mask(Ext.LoadingSpinner + '<div class="x-loading-msg">' + this.msg + '</div>', this.msgCls, false);
this.fireEvent('show', this, this.el, this.store);
}
}
});
myMask.show();
Unfortunately, you will still need the CSS override for the .x-mask class with this solution because it still adds a 30% opacity background.
Hope this helps
Stuart