Vuetify open drop down menu center to button
I have a drop down menu with two rows of v-list items as shown below.
<v-menu
class="dropdown"
open-on-hover
offset-y
>
<template v-slot:activator="{ on, attrs }">
<v-btn
class="rounded-xl green darken-3 text-capitalize elevation-2 ml-2"
dark
v-bind="attrs"
v-on="on"
>
The Society
</v-btn>
</template>
<v-list class="pa-6">
<v-list-item>
<v-row>
<v-col cols="12" sm="6">
<h1 class="display-1 orange--text">Important Info</h1>
<v-divider class="ma-3"></v-divider>
<v-list-item><v-btn class="ml-n6" text>Our Constitution <v-icon class="ml-3">mdi-security</v-icon></v-btn></v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
</v-col>
<v-divider vertical></v-divider>
<v-col cols="12" sm="6">
<h1 class="display-1 orange--text">Important Info</h1>
<v-divider class="ma-3"></v-divider>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
</v-col>
</v-row>
</v-list-item>
</v-list>
</v-menu>
I need this menu to open centre to the The Society button and not pushing to the right as it does presently. So the middle line of the drop down should be centre to the The Society button.
1 answer
-
answered 2022-05-04 13:31
John'Sters
So it seems that there is a nudge-left api available for v-menu's. Thank you Vuetify for this amazing framework!
My Code
<v-menu open-on-hover nudge-left="220" nudge-bottom="50" >
This looks like it solved my issue.
Find the API here https://vuetifyjs.com/en/api/v-menu/#props
do you know?
how many words do you know
See also questions close to this topic
-
How can I get toast-ui editor content?
I am a student studying. I think I'm doing it conceptually wrong.
I'm trying to use vue3 and type script And I'm going to use toast-ui editor.
I get some errors.
- refEditor.value.invoke is not a function
How can I get toast-ui editor content?
this is my code
<template> <div class="markup-tables flex"> <va-card :title="$t('tables.stripedHoverable')"> <va-card-content> <div id="refEditor" ref="refEditor"></div> <br /> <div class="row justify--end paginationButtons-left"> <va-button class="mr-2 mb-2">List</va-button> </div> <div class="row justify--end paginationButtons-right"> <va-button class="mr-2 mb-2" @click="getHTML">Save</va-button> </div> </va-card-content> </va-card> </div> </template> <script lang="ts"> import '@toast-ui/editor/dist/toastui-editor.css' import Editor from '@toast-ui/editor' import { defineComponent, onMounted, ref } from 'vue' import data from '@/data/tables/markup-table/data.json' export default defineComponent({ name: 'BoardWrite', setup() { const refEditor = ref(null) const getHTML = () => { console.log('getHTML test') let html = refEditor.value.invoke('getHtml') console.log(html) // ERROR } onMounted(() => { const editor = new Editor({ el: refEditor.value, height: '700px', initialEditType: 'markdown', previewStyle: 'vertical', }) editor.getMarkdown() }) return { getHTML, refEditor, } }, }) </script>
-
Deploy VueJS + API app to Azure Static Web App with Gitlab doesn't create functions
I've started creating a small application that will use VueJS as a frontend with Azure Functions as the backend. I was looking at using Azure Static Web Apps to host both components for the application and Gitlab to store / deploy the app.
Everything but the creation of the Azure functions works. Following https://docs.microsoft.com/en-us/azure/static-web-apps/gitlab?tabs=vue
The output from the deploy step, listed below is:
App Directory Location: '/builds/*/valhalla/valhalla-client/dist/spa' was found. Api Directory Location: '/builds/*/valhalla/valhalla-api/dist' was found. Looking for event info Could not get event info. Proceeding Starting to build app with Oryx Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx ---Oryx build logs--- Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx You can report issues at https://github.com/Microsoft/Oryx/issues Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3 Build Operation ID: |qAffRWArEg8=.deee9498_ Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b Detecting platforms... Could not detect any platform in the source directory. Error: Could not detect the language from repo. ---End of Oryx build logs--- Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support. Finished building app with Oryx Starting to build function app with Oryx ---Oryx build logs--- Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx You can report issues at https://github.com/Microsoft/Oryx/issues Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3 Build Operation ID: |NGXLP5bVBRk=.705477f6_ Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b Detecting platforms... Could not detect any platform in the source directory. Error: Could not detect the language from repo. ---End of Oryx build logs--- Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support. [WARNING] The function language could not be detected. The language will be defaulted to node. Function Runtime Information. OS: linux, Functions Runtime: ~3, node version: 12 Finished building function app with Oryx Zipping Api Artifacts Done Zipping Api Artifacts Zipping App Artifacts Done Zipping App Artifacts Uploading build artifacts. Finished Upload. Polling on deployment. Status: InProgress. Time: 0.1762737(s) Status: InProgress. Time: 15.3950401(s) Status: Succeeded. Time: 30.5043965(s) Deployment Complete :) Visit your site at: https://polite-pebble-0dc00000f.1.azurestaticapps.net Thanks for using Azure Static Web Apps! Exiting Cleaning up project directory and file based variables 00:00 Job succeeded
The deploy step appears to have succeeded, and the frontend is deployed, but there are no Azure Functions showing up in this Static Web App. Is something missed here? So far, the Azure Functions I have are the boiler-plate from instantiating a new Azure Function folder.
image: node:latest variables: API_TOKEN: $DEPLOYMENT_TOKEN APP_PATH: '$CI_PROJECT_DIR/valhalla-client/dist/spa' API_PATH: '$CI_PROJECT_DIR/valhalla-api/dist' stages: - install_api - build_api - install_client - build_client - deploy install_api: stage: install_api script: - cd valhalla-api - npm ci artifacts: paths: - valhalla-api/node_modules/ cache: key: node paths: - valhalla-api/node_modules/ only: - master install_client: stage: install_client script: - cd valhalla-client - npm ci artifacts: paths: - valhalla-client/node_modules/ cache: key: node paths: - valhalla-client/node_modules/ only: - master build_api: stage: build_api dependencies: - install_api script: - cd valhalla-api - npm install -g azure-functions-core-tools@3 --unsafe-perm true - npm run build artifacts: paths: - valhalla-api/dist cache: key: build_api paths: - valhalla-api/dist only: - master needs: - job: install_api artifacts: true optional: true build_client: stage: build_client dependencies: - install_client script: - cd valhalla-client - npm i -g @quasar/cli - quasar build artifacts: paths: - valhalla-client/dist/spa cache: key: build_client paths: - valhalla-client/dist/spa only: - master needs: - job: install_client artifacts: true optional: true deploy: stage: deploy dependencies: - build_api - build_client image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy script: - echo "App deployed successfully." only: - master
-
How to global import a stylus file in vite
Now I'm try use
vite
to create avue
app. But have trouble to global import astylus
file invite.config.js
.I try the code from vite docs.
export default defineConfig({ css: { preprocessorOptions: { styl: { additionalData: `@import "./src/assets/styles/common.styl"` } } } })
But it's completely not work.
I got a solution to set global style from github.
export default defineConfig({ css: { preprocessorOptions: { stylus: { globals: { '$highlight-color': 'red' } } } } })
It's works fine, But how to import a styl file globaly? I tried to add 'additionalData' to the workable config. However I got bunch of errors: 'failed to locate file'. It seems like try to import the file in every .vue file, but has trouble to locate the file.
css: { preprocessorOptions: { stylus: { additionalData: `@import "./src/assets/styles/common.styl";`, globals: { '$color-g1': '#F3F4FC', '$color-white': '#FFFFFF', } } } }
Have any idea about this?
-
Display Data from MYSQL using PHP Dropdown
I need to display data from the 'Members' table based on the selected 'grad_date' from a drop down. I have been trying to do it for a while now but have struggled to get it to work. Currently I have:
<body> <!-- HTML code can reside ABOVE and BELOW the starting and closing PHP tags --> Select Grad Date <?php require_once 'login_name.php'; $db_server = mysqli_connect(...) if (!$db_server) die("Unable to connect to MySQL: " . mysqli_error($db_server)); $sql = "SELECT DISTINCT grad_date FROM Members;"; //As we have already connected to the database, execute the query stored in the $sql variable $result = mysqli_query($db_server, $sql); //Check if the query was successfully executed: if the result is NOT FALSE //More advanced logic can also be done based on success or failure if($result) { //Create Drop-Down Menu echo "<select name='Members'>"; while($row=mysqli_fetch_assoc($result)) { //Store each SQL row's column name/value pair in a PHP variable foreach($row as $key=>$value) ${$key}=$value; //Load data onto drop-down menu echo "<option value='$grad_date'>$grad_date</option>"; } echo "</select>"; } ?> <table> <thead> <th> member_id </th> <th> member_first_name </th> <th> member_last_name </th> <th> team_id </th> </thead> <tbody> </tbody> </table> <!-- HTML code can reside ABOVE and BELOW the starting and closing PHP tags --> </body>
I have tried a couple different things to go from here but have not found any success. How can I do this?
-
create a select box in which data is populated from selecting another select box and it is editable
I have created two select box. in both, fetching data from database. By selecting first select box the second select box gets auto populated. What I want to do is that this second select box should be editable that is the user can type input also. What I have done now is that used datalist for second select box which is doing the thing, but I want to show the auto populated data as selected option in datalist
-
Excel Single Use Dropdownlist
My problem is the following. I have two tables. The first table is a guest list where the information on who is the guest and how many beds he need is stored. Screenshot And the second table contains the Apartment names and the number of provided beds. Now I want to make a dropdown list in the guest list table where only Beds are shown that provide the right amount of beds. And after a Apartment is selected it cant be picked a second time. Can someone provide me a code for this solution? Thank you very much!
-
array.slice strange behaviour with nuxt-edge
EDIT AND SOLVED: I've found the origin of the problem: I thought arr.slice returned the new array but, actually, it returns the deleted element. See the documentation The solution is simply to put the slice function before the bracket and not in it:
remove (index) { const arrayCopy = this.liens.slice() arrayCopy.splice(index, 1) this.$emit('update:liens', arrayCopy) }
Thank you kissu for your time!
I was previously using nuxt 2.xx and since switching to nuxt-edge the vue behavior changed with array.slice. Let me explain :
My code is very basic and is used to add/remove items of an array in a child component "stockLiens". This array is passed to a parent component "currentEtabCommentUser" via .sync
Everything was working fine before but since I'm with nuxt-edge, if I have - for instance - an array of 3 items and I want to delete the 2nd one, it is the only item left!
My stockLiens component Javascript is the following:
props: { liens: { type: Array, default: () => [] } }, methods: { // I used concat() and slice() to avoid mutating a prop in the component add () { const arrayConcat = this.liens.concat([{ url: '', description: '' }]) this.$emit('update:liens', arrayConcat) }, remove (index) { const arrayCopy = this.liens.slice() console.log(this.liens) // line 108 console.log(arrayCopy) // line 109 this.$emit('update:liens', arrayCopy.splice(index, 1)) console.log(arrayCopy) // line 111 } }
When I run the script, the text in the firefox console is the following:
On the picture, you can see that :
- stockLiens:108 is an array of 3 items (it makes sense since it is this.liens)
- stockLiens:109 is an array of 2 items! (strange since it's a simple array.slice() of this.liens) The 2 items are the old index 0 and the old index 2 (I've clicked on old index 1)
- stockLiens:111 is the same array that on line 109. (strange again because it should have been spliced in line 110)
- currentEtabCommentUser:186 is an array of 1 item : the old index 1 (since line 186 is just a listener on this.liens, it should be the same array that on stockLiens:111. I really don't understand anything!)
My currentEtabCommentUsercomponent:
<stockLiens :liens.sync="liens" /> <script> watch: { liens () { console.log(this.liens) // line 186 } } </script>
I've tried to change .sync, to copy the array with for(i...), to get() / set(v) the liens property, ... I've looked on many forum during hours (2 days now) but I can't understand the problem.
Can someone help me please ? Thank you in advance!
My stockLiens component HTML:
<v-card v-for="(url, i) in liens" :key="i" > <v-text-field v-model="url.url" label="Url" /> <v-text-field v-model="url.description" label="Description" /> <v-divider vertical /> <v-btn icon @click="remove(i)" > <v-icon>mdi-delete-forever-outline</v-icon> </v-btn> </v-card>
-
First load of web icons load very slow
I have a proyect in Nuxtjs (vuetify), I'm using material design icons, and at the first load time of websites, icons load takes 5/7 seconds to appear: This is the first load
5/7 secondas later:
Why it happens? Maybe if i download icons and put it in assets folder, it will not happens?
Edit:
I use icons like this:
<v-icon color="white">mdi-home</v-icon>
-
Using Firebase Functions with Nuxt 3
Environment
- Operating System: macOS 10.15.7
- Node Version:v16.14.2
- Nuxt Version: 3.0.0-rc.2
- Firebase: 9.7.0
- firebase-admin: 10.2.0
- firebase-functions: 3.21.0
- firebase-functions-test: 0.3.3
In firebase.json the following config is set:
{ "functions": { "source": ".output/server" } }
I have a file under the "server" directory containing the following function:
import * as functions from "firebase-functions"; export const helloWorld = functions.https.onRequest((request, response) => { functions.logger.info("Hello logs!", {structuredData: true}); response.send("Hello from Firebase!"); });
When I run:
NITRO_PRESET=firebase npm run build firebase emulators:start --only functions
then go to my firebase emulator log, it does not show the new
helloWorld()
function being initialized. Also, when going to "http://localhost:5001/$PROJECTNAME/us-central1/helloWorld", it returns "Function us-central1-helloWorld does not exist, valid functions are: us-central1-server" which suggests that my function has not been initialized.Is there any way I can write firebase cloud functions in my Nuxt 3 app from files in my server directory?
I saw a similar discussion here that said it was possible to change the nuxt.config.ts
functions
object between deploying functions,storage,firestore and deploying server and hosting. I am trying to write firebase functions solely in the "server" directory without creating a "functions" directory and the root of my project. Is this possible?I have also opened a discussion on GitHub here
-
How to edit vuetify text colors (toolbar/navbar)
I'm using the vuetify admin template and it's an absolute bear to find where the presets for the colors in the template are for text. I managed to change the background of the va-toolbar/nav bar through adding them as color: xxxx in the admin.vue section but I can't seem to find how to change the text colors in these sections. Any advice?
-
Does anyone know how to get around Vuex getters not having a cache
My front end will be connected to great backend later right now it is extremely difficult to test my codes because vuex getters and setters do not cache data. So every time I refresh my page all the functionalities and codes disappear. Does anyone know how I can cache my getters and setters in Vuex?