I am having ionic rows in a grid. Each row consists of four labels and an ion-select at the end. but the ion-select is not properly aligned horizontally. Can someone please advise on to how to fix the alignment
<ion-grid>
<ion-row align-items-center>
<ion-col>
<label style="font-weight: bolder">Item</label>
</ion-col>
<ion-col>
<label style="font-weight: bolder">Qty</label>
</ion-col>
<ion-col>
<label style="font-weight: bolder">Unit Price</label>
</ion-col>
<ion-col>
<label style="font-weight: bolder">Total</label>
</ion-col>
<ion-col *ngIf="isCustomerView === false || selectedOrder.STATUS === OrderStatus.READY">
<label style="font-weight: bolder">Status</label>
</ion-col>
</ion-row>
<ion-row *ngFor="let orderElement of orderElements" align-items-center>
<ion-col >
<label>{{orderElement.PRODUCT_NAME}} </label>
</ion-col>
<ion-col>
<label>{{orderElement.QUANTITY}} {{orderElement.UNIT}} </label>
</ion-col>
<ion-col>
<label>{{orderElement.UNIT_PRICE}} </label>
</ion-col>
<ion-col>
<label>{{orderElement.UNIT_PRICE * orderElement.QUANTITY}} </label>
</ion-col>
<ion-col *ngIf="isCustomerView === false || selectedOrder.STATUS === OrderStatus.READY">
<ion-select [value]="orderElement.STATUS">
<ion-select-option *ngFor="let status of orderElementStatus" [value]="status">{{status}}</ion-select-option>
</ion-select>
</ion-col>
</ion-row>
</ion-grid>
The output looks like as attached
You need to eliminate the padding at top and start for the ion-select. This rule will do that for you:
ion-select {
--padding-top: 0;
--padding-start: 0;
}
Final Result
Related
I have a table that uses bootstrap Vue's table. Each row of the table corresponds to an item. My current problem is I need to add an icon next to each row, and display them every time I hover over that row, and then do some function when I click on this icon. But I can't find a way to add an icon. I have tried following the instructions on https://bootstrap-vue.org/docs/components/table with using slots but it only works for #head and #cell. Need an idea on this issue. This is my code and a picture describe my problem
<b-table
ref="table"
class="minh--30 mh--100 overflow-y-auto"
bordered
responsive
:items="items"
:fields="fields"
>
<template #head()="data">
<span>{{ $t(data.field.label) }}</span>
</template>
<template #cell(field)="data">
<span
v-if="data.item.isDrag"
class="d-block p-3"
>{{ data.item.field }}</span>
<b-dropdown
v-else
right
no-caret
variant="white"
class="minw--40 w-100"
menu-class="w-100 mh--24 overflow-auto minw-unset"
>
<template #button-content>
<div
class="flex-center minh--11 text-normal position-relative px-2"
>
<span class="pr-5 word-break text-line-clamp-1">{{ data.item.field }}</span>
<i
class="fas fa-chevron-down position-absolute top-50 end--1 translate-middle-y px-2"
/>
</div>
</template>
<b-dropdown-item
v-for="item in listField"
:key="item.id"
variant="normal py-2"
class="fs-12 fs-xl-15"
#click="selectField(item, data)"
>
<span class="word-break text-line-clamp-1">{{ $t(item.text) }}</span>
</b-dropdown-item>
</b-dropdown>
</template>
<template #cell(action)="data">
<b-dropdown
right
no-caret
variant="white"
class="minw--40 w-100"
menu-class="w-100 mh--24 overflow-auto minw-unset"
>
<template #button-content>
<div
class="flex-center minh--11 text-normal position-relative px-2"
>
<span class="pr-5 word-break text-line-clamp-1">{{ data.item.action }}</span>
<i
class="fas fa-chevron-down position-absolute top-50 end--1 translate-middle-y px-2"
/>
</div>
</template>
<b-dropdown-item
v-for="item in listDropdown"
:key="item.id"
variant="normal py-2"
class="fs-12 fs-xl-15"
#click="selectItem(item, data)"
>
<span class="word-break text-line-clamp-1">{{ $t(item.text) }}</span>
</b-dropdown-item>
</b-dropdown>
</template>
<template #cell(selectCharacter)="data">
<b-dropdown
right
no-caret
variant="white"
class="minw--40 w-100"
menu-class="w-100 mh--24 overflow-auto minw-unset"
>
<template #button-content>
<div
class="flex-center minh--11 text-normal position-relative px-2"
>
<span class="pr-5 word-break text-line-clamp-1">{{ data.item.selectCharacter }}</span>
<i
class="fas fa-chevron-down position-absolute top-50 end--1 translate-middle-y px-2"
/>
</div>
</template>
<b-dropdown-item
v-for="item in listCharacter"
:key="item.id"
variant="normal py-2"
class="fs-12 fs-xl-15"
#click="selectCharacter(item, data)"
>
<span class="word-break text-line-clamp-1">{{ $t(item.text) }}</span>
</b-dropdown-item>
</b-dropdown>
</template>
<template #cell(inputCharacter)="data">
<input
v-model="data.item.inputCharacter"
type="text"
class="form-control h--11 border-0"
>
</template>
<template #cell(startPosition)="data">
<input
v-model="data.item.startPosition"
type="number"
class="form-control h--11 border-0"
>
</template>
<template #cell(characterCount)="data">
<input
v-model="data.item.characterCount"
type="number"
class="form-control h--11 border-0"
>
</template>
<template #cell(needReplace)="data">
<input
v-model="data.item.needReplace"
type="text"
class="form-control h--11 border-0"
>
</template>
<template #cell(replace)="data">
<input
v-model="data.item.replace"
type="text"
class="form-control h--11 border-0"
>
</template>
<template #cell(delete)="data">
<div class="flex-center pt-1">
<input
v-if="!data.item.isDrag"
v-model="data.item.delete"
type="checkbox"
>
</div>
</template>
</b-table>
Based on reading the documentation, the table component wasn't designed for this use case because you are adding icons that are outside of the table itself.
One alternative would be to use the grid system https://bootstrap-vue.org/docs/components/layout#layout-and-grid-system to create one narrow column on the left for the icons and one wide column on the right for the table. In the narrow column, you could create rows that are exactly the height of each row of the table so that the items stay aligned with each row.
Another alternative would be to use the #cell slot, and put an element inside that uses CSS, possibly the transform property (https://www.w3schools.com/cssref/css3_pr_transform.asp), to make the element appear to the left of where it really is.
<div v-if="boughtTicket">
<ion-row>
<ion-col size="3">
<p>ZÓNY</p>
<p>2</p>
</ion-col>
<ion-col size="3">
<p>MINÚT</p>
<p>30</p>
</ion-col>
<ion-col size="6">
<div class="flex justify-content-between">
<div class="ml-3">
<p>ZĽAVNENÝ</p>
<p>0,41€</p>
</div>
<ion-icon #click="BuyTicket" :icon="cartOutline"></ion-icon>
</div>
</ion-col>
</ion-row>
</div>
this is in ionic code and Im trying to make a function that if the button is clicked this whole code is going to be changed to different kind
methods: {
buyTicket() {
if(this.buyTicket = )
}
}
this is my method. How can I finish the code please
I am using a component for ion slides with ion chips for making categories (ex. All, Comedy, etc as YouTube has on Home screen for quick searching).
This component is working fine but without rubber band effect when I open in modal, so I want that user only scroll till first & last chip in modal. But in modal chips are scrolling non stop.
#ionSlidesComponentWithChips
<ion-item color="dark" class="border-top-1">
<ion-slides [options]="slideOpts">
<ion-slide *ngFor="let category of categories">
<ion-chip color="light" has-bouncing="true">
<ion-label>{{category}}</ion-label>
</ion-chip>
</ion-slide>
</ion-slides>
</ion-item>
I added component in modal.
<app-header></app-header>
<app-category-slides></app-category-slides>
<ion-content>
<ion-backdrop class="ion-margin-top"></ion-backdrop>
<img src="assets/imgs/{{img}}.jpg">
</ion-content>
<ion-footer translucent="false" class="ion-no-border" color="dark">
<ion-item lines="none" text-center color="dark">
<ion-grid>
<ion-row class="ion-align-items-center ion-text-center">
<ion-col>
<ion-button color="light" fill="clear">
<span class="material-icons">
thumb_up
</span>
</ion-button>
<span class="ion-padding">2.2k</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear">
<span class="material-icons">
thumb_down
</span>
</ion-button>
<span class="ion-padding">20</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear">
<span class="fa fa-share"></span>
</ion-button>
<span class="ion-padding">Share</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear">
<span class="material-icons">
favorite
</span>
</ion-button>
<span class="ion-padding">Save</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear" (click)="close()">
<span class="material-icons">
close
</span>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-footer>
for better understanding the problem I just uploaded video: Please click here
I am using the following code as a Vue component in order to register it in the root component.
const RegisterForm = {
data() {
return {
test: 'bonjour',
user: {
email: '',
firstName: 'test',
lastName: '',
password: '',
passwordConfirm: '',
terms: false,
receiveUpdates: false
}
};
},
methods: {
handleSubmit() {
const data = this.user;
if (!isFormValid()) {
return;
}
},
template: `
<div>
<form class="flex flex-col mt-2" #submit.prevent="handleSubmit()">
<label class="text-xs block mt-6 mb-3" for="firstName">
First Name
</label>
<input v-model="user.firstName" required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="firstName" id="firstName" value="">
<label class="text-xs block mt-6 mb-3" for="lastName">
Last Name
</label>
<input v-model="user.lastName" required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="lastName" id="lastName" value="">
<label class="text-xs block mt-6 mb-3" for="emailAdress">
Email Address
</label>
<input v-model="user.email"required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="emailAdress" id="emailAdress" value="">
<label class="text-xs block mt-6 mb-3" for="password">
Password
</label>
<input v-model="user.password" placeholder="Set password for your account" required type="password" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="password" id="password" value="">
<label for="confirmTerms" class="cursor-pointer select-none flex items-start mt-8 mb-3 text-xs leading-none">
<input v-model="user.terms" type="checkbox" name="confirmTerms" id="confirmTerms" checked class="mr-3 inline-block">
<span class="flex-auto leading-normal -mt-1">Check this box to agree to our <a class="texspt-pink no-underline" href="#">Terms of Use</a>, <a class="text-pink no-underline" href="#">Privacy Policy</a> and consent to us storing your name and email address as highlighted in our <a class="text-pink no-underline" href="#">GDPR compliance</a>.</span>
</label>
<label for="receiveUpdates" class="cursor-pointer select-none flex items-start mt-2 mb-8 text-xs leading-none">
<input v-model="user.receiveUpdates" type="checkbox" name="receiveUpdates" id="receiveUpdates" class="mr-3 inline-block">
<span class="flex-auto leading-normal -mt-1">We would like to send you emails with tips to help you get started and details on new features.</span>
</label>
<button type="submit" class="bg-pink hover:bg-pink-dark flex-none text-white px-4 py-6 rounded text-lg font-MuseoSans-medium" name="button">Sign up</button>
</form>
</div>
`
};
This renders fine and works as a form, however I have been trying to add an error section to the top. When ever I add any HTML to the top of this template code (i.e. between the <div> and the <form>) it breaks the whole thing and it doesn't render.
This is because you have an end label tag which has no start tag.
<div>
<form class="flex flex-col mt-2" #submit.prevent="handleSubmit()">
<label class="text-xs block mt-6 mb-3" for="firstName">First Name</label>
<input v-model="user.firstName" required type="text" class="[...]" name="firstName" id="firstName" value="">
<label class="text-xs block mt-6 mb-3" for="firstName">Last Name</label>
<input v-model="user.lastName" required type="text" class="[...]" name="lastName" id="lastName" value="">
<label class="text-xs block mt-6 mb-3" for="emailAdress">Email Adress</label>
<input v-model="user.email"required type="text" class="[...]" name="emailAdress" id="emailAdress" value="">
<label class="text-xs block mt-6 mb-3" for="password">Password</label>
<input v-model="user.password" placeholder="[...]" required type="password" class="[...]" name="password" id="password" value="">
<input v-model="user.receiveUpdates" type="checkbox" name="receiveUpdates" id="receiveUpdates" class="mr-3 inline-block">
<span class="flex-auto leading-normal -mt-1">[...]</span>
</label <!-- Just here -->
<button type="submit" class="[...]" name="button">Sign up</button>
</form>
</div>
In my component Search.vue I need to detect whether search input focused or not in order to hide search results if cursor is elsewhere
I used vue-instantsearch
Here is the code of my custome component's template section
<template>
<ais-index index-name="getstarted_actors" :search-store="searchStore">
<div class="col-md-10 col-sm-9">
<ais-search-box :autofocus="true">
<div class="input-group" ref="searchInputGroup">
<ais-input placeholder="Find books..."
:class-names="{'ais-input': 'form-control'}" autofocus="true" >
</ais-input>
<span class="input-group-btn">
<ais-clear :class-names="{'ais-clear': 'btn btn-default'}">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</ais-clear>
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</span>
</div>
</ais-search-box>
<ais-results v-show="searchStore.query.length > 0">
<template scope="{ result }">
<div v-on:click="searchResultClick(result)" class="found-item">
<a> <span>{{ result.name }}</span> <span>{{ result.rating }}</span></a><br/>
</div>
</template>
</ais-results>
</div>
</ais-index>
</template>
You can try:
<ais-input placeholder="Find books..."
:class-names="{'ais-input': 'form-control'}" autofocus="true"
#focus="onFocus"
>
</ais-input>
and your methods:
methods: {
onFocus() { console.log('Focused') }
}