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
Related
Here is my code:
<template>
<div class="main-column d-flex flex-column h-100">
<div class="pl-3 pr-3">
<filter-panel ref="filterComp" :controls="filterControls" :urlParams="$route.query" #filterResults="onSearchClicked" />
</div>
<div class="flex-grow-1 d-flex flex-column px-1 py-2 bg-container">
<div class="position-relative h-100">
<div class="absoluteFill">
<div class="collapse-panel nested-background mb-2 w-100">
<div class="collapse-bar full-length">
<b-button class="buttonRow w-100 py-0 d-flex justify-content-between" size="sm" variant="link" #click="hideGraphs = !hideGraphs" v-b-toggle.count-collapse>
<span class="title">Chart</span>
<icon :class="{'down': hideGraphs}" class="icon rotate mt-1" icon="chevron-up" size="lg" />
</b-button>
</div>
<b-collapse id="count-collapse" visible>
<transition name="fade" mode="out-in">
<div>
<DxChart :data-source="graphData"
palette="Material"
class="p-3">
<DxCommonSeriesSettings type="bar" argument-field="date">
<DxLabel>
<DxFormat :precision="0" type="fixedPoint" />
</DxLabel>
</DxCommonSeriesSettings>
<DxSize :height="350" />
<DxSeries name="Mapping Client"
value-field="mappingClient"
color="#a4de02" />
<DxSeries name="Mapping ISCI"
value-field="mappingIsci"
color="#add8e6" />
<DxSeries name="Mapping Product"
value-field="mappingProduct"
color="#ff0000" />
<DxLegend :visible="true" />
<DxTooltip :enabled="true" />
</DxChart>
</div>
</transition>
</b-collapse>
</div>
<!--Grid card-->
<div class="collapse-panel nested-background mb-2 d-flex flex-column w-100 ">
<div class="collapse-bar full-length">
<b-button class="buttonRow w-100 py-0 d-flex justify-content-between" size="sm" variant="link" #click="hideGrids = !hideGrids" v-b-toggle.counts-collapse>
<span class="title">Grids</span>
<icon :class="{'down': hideGrids}" class="icon rotate mt-1" icon="chevron-up" size="lg" />
</b-button>
</div>
<b-collapse id="counts-collapse" visible>
<transition name="fade" mode="out-in">
<dx-tab-panel ref="tabPanel" :items="tabs">
<div slot="title" class="wordwrap" slot-scope="tab">{{tab.data.title}}</div>
<div slot="item" slot-scope="tab">
<span v-if="isTab(tab, 0)">
<data-summary :graphData="graphData"></data-summary>
</span>
<span v-if="isTab(tab, 1)"><user-data :rawData="rawData"></user-data></span>
</div>
</dx-tab-panel>
</transition>
</b-collapse>
</div>
</div>
</div>
</div>
</div>
I need the last table to have an overflow inside the div and not scroll the page. I also need that div to expand if the chart is minimized. I have been trying to solve this all day I'm out of answers, I feel like this should be a super simple fix but I just can't get it.
Thanks for any help!
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
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') }
}
I'm trying to get a Bootstrap 3 navbar collapse properly but still have two open issues:
the margins not equal:
when the navbar breaks, the icons are not left aligned with the text:
I know how I could add style fixes until I get this right, but I how do I solve this properly?
https://jsfiddle.net/edwardtanguay/v83aj4cn/3
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-collapse">
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-minus"></span>
</a>
<p class="navbar-text">Company Name</p>
<p class="navbar-text">CUSTOMER PORTAL</p>
<p class="navbar-text navbar-right">Contact Name</p>
<p class="navbar-text navbar-right">2016-04-14</p>
</div>
</div>
</div>
</nav>
</div>
There you go friend!
SOLUTION JDSFILE
Regards!