I have a Vue project in which I'm transitioning from bootstrap to Vuetify, but they need to coexist for a while.
The problem is that Vuetify mixin.sass is overwriting the padding in the grid columns of bootstrap adding padding top and bottom by 12px, but when the project is promoted this padding doesn't exist any more and everything is vertically shrunk.
How can I avoid the overwriting?
enter image description here
enter image description here
"bootstrap": "^3.3.8"
"vuetify": "^2.2.25"
Related
I'm working on a Vue.js project that uses PrimeVue attributes. I needed a dropdown menu and I used PrimeVue's . It works great, but when I select an option on the dropdown, the selected option text becomes white. Dropdown itself is also white, so I cannot see the chosen option. You should know that this issue doesn't happen when I use a light PrimeVue theme. But when I use a dark PrimeVue theme, this issue appears.
PrimeVue themes I am using:
primevue/resources/themes/lara-light-blue/theme.css
primevue/resources/themes/lara-dark-blue/theme.css
Again, the dark one has the problem. So, I want to change the color of the text inside the Dropdown. I thought that if I make the text color black as a fixed color, the issue would be handled. Or any other suggestions?
I tried to assign a background-color to black but it did not solve my problem.
I am trying to make a vuetify website on which i have a layout with multiple pages that are all full screen height. How can i do this using the vuetify.js layout/container/flex system?
A graphic to illustrate my goal
Why does my navbar jump a little to the right when a drop-down is selected? Looks like some padding is missing on :hover perhaps. Any help would be appreciated. Thanks
http://www.85widening.com/default.html
It has to do with Bootstrap hiding the vertical scrollbar on body when the modal opens. It occurs only when you have a fixed navbar and body/modal content that require vertical scrolling.
Based on what I recall and found, it's a bug with Bootstrap 3 that I don't believe was ever resolved based on this GitHub issue.
Most workarounds seem to involve JS to add padding-right (like 15px) to the navbar when the modal opens or to override the overflow: hidden property the modal-open class that Bootstrap adds to body when you open a modal. The downside of this is you will have two vertical scroll bars (ugly). Either add the workaround or remove the fixed navbar. I haven't moved on to Bootstrap 4 yet but maybe they've addressed this.
I have previously used bootstrap 3 css only with angular 2 for an application which did not require jquery dependent bootstrap components like modal, carousel etc.
I am now considering using bootstrap 4 with Angular 2 and have looked through bootstrap 4 documentation, but still confused on what components depend on jquery and/or tether.js and what components work if I include css alone. Any help will be appreciated!
Current Alpha (6) has 3 sets of CSS.
bootstrap-reboot - defines only Html standard tags
bootstrap-grid - defines the mobile-firt grid system, e.g. .container & .col-x-x
bootstrap - full version
Generally speaking, the first two above will not require the JS dependencies.
If you want to dig deeper then a quick look at the bootstrap.scss source has the JS dependant items listed separately. Thus, the non-JS dependent components are:
Core CSS
reboot
type
images
code
grid
tables
forms
buttons
Components
transitions
dropdown
button-group
input-group
custom-forms
nav
navbar
card
breadcrumb
pagination
badge
jumbotron
alert
progress
media
list-group
responsive-embed
close
Other
print
Alternately, as of 4.4, the only components that require JavaScript are
Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper.js)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Tooltips and popovers for displaying and positioning (also requires Popper.js)
Scrollspy for scroll behavior and navigation updates
I want to collapse navbar when screen size is <=750px.
You can use Bootstrap's customization tool to build a modified version of Bootstrap. From here, you can alter #grid-float-breakpoint to another breakpoint defined by Bootstrap (ie, xs, sm, md, lg).
You need to modified according to highlighted red in below image.
When you're finished, navigate to the Download section, and click On Compile and Download
& then use it bootstrap js & CSS.
Did you not read the docs?
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).