With both v-select multiple and combobox, my chexboxes are showing up as huge but are otherwise functioning... how can I fix this? I'm running vuetify#1.5.18, vue-cli 3.4.1 , and vue 2.5.16
I have tried moving the v-select multiple and combobox outside of all my own classes to confirm that it's not the fault of my own formatting, I've also applied and the link with no effect
Inspection of checkbox element shows font-size:24px has been overriden, I need to reverse that override somehow.
I inspected the checkbox element in my program vs. the Vuetify documentation element, and here is the discrepancy:
In the above picture from Vuetify documentation, the .v-list-item_action min-width is 24px, but in my program the min-width is 56px:
How can I adjust the min-width manually?
<v-select
v-model="metadata[index].savedValue"
:items="metadata[index].options"
color="orange"
multiple
outline
></v-select>
Related
I have a Nuxt 2.9.0 app where I'm using #nuxtjs/vuetify 1.11.3.
I'm refactoring some HTML tables that we have in the app and replacing them with Vuetify's v-data-table components. Now, in our old tables we had these bar chart components that we would render inside the table cells, like this:
<th>
{{ totalAvg }}
<RatingBar :color="ratingColor(totalAvg)" />
</th>
That RatingBar component is basically just an empty div with a background color, as you can see below
What's the proper way in which I can keep this functionality when moving onto the Vuetify data tables?
I know that Vuetify implements some slots, for example the #header slot, but I'm not sure exactly how the slots work when it comes to table cells, since the #header slot, for example, seems to just append whatever <template> you write down for the slot, instead of actually replacing the header
Vuetify's v-data-table supports custom rendering for a specific column thru #item.<name>. Link to API doc.
The v-btn (vuetify) component is displayed differently if it has the "nuxt" attribute (to be used as a in the nuxt.js framework).
How to fix it?
The first image is the v-btn component without the "nuxt" (as it should display normally) and the second has the attribute.
<v-btn
class="enter-btn"
large
color="error"
:disabled="!agreed"
>
Accept and Enter
</v-btn>
<v-btn
class="enter-btn"
large
color="error"
:disabled="!agreed"
nuxt
to="/to/url"
>
Accept and Enter
</v-btn>
When the nuxt and to attributes are added, the element changes from <button ...> to <a href="/to/url" ... >.
Unfortunately adding the two code samples to a fresh project does not show the visual difference you have.
The <a> has an additional class v-btn--router, but it doesn't cause the width difference or text alignment issues.
You can debug a little by inspecting each element in the console, looking at the Styles pane and checking for any sources of style (on the RHS) other than Vuetify ones, which are VBtn.sass & VApp.sass.
Since width is one of the problem attributes, it is also worth while checking the width value in the Computed tab.
If it is being set directly by something, you can click it open to see the source of it's value (for example, height is set to 44px by classes .v-btn:not(.v-btn--round).v-size--large in the file VBtn.sass).
I’m using Vue & Vuetify to create my app. With vuetify I’m using v-expansion-panels to create an accordion style display. Each v-expansion-panel itself contains a custom component.
I have noticed these components are not created until the expansion panel is clicked for the first time. After that, using keep-alive allows all reactive properties and methods of the child component to be active (this is my desired behavior).
How can I force the child components to be created when the parent is created? This, any method triggered in the created() lifecycle hook of a child component should fire when the parent is created.
This Codepen is an example of the current behavior. Note: be sure to look at the console when you click the panel.
If you think about it, it actually makes sense to lazy load content of expansion panels since it is useless work if the user never opens them anyway. So probably the thing you try to accomplish has some better approach, but if you still like it then my advice is to find a way of programatically opening / closing the panel (as seen here) and quickly open it and close it when rendering parent component. In this way, you will have your child component created and the UI will remain the same.
A Vuetify solution should be achievable by adding the eager prop to a v-expansion-panel-content element in the Expansion Panel. This should force any components or content contained within the v-expansion-panel-content element to render on mounted.
<v-expansion-panels v-model="panels">
<v-expansion-panel>
<v-expansion-panel-content eager>
<custom-component />
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
So a standard html attribute is one with the attribute name on the left and the value in quotes on the right. (class="buttons")
To change something on an element in Ionic the syntax is value name only, no quotes.
However I've noticed that sometimes that value is called a directive, other times a property and other times an attribute. What's the difference?
Here are examples of each from the docs :
buttons use a standard element, but are enhanced with an ion-button directive.
<button ion-button>Button</button>
The color property sets the color of the button. Ionic includes a number of default colors which can be easily overridden:
<button ion-button **color="light"** >Light</button>
// what I consider an attribute is being called a property here.
To use the outline style for a button, just add the outline property:
<button ion-button color="light" **outline** >Light Outline</button> //outline is called a property as well.
Add the large attribute to make a button larger, or small to make it smaller:
<button ion-button **large** >Large</button>
//large is being called an attribute here. Why not call it a property or a directive?
Does any of it make a difference or no?
Button is one of Angular components which Ionic is largely consist of. So to get it short:
ion-button is a component which is build upon [ion-button] selector as you can find it here in source
color, outline, large are the inputs of ion-button component as you can also see in source
From the DOM point of view all of these are attributes. Although if you really need to have an exact [attribute] to be compiled by Angular you've got to use [attr.attribute] binding which is not the same for directives/component and its inputs. Inputs are the properties of directives/components at the same time.
I'm building a google-style text box that auto-completes typed text.
Using typeahead with typeahead.js-bootstrap.css:
$(document).ready(function() {
$('#op1').typeahead({
remote: '/search/%QUERY',
});
});
<input type="text" id="op1">
it worked but there are two problems:
I could not customize it. Whenever I make any significant style changes, or use bootstrap's form-control class for input element: the text box gets completely messed up.
The auto-completed ("hint") text was written above the typed text so I whatever color I set for the hint was the color of the entire text! I tried giving the hint a negative z-order but then it was not displayed at all.
I've tried Typeahead AND Select2 auto-completion libraries with my Bootstrap 3 template, and so far the only thing I was able to work out-of-the-box without completely ruining the layout was the above code
If anyone can solve these problems, or otherwise recommend a full CSS + JS typeahead solution for Bootstrap3, I'd be grateful :)
It gives you completely easy way to customise the look with formatresults. You can even write full html view for your results. and to customise the look of input box apply a class to the wrapper for your search box and override select2 rendered css(load the page and check from browser that from where that style is coming).
http://ivaynberg.github.io/select2/
I made a full featured customised search with this.
There is now a fork available for select2 that supports Bootstrap 3.
http://fk.github.io/select2-bootstrap-css/
https://github.com/fk/select2-bootstrap-css#readme