unable to set buefy modal width - javascript

I am using vuejs with bulma and buefy. I am using buefy modal and trying to set the modal width using its 'width' property. I tried to specify it in the html as well as using javascript to open the modal.
this.$modal.open({
parent: this,
component: dummyComponent,
width: 720
})
Can someone please help me out.

You also need to set style="width: auto" in your component, then the width you set when opening the modal is taken into account.
Then the js part would stay
this.$modal.open({
parent: this,
component: dummyComponent,
width: 720
})
and your component would be
<template>
<div class="modal-card" style="width: auto">
<!-- Content comes here... -->
</div>
</template>
Examples in the buefy documentation include it as well but they don't explicitly state that you need it to make setting the width work.

Actually, for me it doesn't work.
this.$modal.open({
parent: this,
component: dummyComponent,
width: 1200
})
It produces modal with 640px in width. If I set
<template>
<div class="modal-card" style="width: auto">
<!-- Content comes here... -->
</div>
</template>
It produces even narrower modal, 460px. Not sure why.
My solution was:
<style lang="stylus" scoped>
.modal-card
width: auto
#media (min-width: 1200px)
.modal-card
width: 1200px
</style>
Not a prettiest solution, but it works.
I also had to add z-index to .modal, as some parts of my html cover modal backdrop.

Related

CSS is breaking in vuejs on reload of page

when i reload the page the css is breaking in vuejs
I tried to change the css from my app.vue but nothing happened it is having the same problem..
To avoid this, you can use v-cloak. This directive is used to hide an element until the Vue instance has finished compiling. This is useful when dealing with dynamic content that is generated by the Vue instance, and we want to avoid any flickering or jumping of the page as the content is being loaded.
Check the official docs.
const app = Vue.createApp()
app.mount('#app')
#app[v-cloak] {
display: none
}
section {
width: 200px;
height: 200px;
background-color: lightcyan
}
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<div id="app" v-cloak>
<section></section>
</div>

Tailwind & CSS - DOM child element view width to a fixed width

So,
I have a project using React & tailwindCSS, and I'm building a platform using a custom CMS. The problem that I'm facing is the following:
Im showing different screen size options on the CMS and you can press on different screen sizes to view your content in lets say on a mobile screen.
Since the CMS editor is not in an iframe changing the width of the parent element to 1300px or 400px is not causing the elements inside to change to tailwinds responsive design, since the viewport is still the exact same on the DOM.
Now I've read about CSS container queries, but since I'm using tailwindCSS it would be rather painful to start editing that. Is there any way to manipulate the DOM within and tell to the editor div.element that its viewport is only ex. 1400px.
And yes, iframe would be a viable option.
Thanks in advance!
.screen--desktop {
max-width: 1440px;
width: 100%;
}
.screen--mobile {
max-width: 360px;
width: 100%;
}
<html>
<body>
<div class="container">
<!-- PAGE CONTENT wv is 100 -->
<div class="editor screen--desktop">
<!-- FRAMED CONTENT wv needs to be 50 -->
<div class="container">
<!-- Container #media max width needs to listen to the parent div's width only -->
<!-- Here would be element1 -->
</div>
</div>
</div>
</body>
</html>

How to make the v-stepper steps always visible on top of the page?

In a Nuxt.js app using Vuetify.js framework, I have a v-stepper component which, when scrolling any page down, its steps become unvisible (I put the stepper component inside pages/index.vue). I want them to remain always visible on top.
For this purpose, I think only putting the v-stepper inside a v-toolbar component can achieve the goal, but not really: no idea how to open the v-stepper component inside layouts/default.vue and close it inside pages/index.vue:
<template>
<v-app>
<v-toolbar>
<!-- open v-stepper here -->
<v-stepper>
</v-toolbar>
<v-content>
<nuxt /> <!-- closing v-stepper here does not work, -->
</v-content>
</v-app>
</template>
How to achieve this goal? (I am not asking for an implementation, just a hint/idea/alternative)
wrap your v-stepper component with a div like <div class="sticky"><v-stepper/></div>
and add the following rules to your css :
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.v-stepper__wrapper {
height: auto !important;
}

How to make a side panel in a component with Quasar Vue Framework 14.3

I have a working left side panel using Quasar version 14.3. Now I want to make it a component. When I use this:
<template>
<q-layout ref="layout"
:left-breakpoint=0>
<q-scroll-area slot="left" style="width: 80%; height: 100%>
<div>
<left-panel></left-panel>
</div>
</q-scroll-area>
</q-layout>
</template>
It kind of works, however:
the width gives css issues
do I really have to keep the q-scroll-area out of the component? When
I include it the side panel does not hide but is in the page and then
the actual page is below it when you scroll down.
Any suggestion to how to make a solid side panel in a component with Quasar?
You can use q-layout-drawer for creating the left panel in q-layout
<template>
<q-layout ref="layout" :left-breakpoint=0>
<q-layout-drawer v-model="flag" side="left">
<q-scroll-area slot="left" style="width: 80%; height: 100%">
<div>
<left-panel></left-panel>
</div>
</q-scroll-area>
</q-layout-drawer>
</q-layout>
</template>
Set flag true in data of Vue component.You can also open/close drawer on button click by setting flag true false

Scrollable table with Vue.js

So I have table which gets filled using vue.js v-for method:
<table>
<tr><th>Name</th><th>Surname</th></tr>
<tr v-for="user in users"><td>#{{user.name}}</td><td>#{{user.surname}}</td></tr>
</table>
And I need this table to be maximum 300px in height, and if it gets longer, it becomes scrollable.
So basically I need to set max-height and overflow:auto parameters in my css, but the problem is that the code does not "see" this table appropriately because it is rendered with vue.
So far I've tried just adding parameters in css and adding them dynamically after loading the table; none of these worked.
But, if I call $('table').height(), it returns the actual height of the rendered table. Maybe I can use it somehow?
Would highly appreciate any possible help!
Can you wrap the table in a <div>?
This way the div controls the scrolling and the table is free to go it's own way.
package.json
"cssnano-preset-default": {
"version": "4.0.7",
...
"postcss-calc": "^7.0.1",
Wrap <b-table or <table> with <template> then <div> and add css
table.vue
<!--wrapper--->
<template>
<div>
<b-table
<!--...--->
</b-table>
</div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
export default {
name: "data-table",
props: ["pageSource"],
middleware: ["auth", "enable"],
computed: {
...mapGetters(["loggedInUser", "userSettings"]),
}
<!--...--->
}
</script
<!-- css at bottom of page -->
<style lang="scss" scoped>
.b-table {
max-height: calc(100vh - 300px);
overflow-y: auto;
}
</style>

Categories