here's the picture
here's the style when input is clicked
Here's my code:
<ion-item fill="outline">
<ion-icon :src="mail" slot="start"></ion-icon>
<ion-label position="floating">Email Address</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>
I am using ionic framework and vue.js as a javascript framework. Please help.
The extra space above the <ion-label> is present because the text inside the tag is going to move there when clicked.
In case you want the Icon and the text of the label on one level you can easily achieve this by repositioning the Icon itself.
<style>
ion-icon{
margin-block-start: auto;
}
</style>
Here is an example.
Related
You can see the issue I'm having here:
https://codepen.io/ryanrapini/pen/LYeWZKR?editors=1010
Essentially, I have several dialogs which I have contained into their own custom "vue components" i.e. order-dialog.vue. In an ideal world, I could simply include this <order-dialog> component wherever I need it, and it would render the activator button and then handle all of the dialog state inside the component, so the parent doesn't need to worry.
Unfortunately, if I do this in a v-card-actions section I get spacing issues. Is this a bug with Vuetify or am I doing something wrong?
I thought that by moving the activator out of the <v-dialog> tag it might fix the issue, but it still doesn't unless I break my component up into a v-dialog component and a separate activator, which means I now need to manage the state of the dialog in the parent.
Thanks for any help.
I don't think you are doing something wrong, and I'm not sure that it's a Vuetify bug.
This comes from CSS rule in Vuetify library:
.v-application--is-ltr .v-card__actions>.v-btn.v-btn+.v-btn {
margin-left: 8px;
}
I think the authors assumed that this block should contain only buttons. But in your case (in 2nd and 3rd approach) an output HTML looks like this:
<div class="v-card__actions">
<button class="v-btn ...">
...
</button>
<div class="v-dialog__container"><!----></div>
<button type="button" class="v-btn ...">
...
</button>
<button type="button" class="v-btn ...">
...
</button>
</div>
So v-dialog__container breaks this rule.
You can fix you issue, by example, with an additional rule:
.v-application--is-ltr .v-card__actions>.v-btn:not(:first-child) {
margin-left: 8px !important;
}
Or you can also apply helper classes (ml-2) into specific buttons.
I have a Vue project and I have more than 50 components now, I want to prepare a dark mode for the entire project and I want to control the Mode type from a button on my navbar. I made a test version so I figured how to active and deactive classes but I don't know how to do that for the entire project by clicking a single button or check a checkbox. Here is my test;
<div class="container-main" :class="{'background-dark' : darkMode }">
<!-- Enable Dark Mode -->
<div>
<label class="form-switch">
<input type="checkbox" class="switch switch-md" v-model="darkMode" />
</label>
<label">Enable Dark Mode</label>
</div>
</div>
<style scoped>
.background-dark {
background-color: black;
}
</style>
When the switch is checked, darkMode variable turns to true and the class gets active, so my background color turns to black. My question is, I will create the dark mode version of the CSS file I use right now and I want this control to be in the navbar, how can a button or switch control the entire components' css classes in a project. If I need to use props, how do I do that? Thanks in advance.
I tried to add an #click to a font awesome icon. However, whether I add an #click event to span or i tag, it doesn't work at all. I suspect the event is taken by the input field. How can I make the magnifier icon clickable?
<div class="control has-icons-right">
<input v-model="keyword" #keyup.enter="findName" class="input is-large" type="text" placeholder="Input 1 word, hit Enter"/>
<!-- or 2 words separated by space -->
<span class="icon is-right" #click="findName">
<i class="fa fa-search"></i>
</span>
</div>
Source: 3sName.com
It is because, you are using bulma class .icon which having the following css.
pointer-events: none;
Try to override it with
pointer-events: all;
pointer-events css will prevent your element from emitting a click event.
:)
use a button / anchor 'a' instead span to wrap the fa-icon, along with #click method? Span isn't good practice for click event as well.
Have you tried #click.prevent="findName" modifier?
How do I make this expansion-panel open content only on clicking icon?
Tried using readonly but it didn't help.
Thanks in advance!
https://vuetifyjs.com/en/components/expansion-panels#expansion-panel
You can put online the argument in all collapse like: expanded={!expanded}
and in the icon you put the onClick={toggle}
I was having the same problem and just found a solution for that.
You need to implement a custom button on the expansion panel, so it will accept custom events. You can achieve that using template and v-slot:
<v-expansion-panel #click.prevent="onClick()">
<v-expansion-panel-header>
...your expansion panel code here
<template v-slot:actions>
<v-btn icon #click.stop="onClick()">
<v-icon>mdi-filter-variant</v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
</v-expansion-panel>
...and your onClick method would be like this:
onClick() {
/*this will toggle only by icon click. at the same time, will prevent toggle
by clicking on header. */
const curr = this.panel
this.panel = curr === undefined ? 0 : undefined
}
It may seem a little magical that the same function is toggling on icon click and preventing toggle on header click, but this happens because the custom icon button does not toggle itself, so we force that using the onClick method. On the other hand, the expansion panel header has its native property of toggling the panel. So when we click it, its value will automatically change and we need to change it back to what it was before the click.
To make the expansion-panel open only on clicking icon you can use css that disables all clicks on the header and only allows clicks on the icon:
<style>
.v-expansion-panel-header{
pointer-events: none;
}
.v-expansion-panel-header__icon{
pointer-events: All;
}
</style>
Keep in mind if you are using scoped style you have use >>>:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Here is the template example, I added #click to provide btn like experience when user clicks on an icon, it's not necessary:
<template>
<v-expansion-panel>
<v-expansion-panel-header>
<template #actions>
<v-icon class="icon Icon Icon--32 icon-utility-arrows-carrot_down-32"
#click/>
</template>
</v-expansion-panel-header>
<v-expansion-panels >
<v-expansion-panel-content >
<!--content here-->
</v-expansion-panel-content>
</v-expansion-panels>
</v-expansion-panel>
</template>
I have a hyperlink that opens a modal dialog:
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">{{Modal}}</a>
The styling makes it appear as a button while I want it as a plain text. IF I remove class="waves-effect waves-light btn modal-trigger", the text disappear completely. Replacing it with a different class
.txt {
color: white;
}
did not work - text still disappears. Can anyone tell me why?
Remove the waves-effect waves-light btn classes. This should leave you with:
<a class="modal-trigger" href="#modal1">{{Modal}}</a>
This will remove the button styling and leave you with simple text that triggers your modal.