Good day guys, today i'm battling with something rather simple but to which i cannot seem to find the answer. I'm looking to apply transition="fab-transition" to all of the select items on my form. However it seem to only work on v-menu items. On the form i have two v-select and one v-menu. The v-menu transition work fine but the v-selects does not do anything. Below is my code, thanks in advance i know you guys are all super smart :)
<v-select :items='locations' item-text='name'
item-value='id' label='Select Location'
prepend-icon="local_hospital"
v-model='appointment.location_id'
:rules="[v => !!v || 'Please Select Location']"
transition="fab-transition">
</v-select>
<v-select :items='patient.patients' item-text='name'
item-value='id' label='Select Patient'
prepend-icon="face"
v-model='appointment.patient_id'
:rules="[v => !!v || 'Please Select Patient']"
transition="fab-transition">
</v-select>
<v-menu v-model="menu"
:close-on-content-click="false"
:nudge-right="40"
offset-y
min-width="290px"
transition="fab-transition">
<template v-slot:activator="{ on }">
<v-text-field
v-model="appointment.date"
label="Select Date"
prepend-icon="event" readonly
v-on="on"
:rules="[v => !!v || 'Please select Date']">
</v-text-field>
</template>
<v-date-picker v-model="appointment.date"
#input="menu = false"></v-date-picker>
</v-menu>
Again the v-menu(date picker) works fine but the two v-selects still has no transition on select. PS the vuetify home page just says "Most components can have their transition altered through the transition prop." with only v-menu examples. Please Help :)
So just to close this one out. Rie just mentioned that v-select doesnt have the transition property so we cant apply transitions styles.
If anyone does have a work around pls share
Thanks Again Rie !!!!
Related
The floating label on an outlined v-select or v-autocomplete is getting cut off.
Is this mis-use on my end, or a bug with Vuetify?
<v-data-table :headers="[{ value: 'name', text: 'name' }]">
<template #[`header.name`]>
<v-select
:value="['a']"
outlined
label="I should not be cut off"
bottom
:items="[{text: 'a', value: 'a'}]"
deletable-chips
small-chips
chips
clearable
multiple
hide-actions
hide-details />
</template>
</v-data-table>
https://codepen.io/codepen123456789/pen/jOKwQKR
You can add some padding to v-select
eg:
<v-select class="pt-1" ...
After wasting like 2 days with this problem i finally decided to post this here and hope someone can help me. I work with "iCheck" (http://icheck.fronteed.com/) but also tried similar libraries that work roughly the same way. I try to achieve fancy checkboxes in form of a button - a pretty common thing i guess.
Now with iCheck and the other libraries i tested i always have one problem: I build my code to send an AjaxRequest to work with the data provided in a form and then reset the form. That works pretty neat, except for these chechboxes. If i change them to the other state they are not initialized with (like from FALSE to TRUE) and reset the form the button visually stays on that state until you click it once again. I works like it should with "normal" checkboxes.
I rebuild a small testpage and put it into jsfiddle. Is this a bug or am i totally overseeing something there? Can someone explain to me why that happens and how to engage with this?
HTML:
<form id="form">
<input type="checkbox" class="check_test" name="test" value="1"><label>Checkbox 1</label>
<input type="checkbox" name="test2" value="1"><label>Checkbox 1</label>
<br/>
<button type="reset" onClick="this.form.reset"> Reset </button>
</form>
Javascript:
$(document).ready(function(){
$('.check_test').each(function(){
var self = $(this),
label = self.next(),
label_text = label.text();
label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line-blue',
radioClass: 'iradio_line-blue',
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
});
https://jsfiddle.net/p80dctkv
Thank you in advance.
You can add js like this to remove checked ichek
$(":radio").prop('checked', false).parent().removeClass('checked');
I'm building out a Nuxt app with Vuetify, and am running into a performance issue using the Vuetify Data Tables.
On page load, I am querying for all of a user's trips. The user can then select one of those trips from a sidebar. The example user I'm testing with has a lot of categories and items contained within the first Trip, and nothing in the second Trip. When I click from the second trip back to the first trip, it takes several seconds to load the items.
From what I can tell, this bottleneck is occurring because I'm rendering a new data table for each Category (which then contains multiple Items). When I looked at the Performance tab of the Vue Devtools, I noticed that even though I am disabling pagination, sorting and filtering for the data tables, all of those events are still being fired. Here's the screenshot:
As you can see, there are upwards of 64 events being fired, most of them are duplicated twice, and events that I thought I'd disabled are still being fired. Here is a simplified version of the code that I am using:
<template>
<v-data-table
v-if="category.items"
:ref="`sortableTable${index}`"
calculate-widths
class="items-table-container"
dense
disable-filtering
disable-pagination
disable-sort
:footer-props="{ disablePagination: true, disableItemsPerPage: true }"
:headers="headers"
hide-default-footer
:items="category.items"
:mobile-breakpoint="0">
<template #body="{ items }">
<draggable
v-bind="dragOptions"
class="dragArea"
group="items"
handle=".drag"
:list="items"
tag="tbody"
#change="log"
#end="drag = false"
#start="drag = true">
<tr
v-for="(item, i) in items"
:key="item.id">
<!-- Drag Handle -->
<td
:key="`${item.id}-drag-${i}-${index}`"
class="px-0 py-1">
<custom-icon
color="#4a4a4a"
custom-class="drag"
:height="20"
name="grip-horizontal-line"
:width="20" />
</td>
<!-- Type Click To Edit -->
<td
:key="`${item.id}-type-${i}-${index}`"
class="px-0 py-1">
<click-to-edit
:style="{ fontSize: '0.875rem' }"
:unique-identifier="`type${item.id}`"
:value="item.generic_type"
#handle-update-item="updateItem($event, item, 'generic_type')" />
</td>
<!-- Other Columns, shortened to simplify -->
...
</tr>
</draggable>
</template>
</v-data-table>
</template>
Currently using Vuetify v.2.4.0.
Why are all of these events still firing? And is there a more efficient way of rendering a dozen or so Data Tables without taking such a huge performance hit?
Well, I sort of fixed it.
I ended up using Vuetify's Lazy Component, so that it's not trying to render all DOM elements at once. This has sped it up I would estimate by 75%, so much better. Not great, but better. Here's how I implanted it:
<template>
<v-row
v-for="(category, index) in trip.categories"
:key="category.id">
<v-lazy
min-height="100"
:options="{ threshold: .25}"
:style="{ width: '100%' }"
transition="fade-transition"
:value="false">
<v-col
cols="12">
<v-data-table
v-if="category.items"
:ref="`sortableTable${index}`"
calculate-widths
class="items-table-container"
dense
disable-filtering
disable-pagination
disable-sort
:footer-props="{ disablePagination: true, disableItemsPerPage: true }"
:headers="headers"
hide-default-footer
:items="category.items"
:mobile-breakpoint="0">
... custom rows
</v-data-table>
</v-vol>
</v-lazy>
</v-row>
</template>
I'm still unsure of why pagination, sorting, and filtering events are being fired even when I'm disabling those via props. I have a feeling it'd speed it up even more, so if anyone knows the answer to that, I would love to hear it!
I am hoping that this is a simple question, and I see that some folks have asked a similar question about bootstrap. I haven't been able to work one of those answers into a solution that works for me, and I think there may be a simpler react-bootstrap answer in any case.
Code example is here: https://codesandbox.io/s/yq5jvl9lz9
Here's what it looks like, when the viewport is wide enough:
Here's more-or-less what I want:
Your help will be greatly appreciated! Thanks, Nat
EDIT 12/22/18: Starting with the information from #Cristian below, I modified the example. I needed display: inline-block in addition to width: 100%. Unfortunately, at larger screen sizes, the "brand" is now mis-aligned with the menu items:
Any other fixes appreciated! I have posted this as a fresh question, so answers can go there (and points for accepted answer!)
I think className='m-auto' at Nav is enough
I had the same question, and this worked for me:
Add className="justify-content-center" to the parent.
Example:
<Navbar className="justify-content-center">
<Navbar.Brand/>
</Navbar>
Maybe it's 1 year late but I had the same problem and couldn't find an answer. I found out that inline css doesn't work for me, so I had to define a custom class which is used for styling.
The solution to your problem would be styling the navbar-brand or any other element by using text-align: center however, this will not work unless you also specify width: 100%. Please access the link I provided to see my approach to the problem.
THIS IS AN EDIT AFTER OP'S LAST EDIT:
I found two approaches to do what you want to achieve. One is not very responsive and I don't recommend.
First approach:
Delete everything in CSS and leave just
.center-navbar {
width:30%;
margin-left: 35%;
}
Second approach:
Delete everything in css and, instead you will be using the layout grid offered by React Bootstrap. Now your code in Index.js will be looking something like that:
import React from "react";
import { render } from "react-dom";
import { Navbar, Nav, NavItem, NavDropdown, Glyphicon, Grid, Row, Col } from "react-bootstrap";
import "./index.css";
const App = () => (
<div>
<Grid>
<Row className="show-grid">
<Col xs={4} md={4}>
</Col>
<Col xs={4} md={4}>
<div>
<Navbar collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>Logo</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey="a" href="#">
Link1
</NavItem>
<NavItem eventKey="b" href="#">
Link2
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
</Col>
</Row>
</Grid>
<h2 style={{ textAlign: "center" }}>This is some text</h2>
</div>
);
render(<App />, document.getElementById("root"));
There is a problem however. I recommend you to study W3C (World Wide Web consortium) and understand why it's not recommended to place Logo in the middle of the screen. If you look on most websites (Stackoverflow, Amazon, eBay, the list goes on), they don't use the logo in the middle, and instead on the left. It's a standard so that's why there is no much recommendation for that. I do not recommend to use the solution I offered unless that's exactly your only way to accomplish what you want to achieve.
Here is another solution, you can use the Container from react-bootstrap around your navbar. It will align your navbar with the main section. On a screen, with a higher width, it will look much better! I hope it helps!
Putting the Navbar content in a <Container> worked for me, see snip.
Using bootstrap v4.6, react v17 and react-bootstap v1.5
"bootstrap": "^4.6.0",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2"
Snip from Navigation.js, see <Container> below:
render() {
return (
<Navbar collapseOnSelect expand="sm" fixed="top"
className="bg-light justify-content-between">
<Container>
<LinkContainer to="/">
<Navbar.Brand>
<img src={my_image} alt='my alt text' className='profile-header'/>
</Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<LinkContainer to="/">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/about">
<Nav.Link>About</Nav.Link>
</LinkContainer>
<LinkContainer to="/something" activeClassName='selectedMenuItem'>
<Nav.Link>Something</Nav.Link>
</LinkContainer>
<Navbar.Text>
<Title/>
</Navbar.Text>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
I just saw the problem that you have. I had the same issue. I just took the normal navbar from react-bootstrap, and switched the navbar brand with my logo. I added, using styled-components
margin-right: 35vw;
to the style of the logo. So it pushed all the links to the middle of the page. The code for the navbar you can find under https://react-bootstrap.github.io/components/navbar/.
I hope it helps you.
I am trying to implement a list where I should pick an item from it, I am trying to use a ListPicker:
<StackLayout verticalAlignment="top">
<ListPicker id="inquiryType" items="{{ inquiryTypeItems }}" />
</StackLayout>
Is there any way to make the ListPicker modal, and show it by clicking on a readonly TextField?
I am using Javascript on Nativescript.
Thanks!
Put ListPicker to modal dialog wont be good idea as u need to create platform dependend creating and processing that picker
So first approach would be dialogs actions and on tap open dialog with options,
array of options, only strings
http://docs.nativescript.org/cookbook/ui/dialogs#action
Example (taken from link above if it happens it wont work for u and little rewrited for your case):
var options = {
title: "Inquiry Type",
message: "Choose inquiry type",
cancelButtonText: "Cancel",
actions: inquiryTypeItems
};
dialogs.action(options).then((result) => {
console.log(result);
});
or as second approach,
U can set ListPicker as hidden on load of page after tapping on something(definitely not TextField, as u can get problem with showing keyboard, either Label or Button) show ListPicker with animation or visibility property and on change or maybe on Done button which would be together with ListPicker it would let people to choose from list of items :)
If u have other data together with other properties better for second approach but if u have some simple array of strings u can use first one
I am not sure how you would do this in plain NativeScript, however, if you are using Angular2, then you can use an angular modal and then nest the nativescript ListPicker inside that.
So the README of the Angular2 Modal Project describes creating ui agnostic modals very thoroughly. Then in its content, you would do something like:
<div class="container-fluid custom-modal-container">
<div class="row custom-modal-header">
<div class="col-sm-12">
<h1>A Custom modal design</h1>
</div>
</div>
<div class="row" [ngClass]="{'myclass' : shouldUseMyClass}">
<div class="col-xs-12">
<div class="jumbotron">
<h1>Pick Something:</h1>
<ListPicker id="inquiryType" items="{{ inquiryTypeItems }}" />
</div>
</div>
</div>
</div>`
Here shows how the components might fit together.
You can see the issue which track supporting this in NativeScript.