On some mobile devices (e.g. iPhone 5/SE) the vuetify v-bottom-navigation looks as follows:
To prevent this, I want to move the buttons closer together, so that it looks like on other devices:
My approach was to pass the small prop / class but it didn't work:
<v-bottom-navigation>
<v-btn small>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<!-- ... more buttons here ... -->
</v-bottom-navigation>
You can override the padding and min width of the buttons and adjust it to your needs:
<v-bottom-navigation>
<v-btn class="my-btn" small>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<!-- ... more buttons here ... -->
</v-bottom-navigation>
.v-btn.my-btn {
min-width: 20px !important;
}
Also take a look at the component API and SASS variables
Related
The same problem as this post except it is Vuetify.
Is there any solution that use provided API? CSS would be the last option I choose.
codepen demo
<template>
<v-app-bar app dark absolute class="navbar-bg" >
<v-app-bar-nav-icon #click="toggleSidebar" />
<v-toolbar-title>Homepage</v-toolbar-title>
</v-app-bar>
</template>
Currently, there's no a single prop in API.
But you may help yourself a lot with a built-in vuetify classes and directives.
First of all, you (sadly) need to write some CSS to manually disable initial page scrolling:
html {
overflow-y: hidden;
}
.scrollable {
overflow-y: scroll;
}
Then you need to add <v-main> component to your application with scrollable pt-0 mt-16 classes and wrap all of your future app components into it. This classes will adjust the padding from the default <v-app-bar> and enable scrolling directly in <v-main>.
Finally, you should add v-resize directive to <v-main> to automatically recalculate your page size when user will resize a page:
<v-main class="scrollable pt-0 mt-16" v-resize="onResize">
...your application data...
</v-main>
...
methods: {
onResize() {
//64px is v-app-bar height in your case
document.querySelector(".scrollable").style.height = (window.innerHeight - 64) + 'px';
}
},
That's it. You may then create your custom component to wrap <v-main> and forget about such manipulations.
Codepen link with an example
I have a laptop with 15.6'' screen and an external monitor with 23'' screen. I have a .vue component with this code:
<template>
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">
Hello
</div>
</template>
It shows this when I view it on laptop screen:
the teal color which corresponds to the xl screen size.
The div has the same teal color when I move it to the external monitor.
However the difference between the screen sizes is significant. If both the 15.5'' and 23'' are considered to be xl, how does one achieves better responsiveness?
For instance, I have a navbar with several navbar items. When I view it on the laptop screen, I need to make the padding px-2 small to get them all to fit:
However on the 23'' screen I have space to add more padding/margin, but can't do it because the changes would affect the laptop view as well:
This is the code of the NavbarItem.vue:
<template>
<li class="flex-1 md:flex-none md:mr-3
sm:text-xs md:text-xs lg:text-xs xl:text-xs
border rounded-full">
<a class="inline-block py-2 lg:px-5 xl:px-2
text-white no-underline" href="#">
{{text}}
</a>
</li>
</template>
<script>
export default {
props: ['text']
}
</script>
I tried adding lg:px-5 but it doesn't affect anything, unless I remove xl:px-2. When there's xl:px-2, the lg class is ignored.
xl has a min-width of 1280px. Check breakpoints.
Your 15.6" and 23" both screens falls under minimum of 1280px. I recommend adding additional screen.
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xxl': {'min': '1920px'}, // this is to support your 23". Make sure your 15.6" screen is less than the min px value passed here
},
}
}
Then your class="inline-block py-2 lg:px-5 xl:px-2 xxl:px-4"
Give this a try & keep me posted in the comments below. Cheers!
How do I set full width on input elements inside a radio group?
I'm using the following setup to create two options (user can either upload a file or specify a URL):
<v-radio-group v-model="photo_mode">
<v-layout row align-baseline>
<v-radio value="file" />
<v-file-input v-model="eitem.photo" class="mr-4 mt-0" :disabled="photo_mode=='url'" />
</v-layout>
<v-layout row align-baseline>
<v-radio value="url" />
<v-text-field v-model="eitem.photo_url" class="mr-4 mt-0" :disabled="photo_mode=='file'" />
</v-layout>
</v-radio-group>
The looks fine except that both v-file-input and v-text-field are not as wide as the container. Here is a snapshot:
As you see, the v-text-field above the radio group (Details field) is correctly showing full-width, but the two inputs inside the radio group are not. What can I do to fix this?
Found the solution. This is a bug in Vue. Already reported here. The solution is to simply add the following CSS in your App.vue:
<style>
.v-input--selection-controls .v-input__control{
width: 100%;
}
</style>
Make sure the style section is not marked with scoped keyword.
I found that I also needed to set the style of v-label too, in order for this workaround to function properly. Also I used scoped css locally in the component:
.radio-group-full-width >>> .v-input__control {
width: 100%
}
.radio-group-full-width >>> .v-label {
width: 100%
}
So in the template:
<v-radio-group class="radio-group-full-width">
As the title says, I have been unable to correctly apply a custom color to a menu in Semantic UI. I have scoured the internet for tutorials, guides, including the Semantic UI page. The only things I have been able to find are people able to successfully apply custom colors to buttons, or people utilizing the default colors defined by Semantic UI for the menu.
<div class="ui fluid container">
<div class="ui segment attached">
<h1 class="ui header item">CONTERACT</h1>
</div>
</div>
<div class="ui fluid container">
<div class="ui primary attached four item inverted menu">
Project Name
Link
Link
Link
</div>
</div>
I have defined the particular color I want as #primaryColor, and this works on a button, just as an experiment, but does not work on the menu. I have also tried to override a default color in site.override with no success. I am under the suspicion that you may not be able to use a custom color with a menu in Semantic UI, but that is also hard to believe considering that defeats the customization aspect.
/**
User Global Variables
**/
#primaryColor: #fabd42
The documentation for coloured menus can be found here and from looking at the source code in the examples we can see that to change out a colour a single-use class is used, e.g red makes the menu red:
<div class="ui red three item menu"></div>
And to set red as the background colour (instead of text colour) the inverted class is added, e.g:
<div class="ui red inverted three item menu"></div>
That indicates that we need to identify where these single-use colour classes are defined and add our own. Searching the source code via GitHub for menu inverted orange we can find that these are defined in menu.less like this:
/* Orange */
.ui.inverted.menu .orange.active.item,
.ui.inverted.orange.menu {
background-color: #orange;
}
.ui.inverted.orange.menu .item:before {
background-color: #invertedColoredDividerBackground;
}
.ui.inverted.orange.menu .active.item {
background-color: #invertedColoredActiveBackground !important;
}
Therefore to add your own background colour for a menu you need to define a background colour class in the same way, e.g:
/* Peach */
.ui.inverted.menu .peach.active.item,
.ui.inverted.peach.menu {
background-color: #peach;
}
.ui.inverted.peach.menu .item:before {
background-color: #invertedColoredDividerBackground;
}
.ui.inverted.peach.menu .active.item {
background-color: #invertedColoredActiveBackground !important;
}
Then you need to add the peach colour, which can be set in site.variables, e.g:
/*--- Colors ---*/
#peach : #FABD42;
You're done! You've added your own colour (peach) and made it available as a background menu colour. The final step is to add the colour class to your menu along with inverted to set it as the background colour, e.g:
<div class="ui peach inverted primary attached four item menu">
</div>
I have a series of images of different size (call it set A) that I am arranging next to each other. Upon press of a button, those images get replaced by a much larger image in original size. I'd like to make sure the replaced image adheres to the original image size. I've tried to apply various container width tricks, but so far have failed.
I've set up a runnable demo here https://stackblitz.com/edit/ionic-au2pcv (code is in home.html and home.ts in pages directory)
If you press the "Switch" button, the images get replaced, as does the size (which I want to avoid)
(please excuse inline CSS styling)
The code:
My template
<ion-content padding>
<div *ngFor="let image of images">
<!-- the reason for this div is to force the placeholder image to this size -->
<!-- doesn't seem to work... -->
<div [ngStyle]="{'width':image.w, 'height':image.h, 'float':left}">
<img [src]="showImage?image.src:placeholder" style="float:left;max-width:100%; max-height:100%;width:auto;height:auto;" />
</div>
</div>
<div style="clear:both">
<button ion-button (click)="toggleImage()">switch</button>
</div>
</ion-content>
The TS:
import { NgStyle } from '#angular/common';
images = [{
src: 'http://lorempixel.com/300/200/',
w:300,
h:200,
},
{
src: 'http://lorempixel.com/100/100/',
w:100,
h:100,
},
{
src: 'http://lorempixel.com/200/80/',
w:200,
h:80,
}];
placeholder = "http://via.placeholder.com/1000x1000";
showImage:boolean = true;
toggleImage() {
this.showImage = !this.showImage;
}
Your demo doesn't show images. Anyways, to acheive this, you don't have to use containers and all other things. It can be acheive by using simple css. Before doing this, make sure to fix the size of the image. for example if you want the 1 image size to be 30% and height 100% and then set object-fit property of the css to be cover. Below is the quick example:-
.image{
width:30%;
height:100%;
object-fit:cover;
}
<img src="../image_path" class="image"/>
Thanks