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
Related
i am running an app in aspnetcore which uses plain js files for the view part,
in this case is a legacy app using :
jquery
Requirejs with AMD modules
Durandal (now aurelia) which enforces the use of those modules
Knockoutjs (mvvm lib)
here an example of durandal/amd module code (if anyone has seen it already)
define(['durandal/app',
'plugins/dialog',
'global',
'knockout',
'services/datacontext',
'services/appsecurity'],
function (app, dialog, global, ko, datacontext, appsecurity) {
/// ... function body using modules but no intellisense...
}
this is the structure of my app
--src
----aspnectoreapp
-------wwwroot
---------App (contains app code using durandall structure)
-----------Config.js (requirejs config file)
-----------Main.js (entry point)
---------Scripts (contains js libs like all the aboves)
how can i make this to work with vscode intellisense?
i tried adding packages with npm init, and npm install -D
adding both packages and types..
i also tried adding this in my wwwroot/jsconfig.json
{
"compilerOptions": {
"module": "amd",
"target": "es6"
}
}
but got no luck.
I also tried installing the requirejs vscode extension specifying a settings.json workspace solution file (at top level), with this values
{
"requireModuleSupport.modulePath": "./src/aspnectoreapp/Scripts",
"requireModuleSupport.configFile": "./src/aspnectoreapp/App/Config.js"
}
but got no luck .
Anyone which tried any of those settings or knows a way this could work?
My ultimate goal is to get e2e and unit code coverage for my Vue 3 app using Cypress in my CI/CD pipelines.
However, when using the following configuration in my babel.config.js I get a flood of repeated error messages that read don't know how to turn this value into a node at transformFile.next (<anonymous>) for each Vue file in my app that uses <script setup>.
babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset',
],
plugins: [
['babel-plugin-istanbul', {
extension: ['.js', '.vue']
}]
],
};
package.json
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.15",
"#vue/cli-plugin-eslint": "~4.5.15",
"#vue/cli-service": "~4.5.15",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"babel-plugin-istanbul": "^6.1.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
App.vue
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
My concern is that the plugin doesn't know how to handle Vue 3's script setup syntax.
Sadly, the only how-to guides I can find online are for Vue 2 or React apps.
https://docs.cypress.io/guides/tooling/code-coverage#Using-NYC
https://vuejsdevelopers.com/2020/07/20/code-coverage-vue-cypress/
So my question is: what can I do to get my app to transpile while using babel-plugin-istanbul and script setup?
Steps to Reproduce:
Create a new Vue 3 app with vue-cli-service
Install babel-plugin-istanbul in your dev dependencies
Configure your babel.config.js as shown above
Convert your App.vue to use <script setup>
Run npm run serve
Expected behavior:
The app transpiles with no errors
Actual behavior:
Transpilation failure with don't know how to turn this value into a node errors for App.vue.
The resolve is to use istanbul in the babel config (as given in Cypress docs).
The cause isn't apparent, without <script setup> the full name babel-plugin-istanbul works ok.
plugins: [
['istanbul', {
extension: ['.js', '.vue']
}]
],
I am solving same problem and I can point out two things:
The problem is in babel.config.js file especially with .vue extension, when you remove it works, but for me it instrument all files.
I have a feeling another problem is with CLI versions plugins. I don't have problem to run the cypress code coverage plugin with older packages.
If add extension:['.vue'] in bable.config.js configuration, getting below error.
src/pages/somefile.vue?vue&type=script&setup=true&lang=js
Module build failed (from ./node_modules/#vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js):
Error: src/pages/somefile.vue: don't know how to turn this value into a node
I ran into this as well. It turned out to be a bug in the istanbul-lib-instrument package, which was fixed in this PR: https://github.com/istanbuljs/istanbuljs/pull/662
If you upgrade your installed copy of istanbul-lib-instrument to 5.2.1 (i.e., npm update istanbul-lib-instrument) the issue should go away.
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 recently upgraded Ionic from 1.1.0 to 1.3.1 and now my ion-refresher has stopped working. Nothing appears when I drag down on the page and the event does not fire.
In my development environment I have:
<ion-view view-title="Test">
<ion-content>
<ion-refresher pulling-text="Pull to refresh..."
on-refresh="vm.refresh()">
</ion-refresher>
<ion-list>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
</ion-list>
</ion-content>
</ion-view>
By changing the versions of Ionic, I discovered that the problem was introduced between 1.1.1 and 1.2.1
Then I compared the html being produced by each version and noticed that the earlier version included class="js-scrolling" on the refresher. I also examined the release notes for 1.2.1. And there I found another clue, buried in some comments on issue #4758:
"By default, Ionic 1.2 will use native scrolling on all platforms."
ion-refresher is based on jsScrolling. If you want ion-refresher you
should enable jsScrolling. You can do it by adding
$ionicConfigProvider.scrolling.jsScrolling(true); in your app config
So I added a script file to my index.html containing this code:
(function () {
"use strict";
angular
.module('app')
.config(ionicConfig);
ionicConfig.$inject = ['$ionicConfigProvider'];
function ionicConfig($ionicConfigProvider) {
$ionicConfigProvider.scrolling.jsScrolling(true);
}
})();
And now my refresher is working again.
EDIT
At least it was working - in the Ripple emulator. But when I tried to run on a device (deploying from Visual Studio 2015) the app would not deploy or run until I removed that line. So now I have this code:
function ionicConfig($ionicConfigProvider) {
//detecting Ripple emulator
var emulating = window.parent && window.parent.ripple;
if (emulating) {
$ionicConfigProvider.scrolling.jsScrolling(true);
}
}
I am using Phonegap Build and Hydration
My config does include the plugin
<gap:plugin name="com.phonegap.plugins.facebookconnect">
<param name="APP_ID" value="my_appId" />
<param name="APP_NAME" value="my_namespace" />
</gap:plugin>
On build.phonegap.com it is showing it my app under the plugins tab...
Installed 3rd Party Plugins
com.phonegap.plugins.facebookconnect 0.4.0
Installed PhoneGap Plugins
org.apache.cordova.camera 0.2.3
org.apache.cordova.console 0.2.3
org.apache.cordova.device 0.2.3
org.apache.cordova.dialogs 0.2.2
org.apache.cordova.geolocation 0.3.2
org.apache.cordova.globalization 0.2.2
org.apache.cordova.media-capture 0.2.3
org.apache.cordova.splashscreen 0.2.3
org.apache.cordova.vibration 0.3.3
I'm not specifying which version of PG to use so it is running 3.1.0
In my index.html file, in the head I have
<script src="phonegap.js"></script>
<script src="device.js"></script>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script src="cdv-plugin-fb-connect.js"></script>
<script src="facebook-js-sdk.js"></script>
Here is the part that I can't seem to find anyone else having a problem with:
In my deviceready callback I am testing for typeof CDV == 'undefined' to test and it's coming back as undefined. As far a I can tell is that cdv-plugin-fb-connect.js isn't getting included correctly.
Am I correct that cdv-plugin-fb-connect.js and facebook-js-sdk.js do not need to be copied into my www directory because they are included there by PGB?
Btw, I'm testing on Android Nexus5
<access origin="*" /> is in my config
I could never get CDV to work correctly on my Android emulator/phone.
However, I did get FacebookConnectPlugin.js to work, which is also included in the same official PhoneGap/Cordova Facebook plugin.
There are two version of this file -
One that you include in your root www/js folder
Another which is loaded by PhoneGap from the plugin folder after you deploy to platforms/android (I believe this is handled by cordova.js).
The second one overrides the JS SDK calls with native ones, so it degrades gracefully when you run in a browser.
For an example that actually seems to work, see the www folder in the develop branch.
e.g.
var getStatus = function () {
facebookConnectPlugin.getLoginStatus(
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}