bulma

问题 I tried to implement select2 plugin using the Bulma css framework but it seems messy in frontend. I tried this using bootstrap and yes there's no problem since select2 has a bootstrap compatibility. HTML: <div class="field"> <label class="label">Role</label> <p class="control"> <span class="select is-fullwidth"> <select2 v-model="form.role" placeholder="Select Role" name="role" :value="form.role" :multiple="false" > <option></option> <option v-for="role in roles" :value="role.id">{{ role

问题 I am using a package called Buefy which is a Vue.js wrapper for the Bulma CSS framework library. Buefy puts an attribute/property on its template components called type ( e.g. , type="is-warning" ). As per the Buefy documentation, the term "is-warning" is pre-defined according to the $colors variable set within SCSS: So I followed these instructions from Buefy to be able to customize the the $colors map, but what I would like to do, however, is keep the initial SCSS defined in those

问题 I am creating a website using webpack , and have used a tile from bulma . I am attempting to change the basic formatting of the tile, such as the background colour, the tile-size etc, but I am struggling to find a way to override bulma's default settings for these. I followed a YT tutorial, creating a mystyle.scss file with the variables (color, fonts etc) to override. This .scss is located in my dist directory, inside a sass folder, I tried to add it to the @imports of my sass files that are

问题 I am creating a website using webpack , and have used a tile from bulma . I am attempting to change the basic formatting of the tile, such as the background colour, the tile-size etc, but I am struggling to find a way to override bulma's default settings for these. I followed a YT tutorial, creating a mystyle.scss file with the variables (color, fonts etc) to override. This .scss is located in my dist directory, inside a sass folder, I tried to add it to the @imports of my sass files that are

问题 I am trying to customize Bulma by overriding some Sass variables. In my app.scss file I import the files using the following order: @import 'node_modules/bulma/sass/utilities/initial-variables'; @import 'node_modules/bulma/sass/utilities/functions'; @import 'bulma_overrides'; @import 'node_modules/bulma/bulma'; The file bulma_overrides.scss includes the following: $footer-padding: 3rem 1.5rem 3rem; $footer-background-color: whitesmoke; My goal was to make the footer a little bit thinner, and

问题 Using bulma there's an option to set a brand logo for the website. This brand, however, is being displayed differently across browsers. The image on discussion has the size of 640x160 and the fault is shown down below on Mozilla Firefox and Google Chrome respectively. The logo image is stretched vertically on chrome making it look ugly. I inspected the DOM and I found that disabling a rule on .navbar-brand ( display: flex ) it corrects the brand size but it has other effects as in the mobile

问题 I'm trying to overwrite the color of text in my Bulma navbar, it works if I'm using an !important tag in my regular SCSS files but I'm trying to use as few !important tags as possible. The Bulma docs tell me that I can overwrite the Bulma color variables, but all my attempts have been futile. What I've tried so far: Created a _bulmaTheme.scss file Tried to overwrite the colors in this file The colors do not get overwritten in the front end, I can see them further down my console as

问题 I'm trying to overwrite the color of text in my Bulma navbar, it works if I'm using an !important tag in my regular SCSS files but I'm trying to use as few !important tags as possible. The Bulma docs tell me that I can overwrite the Bulma color variables, but all my attempts have been futile. What I've tried so far: Created a _bulmaTheme.scss file Tried to overwrite the colors in this file The colors do not get overwritten in the front end, I can see them further down my console as

问题 I have an issue with loading Leaflet map using Vue.js and Bulma stepper components (via Buefy). If map is placed inside stepper then it does not load all tiles until browser window is resized. If map is placed outside of Bulma stepper component then it loads without any issue. How to get this working ? Example with the issue: https://codepen.io/alxxnder/pen/zyYxwd Example without the issue: https://codepen.io/alxxnder/pen/LMYEjr <b-steps> <b-step-item label="Account" icon="account-key"> <LMap

问题 I have an issue with loading Leaflet map using Vue.js and Bulma stepper components (via Buefy). If map is placed inside stepper then it does not load all tiles until browser window is resized. If map is placed outside of Bulma stepper component then it loads without any issue. How to get this working ? Example with the issue: https://codepen.io/alxxnder/pen/zyYxwd Example without the issue: https://codepen.io/alxxnder/pen/LMYEjr <b-steps> <b-step-item label="Account" icon="account-key"> <LMap