i understand v-cloak is used to display nothing when a new page is loaded.
in my rails app, when i try to switch page (i am using vue component in Rails View), there is a short glimpse of Vuejs codes displaying curly braces before another new page is load. i am entirely baffled and not sure if this is turbolink related as there is no error message found in browser console, or in the rails git logs.
this short glimpse of Vuejs displaying curly braces before another page is loaded, is really annoying, can anyone help on this?
v-cloak is used to do this.
official API：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
tips: written [v-cloak] in #import loaded css file can't work for this problem.
another way: around target tags.
Apart from using [v-cloak] which is a generic way of completely hiding an element until Vue inits, two more usable "tools" are v-text and v-html directives, coupled with computed properties delivering the strings the above directives expect from more complex logic.
Not only do they hide the content until init time, but they can also serve as selectors for the unparsed template elements, as they get removed from the element once Vue parses it. So you could apply backgrounds, width, min-heightto those elements, without the need to spiff your layout with preload classes and remove them on mounted().
An important note here is that transitions won't work on those elements, because Vue purposefully rebuilds the entire DOM of the template once it mounts. If it didn't, enter animations wouldn't work as expected. So there can be no transition from h2[v-text] to h2, because the element is completely replaced. But you can take that into account and start your enter transition from how the [v-text] element was styled.
It's probably not the solution you're looking for (it's more designer's work than programmer's, really) and it's definitely not a magical one liner: it has to be solved on a page by page basis.
But this is how pre-loaders are done (the technique is the same in any modern FE framework, it's just that sometimes you need to spiff your markup with preload classes and remove them on mounted, ngAfterViewInit or componentDidMount).
To be able to style this at your own pace, simply disable JavaScript (or don't init Vue, if you prefer) so you set every detail right. But don't overdo it.
Here's a basic example showing you don't need a whole lot of detail to get a decent effect. It's a matter of roughly matching element heights and coding in some striped CSS backgrounds, really (throw in a blur filter, if you want to get really fancy):
Vue.config.productionTip = false;
Vue.config.devtools = false;
setTimeout(() => {
new Vue({
el: '#app',
data: () => ({
Message: 'Message',
Description: `<p>I'm baby tousled echo park pabst polaroid synth marfa. Migas small batch paleo pop-up street art, chia sriracha cronut ramps succulents portland. YOLO normcore taiyaki organic. Green juice helvetica single-origin coffee polaroid swag selvage schlitz. Artisan la croix unicorn cardigan meh everyday carry wolf thundercats.
<p>Iceland hoodie vice, chicharrones gentrify dreamcatcher ethical jianbing blog truffaut pinterest VHS flannel selfies bushwick. Flannel activated charcoal bespoke master cleanse, chambray tumblr four loko helvetica chicharrones ugh aesthetic irony godard. Beard farm-to-table mumblecore wolf typewriter try-hard shoreditch church-key scenester tousled letterpress yuccie bitters. Selfies +1 man bun, jianbing hell of tote bag crucifix flexitarian. Cronut mumblecore knausgaard meditation authentic lumbersexual listicle pok pok coloring book pitchfork gentrify. +1 offal cronut, flexitarian glossier shoreditch biodiesel stumptown tumeric seitan polaroid.
<p>Narwhal williamsburg adaptogen, four dollar toast retro chillwave occupy kombucha YOLO marfa franzen kogi biodiesel street art next level. Viral blog taxidermy twee echo park roof party. Hammock street art tumeric selvage sartorial. Paleo hashtag activated charcoal, heirloom quinoa cred blog ethical.`
})
})
}, 1000)
#app h2[v-text] {
width: 200px;
background-color: #f8f8f8;
height: 1em;
}
#app div[v-html] {
min-height: 250px;
background-image: repeating-linear-gradient(
180deg,
#fff,
#fff 10px,
#f5f5f5 10px,
#f5f5f5 20px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2 v-text="Message"></h2>
<div v-html="Description"></div>
</div>
When applying this technique, do not use images, as they require loading as well. Work with CSS only and make sure that CSS is available in <header> (or at least before the app element). Last, but not least, keep in mind your preload has to match your app at all screen widths.
The problem is rather simple, see the template below:
<material-tab-panel>
<material-tab label="test">
<material-expansionpanel-set>
<material-expansionpanel name="panel 1">
Test 1
</material-expansionpanel>
<material-expansionpanel name="panel 2">
Test 2
</material-expansionpanel>
</material-expansionpanel-set>
</material-tab>
</material-tab-panel>
The Dartium browser renders nothing. If I remove the surrounding material-tab-panel and material-tab the expansion-panels are rendered with the expected accordion behavior. In reverse without the expensionpanel-set the tab is rendered correctly. It seems that the combination causes the problem.
Compiling to JavaScript does not change this outcome.
This has been fixed in v0.4.0-alpha of the components.
See here https://github.com/dart-lang/angular2_components/releases/tag/v0.4.0-alpha
We hope to have this as a "gold" (non-alpha) release soon!
I am trying to debug a crashing application in Microsoft Edge, but it gives the friendly error page:
This page is having a problem loading
We tried to load this page for you a few times, but there is still a problem with this site. We know you have better things to do than to watch this page reload over and over again so try coming back to this page later.
In internet explorer there is a way to turn off the friendly error messages. Is this also possible in Microsoft Edge? I'd like to know on which line of code the problem occurs.
It seems there are none at the moment. You can use the F12 developer tools for debugging though. The friendly page includes the actual HTTP response code so you can have an idea. Also, if you require more details you can check the full details on the request/response using the F12 Network tool to get the data the server is responding with.
You are probably affected by this unclosed bug.
No easy way to fix it right now, the not friendly error message will probably not help much (as you are not getting a server side HTTP error, is just the browser that raise an error and truncate the communication).
On the other hand the developer tool will not help also: Edge "smartly" close automatically it when the error happens and if you reopen the history is empty (no way to keep it, tried all of the buttons).
I have this issue on a site I'm developing but I'm not able to understand what's happen.
EDIT - after a long time I fixed this issue in my environment. Unluckily I'm pretty sure this will not help too much other devs because the bug seems to happen for a lot of different reason, but still... that's my usecase.
What was freezing my site was a combination of CSS media-queries (follow the less used):
#media (min-width:calc(#screen-mobile-size + 1px)) {
.hero_mobile {
display: none;
}
.hero_desktop {
display: inline;
}
}
...and few lines below...
#media (max-width: #screen-mobile-size) {
height: auto;
max-height: 600px;
.hero_mobile {
display: inline;
}
.hero_desktop {
display: none;
}
}
I tested a lot of combination but there's only one rule: I can't provide both media queries, it doesn't matter what there's inside them! It simply break the browser.
In my case the fix was quite easy: just preventing the first CSS rule to be embedded inside a media query, so...
.hero_mobile {
display: none;
}
.hero_desktop {
display: inline;
}
// ...
#media (max-width: #screen-mobile-size) {
height: auto;
max-height: 600px;
.hero_mobile {
display: inline;
}
.hero_desktop {
display: none;
}
}
When you see that, try hitting F12 and in debugger tab, setting break-on-all-errors. When you refresh, the last one it breaks on before the page reloads for some odd reason and triggers that error page, is likely the thing triggering some obscure bug.
You will likely find that Edge doesn't handle jQuery("someselector:visible") and refreshes, yet it does work with jQuery("someselector").filter(":visible"), but that's likely just an obscure bug in old jQuery 1.x.
I am developing an app with jquery-mobile. (yes, and app, it'll run within cordova(aka phone gap))
On the nexus 7 (the target device for the app), The font displays for many things are way too small. I can barely read it and I'm young. Many of the users of this app will have poor eyesight.
Is there any simple way to change the font-size with jquery-mobile?
When I try to add entries in a custom css file, there are unexpected results (Formatting goes out, etc) I have also tried theme-roller, but that only allows you to change the font-family, not the font-size.
eg:
body p {
font-size: 1.5em;
}
Even just a general explanation about how to write a css file for jquery-mobile would be very helpful.
OK, I've worked it out.
In the jquery-mobile-1.2.0.css file is the styling for query-mobile. You modify this stuff.
There's some cryptic info on the jquery-mobile website that will make sense once you've read this.
So, to change the font-size for within all you go to the jquery-mobile-1.2.0.css file and add:
.ui-li p {
font-size: 1.5em;
}
It seams that most of the jquery-mobile elements have .ui- in from of their normal html tags. They have a special class or something. (If anyone wants to elaborate on this it'd be great.)
Setting global <body>'s font-size should be enough:
body {
font-size: 15px; // You can even use !important
}
Safari on iPhone automatically creates links for strings of digits that appear to the telephone numbers. I am writing a web page containing an IP address, and Safari is turning that into a phone number link. Is it possible to disable this behavior for a whole page or an element on a page?
This seems to be the right thing to do, according to the Safari HTML Reference:
<meta name="format-detection" content="telephone=no">
If you disable this but still want telephone links, you can still use the "tel" URI scheme.
Here is the relevant page at Apple's Developer Library.
I use a zero-width joiner
Just put that somewhere in the phone number and it works for me. Tested in BrowserStack (and Litmus for emails).
To disable the phone parsing appearance for specific elements, this CSS seems to do the trick:
.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }
The first rule disables the click, the second takes care of the styling.
Add this, I think it is what you're looking for:
<meta name = "format-detection" content = "telephone=no">
I was having the same problem. I found a property on the UIWebView that allows you to turn off the data detectors.
self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
Solution for Webview!
For PhoneGap-iPhone / PhoneGap-iOS applications, you can disable telephone number detection by adding the following to your project’s application delegate:
// ...
- (void)webViewDidStartLoad:(UIWebView *)theWebView
{
// disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;
return [ super webViewDidStartLoad:theWebView ];
}
// ...
source: Disable Telephone Detection in PhoneGap-iOS.
To disable phone number detection on part of a page, wrap the affected text in an anchor tag with href="#". If you do this, mobile Safari and UIWebView should leave it alone.
1234567
You can also use the <a> label with javascript: void(0) as href value. Example as follow:+44 456 77 89 87
Think I've found a solution: put the number inside a <label> element. Haven't tried any other tags, but <div> left it active on the home screen, even with the telephone=no attribute.
It seems obvious from earlier comments that the meta tag did work, but for some reason has broken under the later versions of iOS, at least under some conditions. I am running 4.0.1.
My experience is the same as some others mentioned. The meta tag...
<meta name = "format-detection" content = "telephone=no">
...works when the website is running in Mobile Safari (i.e., with chrome) but stops working when run as a webapp (i.e., is saved to home screen and runs without chrome).
My less-than-ideal solution is to insert the values into input fields...
<input type="text" readonly="readonly" style="border:none;" value="3105551212">
It's less than ideal because, despite the border being set to none, iOS renders a multi-pixel gray bar above the field. But, it's better than seeing the number as a link.
I had an ABN (Australian Business Number) that iPad Safari insisted on turning into a phone number link. None of the suggestions helped. My solution was to put img tags between the numbers.
ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709
The class exists only to document what the img tags are for.
Works on iPad 1 (4.3.1) and iPad 2 (4.3.3).
I have tested this myself and found that it works although it is certainly not an elegant solution. Inserting an empty span in the phone number will prevent the data detectors from turning it into a link.
(604) 555<span></span> -4321
I had the same problem, but on an iPad web app.
Unfortunately, neither...
<meta name = "format-detection" content = "telephone=no">
nor ...
0 = 0
9 = 9
... worked.
But, here's three ugly hacks:
replacing the number "0" with the letter "O"
replacing the number "1" with the letter "l"
insert a meaningless span: e.g., 555.5<span>5</span>5.5555
Depending on the font you use, the first two are barely noticeable. The latter obviously involves superfluous code, but is invisible to the user.
Kludgy hacks for sure, and probably not viable if you're generating your code dynamically from data, or if you can't pollute your data this way.
But, sufficient in a pinch.
A trick I use that works on more than just Mobile Safari is to use HTML escape codes and a little mark-up in the phone number. This makes it more difficult for the browser to "identify" a phone number, i.e.
Phone: 1-800<span>-</span>620<span>-</span>3803
Why would you want to remove the linking, it makes it very user friendly to have th eoption.
If you simply want to remove the auto editing, but keep the link working just add this into your CSS...
a[href^=tel] {
color: inherit;
text-decoration:inherit;
}
<meta name = "format-detection" content = "telephone=no"> does not work for emails: if the HTML you are preparing is for an email, the metatag will be ignored.
If what you are targeting are emails, here's yet another ugly-but-works solution for ya'll:
Example of some HTML you want to avoid being linked or auto formatted:
will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.
And the CSS that will make the magic happen:
#media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}
The drawback: you may need a media query for each of the ipad/iphone portrait/landscape combos
You could try encoding them as HTML entities:
0 = 0
9 = 9
Same problem in Sencha Touch app solved with meta tag (<meta name="format-detection" content="telephone=no">) in index.html of app.
This answer trumps everything as of 6-13-2012:
<a href="#" style="color: #666666;
text-decoration: none;
pointer-events: none;">
Boca Raton, FL 33487
</a>
Change the color to whatever matches your text, text decoration removes the underline, pointer events stops it from being viewed like a link in a browser (pointer doesn't change to a hand)
This is perfect for HTML emails on ios and browser.
I too have this problem: Safari and other mobile browsers transform the VAT IDs into phone numbers. So I want a clean method to avoid it on a single element, not the whole page (or site).
I'm sharing a possible solution I found, it is suboptimal but still it is pretty viable: I put, inside the number I don't want to become a tel: link, the HTML entity which is the Word-Joiner invisible character. I tried to stay more semantic (well, at least a sort of) by putting this char in some meaning spot, e.g. for the VAT ID I chose to put it between the different groups of digit according to its format so for an Italian VAT I wrote: 06136050488 which renders in 06136050488 and it is not transformed in a telephone number.
Another option is to replace the hyphens in your phone number by the character ‑ (U+2011 'Unicode Non-Breaking Hyphen')
I was really confused by this for a while but finally figured it out. We made updates to our site and had some numbers converting to a link and some weren't. Turns out that numbers won't be converted to a link if they're in a <fieldset>. Obviously not the right solution for most circumstances, but in some it will be the right one.
Break the number down into separate blocks of text
301 <div style="display:inline-block">441</div> 3909
Adding the meta tag to turn off format detection did not work for me. I was trying to display a zoom meeting ID in a <p> tag along with other text and iOS was turning that ID into a tel link. Additionally, I was targeting tel links via a[href^="tel:"] in order to give them custom styling so disabling the styles on tel links was not an option.
The solution I found was to wrap the ID number in a <code> tag. This seems to prevent iOS from messing with it.