I've been looking for a way to prevent v-navigation-drawer from shortening texts by itself on Vuetify. When I fill some spaces with text in the v-navigation-drawer, the text goes like "gobbled...". I mean, I want the tags inside to smoothly text such as "gobbledygook". How can I achieve this? I hope the image below helps you what's the problem exactly is.
Problem: I don't want v-navigation-drawer to shorten the texts inside of itself.
Edit: The code goes like:
<v-navigation-drawer
dark
color="#fff"
width="160"
v-model="is_drawer"
v-if="$vuetify.breakpoint.smAndDown">
// many <v-list-item> and <v-list-group> inside here
// and shrinking-text problem occurs on v-list-item-title
</v-navigation-drawer>
The issue is in the list title item title, to fix this add the following CSS rules :
.v-list-item__subtitle, .v-list-item__title{
text-overflow: initial!important;
white-space: initial!important;
}
The list item text is automatically truncated when the length of text is too long. Although there is no built-in method to disable text truncation, it can be disabled by using the class d-flex on v-list-item-title, since text truncation requires display block.
To allow long text to wrap, there is another helper class text-wrap.
See this codesandbox with all options in action: https://codesandbox.io/s/hungry-voice-bbxtg?file=/src/components/HelloWorld.vue
Related
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 trying to style a Buefy button to look like a simple text-link.
For example, it is possible to use:
<b-button
tag="a"
type="is-text"
href="https://www.example.com"
>
Click here
</b-button>
This produces near the result I'm looking for, except I want to achieve a type such as is-text-red and is-text-blue to make the button appear as text of particular colours.
I could solve this by simply using:
Click here
Click here
But I want to use <b-button type="is-text-red"> to make an inline link.
Can anyone point me in a direction that involves Bulma CSS and/or Buefy CSS modifications that would achieve this?
I'm looking at the node_modules BButton component, and it looks like the type prop is passed through, so it looks possible to create a custom type somewhere that would be analogous to is-info and is-warning.
I would like to have text-only versions such as is-text-info and is-text-warning so I can use the button component to place inline anchor tags.
Stated concisely, how does a person add another type to <b-button> that provides arbitrary styling?
Check this link(https://buefy.org/documentation/customization/). You might need to define your own css overrides.
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
So.. I have a dynamic width page. Below, the wrapper div centers the divs inside of it. However, each div has a style of:
display:inline-block;
width:400px; /* static */
This makes the inside divs, side by side. But that means that there is some whitespace left over depending on the width of the browser and how many divs can go side by side without breaking to the next line.
To get an idea of what I am going for, open up your Google Chrome New Tab page and drag your browser window to make it smaller. You will see that when you go too far, some of the chrome apps bump to the next line BUT it still stays centered.
In my case, they bump to the next line and become not centered.
This is what my code looks like:
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
I want the inside divs to be side by side unless there is not enough room in which case the end one will bump to the next line down, ALL while staying centered in the parent div.
Thanks for any help.
If I understood you correctly adding text-align: center to your .wrapper styles should give the desired effect. See this fiddle for an example. Resize the result panel to watch the reordering of the boxes.
Like Akaishen already mentioned inline-blocks flow like text. That's why you can control their alignment with text-align. However if you want very fine control over your layout you might run into problems using inline-blocks. Since they flow like text whitespace between them is not ignored for instance. And unfortunately you can't really determine the absolute width of a space across browsers and OSs. The gaps between blocks in my example are caused by this.
As you are using the display: inline-block the <div> tags are essentially inline elements and can be styled as such. text-align: center would center each element. At this point, you need a container / wrapper to define the maximum and minimum widths.
There could be a better way to achieve what you are looking for, and this is not exactly like how the Chrome windows work, though it's a start: fiddle