I was following the Browser section of official documentation https://bootstrap-vue.org/docs, however the BootstrapVue components just didn't render as expected.
html file as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webapp</title>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.6.0/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
<div>
<h2>Example heading <b-badge>New</b-badge></h2>
</div>
</body>
</html>
What I see is 1
Instead of 2
What should be fixed to get the components rendered properly?
The issue is resolved, I have to add below code somewhere(e.g. main.js):
new Vue(...).$mount("#div_where_vue_should_render")
Related
In local dev, everything is great because my Tailwind CSS is taking priority on styling my icons:
However, once I've deployed my app (Vite on Vercel), for some reason the Material Icons style takes priority:
This is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Come on now!</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Roboto:400,700', 'Material+Icons']
}
});
</script>
</body>
</html>
I think I could probably apply !important to my Tailwind config but that's clearly not the right answer.
I use The Elm Architecture and my view-function is simply div [] [...].
How to alter the view-function (or other functions) such that the favicon-link tag <link rel="favicon" type="image/ico" href="favicon.ico" /> (or similar) gets generated into the index.html document?
You can compile elm src into javascript and load it from html.
when building:
elm-make src/Main.elm --output elm.js
index.html:
<html>
<head>
<link rel="favicon" type="image/ico" href="favicon.ico" />
<script src="elm.js"></script>
</head>
<body>
<script>
var app = Elm.Main.fullscreen()
</script>
</body>
</html>
How to add a notification under an input when focused ?
Like this:
(source: cjoint.com)
Is there any bootstrap plugins for this ?
Thanks,
Vincent.
There is a bootstrap plugin for it. have a look at it
<!DOCTYPE html>
<html lang="en">
<head>
<title>Notification in text nox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<input type ="text" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Have a good day!!
Till now I am developed an app with jquery mobile in phonegap.
It has multiple views/pages.
how to load multiple pages using jQuery mobile
The following snippets show how you can load different page:
Go to Page2 <!-- for page2 in same html -->
Go to Page2 <!-- redirect to different html -->
or
$.mobile.changePage("#page2"); // for page2 in same html
$.mobile.changePage("page2.html"); // to go to different html file
I have a sample Android Phonegap application in Github which contains two html files with two pages and shows connects them together.
Although it is using Android but the /www file structure will remain same for iOS XCode project also. So you can copy the folder and run it same in xcode. I have tested the setup on XCode with Cordova 1.7.1.
you should add all javascripts and css files in the first page that is loaded first;;
ex: my app the first page is index.html;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="css/jqm-docs.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.scrollview.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<!--
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
</head>
<body>
<div data-role="page" id="indexPage" >
<div data-role="header">
<a href="#" id="btnExit" data-role="button" data-inline="true" data-icon="back" >Exit</a>
<h1>Sample App</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/cordova-1.7.0rc1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</script>
<script type="text/javascript" src="controllers/firstpage.js" ></script>
<script type="text/javascript" src="controllers/secondpage.js" ></script>
</body>
</html>
and fisrtpage should like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div data-role="page" id="firstpage" >
<div data-role="header" data-inline="true">
<a href="#" data-role="button" data-inline="true" id="btnLogOut" data-icon="back" >Log out</a>
</div>
<div data-role="content" data-content-theme="a" style="width:97%;">
the first page
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul style='background-color:#313439'>
</ul>
</div>
</div>
</div>
</body>
</html>
And firstpage.cs
$( document ).delegate("#firstpage" ,"pageinit", function() {
/// add your code here
});
Doubt this is possible as I don't have a 1 page app, but pretty much every view I make contains 80% of the same css/javascript, so is there any way I could tell knockoutJS a master view which everything else would just populate?
I doubt it as this is pretty much what a 1 page app is for... best I can hope for is to use something like Combres to combine all my non-changing stuff together into one resource file per type...
== EDIT ==
Adding example of what I mean, I am pretty sure I wouldn't be able to inject into multiple areas like shown below, but here is an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Master Page</title>
<link type="text/css" rel="stylesheet" href="../Assets/Styles/main.css">
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Themes/simple.css">
<link type="text/css" rel="stylesheet" href="../Assets/Styles/jquery.qtip.min.css">
{Per Page Css Here}
</head>
<body>
{Per Page Content Here}
<script type="text/javascript" src="../Scripts/Libs/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.validate.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.tmpl.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.qtip.pack.js"></script>
<script type="text/javascript" src="../Scripts/Libs/knockout-1.2.1.js"></script>
<script type="text/javascript" src="../Scripts/Libs/knockout-external-templates.js"></script>
<script type="text/javascript" src="../Scripts/Libs/cufon-yui.js"></script>
{Per Page Scripts Here}
</body>
</html>
<!-- View 1 -->
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Views/view1.css">
<h1>Some Content</h1>
<script type="text/javascript" src="../Scripts/view1.js"></script>
<!-- View 2 -->
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Views/view2.css">
<h1>Some Other Content</h1>
<script type="text/javascript" src="../Scripts/view2.js"></script>
Again, if I cannot do this its not a game breaker, just dont want to have to update every view if I update the jquery version etc...
You could declare your Javascript code relevant to each view in your views and the common code in your master page. Then call that bit of code from your master page and bind them using ko.applybindings.