I'm pretty new to Vue/Vuetify, I've tried using the vuetify v-text-field tag with outline prop.
Why the label is like in the image?
Also the font seems not to be the Vuetify one.
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>test</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Wrap your App.vue in <v-app>. Among other things, it wraps the app in the v-application class which a lot of styles use as part of their selector. From the docs:
The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify’s components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be rendered within your application ONCE.
Related
While trying to use Twilio TaskRouter JS SDK on Vue JS, that you have load through CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://sdk.twilio.com/js/taskrouter/v1.21/taskrouter.min.js" integrity="sha384-5fq+0qjayReAreRyHy38VpD3Gr9R2OYIzonwIkoGI4M9dhfKW6RWeRnZjfwSrpN8" crossorigin="anonymous"></script>
</body>
</html>
I want to init my worker like this:
export const initWorker = (token) => {
return new Twilio.TaskRouter.Worker(token);
}
but it's giving me this error: 'Twilio' is not defined. but it's actually working and returning the Worker object. is there way to ignore or to say Vue js that I'm expecting Twilio?
Found a fix, you have to tell eslint that you'll have this as global, there are two ways to go:
add this before your variable call:
/* global Twilio */
or edit your eslint config:
'globals': {
'Twilio': 'readable'
},
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Vue Router Practice</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-todo doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
This is the code of my index.html file in the public folder.
There is also an icon file named favicon.ico.
But when I run my dev server, the favicon is not showed.
Please help me.
I have tried to change
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
to
<link rel="icon" href="/favicon.ico">
but it's not working either.
and when i type localhost:8080/favicon.ico, it is showing my favicon.
Also, there are correct HTML tags when I debug on chrome dev tool.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Vue Router Practice</title>
</head>
Expected result: favicon should be shown.
I have a same problem.. but I success to fix this, when I switch the double quote to simple quote in the attribute rel, but I don't know why..
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
replace with:
<link rel='icon' href="<%= BASE_URL %>favicon.ico">
If you're using PWA, check your public/img/icons folder too. And make sure that your favicon-16x16.png and favicon-32x32.png files are not the default ones.
And also best way to force cache is to hit the favicon address directly
http://yourwebsite.com/favicon.ico
and press control+f5 for windows/linux or shift+command+R for Mac. You will see it changes. Then navigate back to your webpage and it will be refreshed.
I had this issue and it seemed that Chrome was caching the favicon (was working on multiple projects at once).
So a clear of the cache and closing the browser tab and restart is what worked for me
In my case, I had also created the project as a PWA, hence I also needed to change all the relevant icons
I also had this issue on a PWA project but clearing my cache fixed it.
I want to build vue-cli 3 to my computer. I've created my first folder with vue-cli control panel than I faced with a blank page. In my index.html, I've discovered <strong>We're sorry but vue-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> error. How to fix that and create a working properly folder instead?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-test</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
I am trying to style some distributed children in Polymer 2.0. I can't seem to get it working following the docs.
https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom
I could do this in Polymer 1.x using
<style is="custom-style">
paper-tabs ::content .tab-content {
background:red;
}
</style>
Here's my Polymer 2.0 setup trying to change the style of paper-tabs .tab-content
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/polymer/lib/elements/custom-style.html">
</head>
<body>
<custom-style>
<style>
paper-tabs .tab-content {
background:red;
}
</style>
</custom-style>
<paper-tabs selected="0" scrollable>
<paper-tab>The first tab</paper-tab>
<paper-tab>Tab two</paper-tab>
<paper-tab>The third tab</paper-tab>
<paper-tab>Fourth tab</paper-tab>
</paper-tabs>
</body>
</html>
If you are trying to just change the background color of the tabs, just do:
paper-tabs {
background:red;
}
If you want to style the tab content, there are some paper-tab styling's:
--paper-tab-content -- Mixin applied to the tab content
--paper-tab-content-unselected -- Mixin applied to the tab content when the tab is not selected
Taken from: https://www.webcomponents.org/element/PolymerElements/paper-tabs/elements/paper-tab
It doesn't look like its possible to target .tab-content specifically.
To start with, ::content is replaced with ::slotted but that still doesn't work in this example.
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#stylinglightdom
You can use the exposed mixin as RivG also mentioned.
--paper-tab-content
There is a page, http://www.getbootstrap.sk/customize/index.html, but after you finish and compile and download the completed zip file - NOWHERE is anything giving even a clue as what to do with the darn files. ( I just installed the standard package though bower ).
SO what am I supposed to do with the downloaded customize files?
ALl I'm really trying to do is to stop my navbar items from disappearing when the width falls below 768px - I don't want them ever to disappear.
Bootstrap. How to make the navbar never collapsed
In the Grid system set the field #grid-float-breakpoint value of 0.
Click the Compile and Download button at the bottom of the page.
Extract the files bootstrap.css and bootstrap.min.css from the resulting archive.
Use them instead of the standard files bootstrap.css and bootstrap.min.css on your site.
you don't need to download the library. You can use online libraries.
For example:
<!DOCTYPE html="en">
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Course</title>
<!-- Normalize -->
<link rel="stylesheet" href="https://yui.yahooapis.com/3.18.1/build/cssnormalize/cssnormalize.css" type="text/css">
<!-- CSS BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- YOUR OWN CSS LIBRARY -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- JQUERY If you need it -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- JS BOOTSTRAP -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- YOUR OWN JS LIBRARY -->
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
....
</body>
</html>
However, if you want to download the library, you just have to move the bootstrap.min.css and bootstrap.min.js to the folders where you keep your CSS and your JS files, and reference them in the header of your web page.
For example:
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
...
</head>
UPDATE:
Based on Bootstrap's documentation, I suggest that, in order to avoid collapsing of the navbar, delete the class navbar-collapse from any element of your navigation bar.
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse. The responsive navbar requires the collapse plug-in to be included in your version of Bootstrap.
Additionally, you have to delete the button that is shown every time the navbar collapses.
Something like jsfiddle
I will need to see your source code to help you in a better way. Meanwhile, I hope this help you.