When trying to use Emmet to do any style settings in an html file, instead of using the autocomplete, it creates a new tab, e.g., if I have the following
<div>
and I want to add a margin of 10px, I add
<div style="m10
then press tab and instead of
<div style="margin:10px;">
I get
<div style="<m10></m10>"
Most of the other Emmet functions, creating lists, div with class, work fine. I'm using Brackets 0.42 and have tried uninstalling and reinstalling Emmet. Any suggestions?
Based on the Cheat Sheet here you can't do that.
The html file only parse emmet magic code like ul>li*4.. or building tags like div [TAB] -> <div></div>
In css as you know you can use m10 [TAB] to get margin: 10px;.
(Styling inline in html isn't a good approach if you can avoid it)
EDIT: What you can actually do to keep your workflow is:
type div [TAB] -> <div></div>
click in the open or closing div
press CTRL+E (Quick Edit) and define a new style in your css file for this specific div. Emmet works in the Quick Edit window as intended.
This is the best valid way.
Related
When using Emmet with VS Code, there are multiple tab stops. So the simple "a" for an anchor element allows me to tab from the href attribute to the content within the a tag. Convenient.
That doesn't seem to work in CodePen. Just wondering if I'm missing something ?
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
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.
In a velocity template I want to display a link which should not allow double click. Currently I am able to display the hyperlink but on double click, two separate windows are opening. I need to open single window even if I click multiple time on hyperlink.
Velocity is just for rendering any text you provide to it as-is, it does not care about what language you are using the Velocity Template engine to render. It could be HTML or any other language.
This problem is particularly related with HTML. You could use css styles to make your link unclickable.
Example:
<a href="http://www.google.com" style="pointer-events: none; cursor: default;" >link text</a>
note the style attribute in the anchor tag above.
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