I use bootstrapVue version 2.21.2 with bootstrap version 5.1.3.
This bootstrapVue version in tag default generates inline radio inputs,
https://bootstrap-vue.org/docs/components/form-radio#inline-or-stacked-radios
But in my project are generated in stacked mode:
<b-col>
<b-form-group label="Con quota sociale" v-slot="{ ariaDescribedby }">
<b-form-radio-group
v-model="filterQuotaSelected"
:aria-describedby="ariaDescribedby"
name="filter-quota">
<b-form-radio value="">ignora</b-form-radio>
<b-form-radio value="N">non in regola</b-form-radio>
<b-form-radio value="S">in regola</b-form-radio>
</b-form-radio-group>
</b-form-group>
</b-col>
browser render
How to render inline? Have any idea?
After few step I resolved question.
It is a problem of plugin version .
BootstrapVue v.2.21.x was designed to interoperate with bootstrap v4.5.3, setting up my project folder, the installer, for default, have downloaded last version 5.x of bootstrap which is incompatible.
Step for resolving...
change file "package.json" substituting "bootstrap": "^5.x" in dependencies object with
"dependencies": {
"bootstrap": "4.5.3",
...
}
in folder project run
npm update
I am not able to install bootstrap 4(beta) to my MVC project. To be precise popper.js nuget dependency is failing to install. Please let me know any possible way to do it(bower install is still a way but I want to go with nuget)
Could not install package 'popper.js 1.11.0'. You are trying to
install this package into a project that targets
'.NETFramework,Version=v4.6.2', but the package does not contain any
assembly references or content files that are compatible with that
framework. For more information, contact the package author
I was finally able to get Bootstrap 4-Beta working by doing the following:
1.) Install the popper.js NuGet Package V1.12.3
2.) Install Bootstrap4-beta NuGet Package
3.) Update your BundleConfig.cs to include the following: Note the popper.js path
bundles.Add(new ScriptBundle("~/Scrpts/Bootstrap").Include(
/*** Make sure popper.js is pointing to umd ***/
"~/Scripts/umd/popper.js",
"~/Scripts/bootstrap.js",
));
bundles.Add(new StyleBundle("~/CSS/Bootstrap").Include(
"~/Content/bootstrap.css"));
For some reason if you try to use the popper.js in the root of the \Scripts folder you will receive the error:
SyntaxError: export declarations may only appear at top level of a module
but the version in the /Scripts/umd seems to work.
You can get around this by manually adding the popper.js package to your packages config.
<package id="popper.js" version="1.11.1" targetFramework="net462" />
Then you can go into the nuget package manager and install normally.
I managed to get around this problem by downloading the latest (1.12.3 at the time of writing) popper.js nuget package before updating to bootstrap 4.0.
Then in the bundles.config I added the popper js like this
bundles.Add(new ScriptBundle("~/bundles/popper").Include(
"~/Scripts/umd/popper.js"));
The umd version is the only one that worked for me the others gave an console error of
Unrecognised Token Export
Just make sure to include the popper js file before the bootstrap one.
#Scripts.Render("~/bundles/popper")
#Scripts.Render("~/bundles/bootstrap")
I also noticed that this then broke the majority of the auto produced template as it's based on previous versions of bootstrap. The navbar almost completely vanishes. I managed to fix mine by replacing it with the following, but this doesn't include any items in the mobile menu.
<div class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">My Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">#Html.ActionLink("Home", "Index", "Home", new { #class = "nav-link" })</li>
<li class="nav-item">#Html.ActionLink("About", "About", "Home", new { #class = "nav-link" })</li>
<li class="nav-item">#Html.ActionLink("Contact", "Contact", "Home", new { #class = "nav-link" })</li>
</ul>
</div>
</div>
I know this question has a few good answers but this was the full solution that worked for me so I thought I'd share it in the hope that it spares someone a bit of time in the future.
Same problem here... I created an issue on GitHub for this: https://github.com/FezVrasta/popper.js/issues/387
The Popper.js NuGet package has been broken until version 1.12.2.
Bootstrap is still requiring the version 1.11.x, which is, unfortunately, broken.
You should wait for Bootstrap to close this issue:
https://github.com/twbs/bootstrap/issues/23622
meanwhile you can follow the suggestion of Rob Quincey.
Before installing the package using NuGet, expand "Options" and change the "Dependency Behavior" to "Highest". Now when you install the package the latest popper.js will get installed first allowing bootstrap to get installed as well.
This prevented me from having to install popper separately.
Again, not a fix, but similar to the fix by #Alex.
I resolved it by installing them separately using NuGet, so first installing popperjs (just search for popper in the NuGet package manager) then installing Bootstrap 4. It seems to only hit the above error when it needs to download it as a dependency rather than standalone. Very odd.
I was not happy with all the files and folders and typescript-related code and NuGet and debugger messages that came with Popper, so I am using CDNs, like so:
#Scripts.Render("~/bundles/jquery")
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
So far it's all worked fine.
For uses of ASP.NET Webforms:
I've created a new Project with preinstalled Packages (Bootstrap, Popper, jQuery), updated them to the newest version and did:
add to App_Start/BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/popper").Include(
"~/Scripts/umd/popper.js"));
Add to Header (Master Page)
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/popper") %>
<%: Scripts.Render("~/bundles/bootstrap")%>
</asp:PlaceHolder>
I am not sure the title is correct but i am new with Bower, Gulp, Strongloop and even AngularJS.
I am updating an existing app, using bower, gulp and Strongloop, and i would like to add a bower componenent to the app (this one : https://github.com/fraywing/textAngular).
i did bower install textAngular as explained in the readme file, but now i should add those lines to my app :
<link rel='stylesheet' href='/bower_components/textAngular/dist/textAngular.css'>
<script src='/bower_components/textAngular/dist/textAngular-rangy.min.js'></script>
<script src='/bower_components/textAngular/dist/textAngular-sanitize.min.js'></script>
<script src='/bower_components/textAngular/dist/textAngular.min.js'></script>
But my app is using Strongloop, gulp and coffee script, so there is lot of file, not looking like classic html file and i am totally lost.
Can you help me find the next step to make this works ?
Thanks alot :)
I finally found my mistake, i need to add --saved at the end of bower command line.
So real line is : bower install textAngular --saved
Plus i should add textAngular in my angular module definition :
angular.module "starter", [
...
"textAngular"
...
]
Note that you should install too font-awesome and rangy to make it works completly
I'm building a custom odoo module that will be using several Javascript libraries.
I need to add references to those libraries (local references) but I don't know exactly where to place those libraries and how to refer to their location.
What I tried:
- I created the new module and placed the libraries inside the module directory but it didn't work.
- I also placed the libraries in the home directory of odoo.
As I understand, the problem would be solved if I could get the default directory of the webserver that odoo runs on.
If module is using js files, then you must put these files inside your module. And still if you cant reach these files from your module its your technical error and you have to fix it yourself, also note that odoo has its js libraries already
I found this page: how to add css and js files in Openerp 7 / Odoo module maybe can help you.
Below is the content.
Store files correctly:
CSS and JS files should be reside under 'static' directory in the module(the rest of subdirectory tree under 'static' is an optional convention):
static/src/css/your_file.css
static/src/js/your_file.js
Add files in manifest (v7.0) or in XML(v8.0)
Openerp v7.0 way is to add following entries in manifest (in openerp.py):
...
'css': ['static/src/css/your_file.css'],
'js': [static/src/js/your_file.js'],
...
Odoo v8.0 way is to add corresponding record in the XML:
Add XML to the manifest (openerp.py):
...
'data': [ 'your_file.xml'],
...
Then add following record in 'your_file.xml':
<data>
<template id="assets_backend" name="your_module_name assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<link rel='stylesheet' href="/your_module_name/static/src/css/your_file.css"/>
<script type="text/javascript" src="/your_module_name/static/src/js/your_file.js"></script>
</xpath>
</template>
....
....
</data>
I have a problem with path to javascript in my GWT html.
I get: WARNING: No file found for: /smartajax/libs/historyjs/history.html4.js and more like this
File exists in my war/html1 dir.
It happens only if script like this above is called not from my Html1.html, but from other script that is in public (its not declared in html by <script type="text/javascript" ...>
- public_res
- smartajax
- libs
- historyjs
- war
- html1
- smartajax
- libs
- historyjs
<script type="text/javascript" src="html1/smartajax/load.smartajax.js"></script>
How to solve this?
You should ideally place all your third party scripts in same relative folder.
1) All in public/thirdparty
2) All in war/thirdparty
Your gwt public resource folder is compiled into your module's folder, and not war base directory. It will be compiled into war/module_name/html1/smartajax/... So, instead of using relative uris, how about absolute uris?
GWT.getHostPageBaseURL() -> Base url for html page, http://x.y/
GWT.getModuleBaseURL() -> Base url for gwt module, http://x.y/module_name/