I'm using the ng2-pdfjs-viewer v13.2.2 package in an Angular 10.2.4 project.
I would like to replace in the assets/pdfjs folder, the pdfjs-dist version of 2.2.171 (project original), with version 2.10.377.
The reason is because the most current version shows fewer errors in SonarQuebe.
When I do the replacement, the component continues to work normally, however, the options to disable buttons are no longer working. With the original version it worked correctly. I'm trying to disable the openFile button.
<div style="height: 1600px">
<ng2-pdfjs-viewer
#pdfViewer
*ngIf="pdfPronto"
[pdfSrc]="pdf"
download="true"
openFile="false"
print="false"
find="true"
fullScreen="false"
showSpinner="true"
>
</ng2-pdfjs-viewer>
</div>
Any tips on what I can change to make it work?
Related
After upgrading from Vaadin 14.5 to 14.6 I'm facing problems with CSS that contains URL's that point to content.
For example, the following CSS no longer works:
:host([part="my-part"]) [part="reveal-button"]::before {
content: url("../images/my-image.svg");
}
It fails to "compile" when running the build-frontend goal of the Vaadin Maven plugin with the following error:
ERROR in ../node_modules/#vaadin/flow-frontend/styles/components/my-component.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../images/my-image.svg' in '<Project Path>\node_modules\#vaadin\flow-frontend\styles\components'
The same error appears in the browser if I try to run the project. This CSS has worked fine in all previous versions of Vaadin 14.
Has anyone encountered anything similar, or have any ideas as to what has changed that might cause this?
With the new custom theme feature the .css loader has changed from raw-loader to css-loader but it shouldn't touch urls outside of frontend/themes/[theme-name] or node_modules
Is the styles/components/my-component.css located in src/main/resources/META-INF/frontend, src/main/resources/META-INF/resources/frontend or src/main/resources/META-INF/resources to be packaged as an add-on jar or compatibility mode?
As in that case the css would end up inside node_modules which might make a difference to the resolving.
As a workaround if you are not building an add-on you should be able to move the css and image to {project_root}/frontend and it should build fine.
Until release of 14.6.2 you can add the raw-loader dependency to a java class with
#NpmPackage(value = "raw-loader", version = "3.1.0")
and then add to webpack.config.js the lines
if(flowDefaults.module.rules[2].test.toString().includes('.css')) {
flowDefaults.module.rules[2].use = [ {loader: 'raw-loader' }];
} else if(flowDefaults.module.rules[1].test.toString().includes('.css')) {
flowDefaults.module.rules[1].use = [ {loader: 'raw-loader' }];
}
Did you change the css structure to follow the new theme structure introduced in 14.6? It is not needed, but it is important context. I think it is at least related to your issue.
The path seems a little weird in your error messages, ending up in a node_modules folder. Could you share where this file is in, and what loads the file to your project?
With the new theme structure, I've used the following css to import images in css:
background: url('./images/fire.png');
And that was placed in a file: frontend/themes/mythemename/mythemefile.css
I am trying to create a Select2 box with InputMask to insert IP addresses and add them as tags.
If I use any of the libraries on its own, it works like a charm but both together results in strange behavior.
When I type in numbers, the mask is not filled but rather it seems to expand.
I changed the type of the select2 <input class=“select2-search__field“> from search to text. The Inputmask library makes this necessary, but it should not cause errors because the types are functionally identical.
I created a Fiddle to show the behavior: Fiddle
HTML:
<select multiple id="sel1" style="width:100%"></select>
JS:
$("#sel1")
.select2({
tags: true
})
.on("select2:open", function () {
$(".select2-search__field")
.attr("type","text")
.inputmask({alias: "ip", greedy: false});
})
In my local example I changed the library to support search and the behavior is the same.
Am I missing something?
There is a bad news for you if you MUST use version 4.0.5.
Fixed in jsfiddle by downgrading select2 to version 4.0.2
The main thing is version <= 4.0.2
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.js
Tried 4.0.3 onwards up to 4.0.6-rc.1 but no luck.
Opened up issue select2#5216 with select2.
I did a slight change but that has nothing to do with the problem itself.
$('.select2-search__field').attr('type', 'text');
$('.select2-search__field').attr('style', 'width: 10em;');
$('.select2-search__field')
.inputmask({
alias: 'ip'
});
I use this ionic version.
Cordova CLI: 6.2.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.2
Node Version: v7.4.0
Here's the code and its purpose is for the user to enter info and submit it.
<ion-content>
<ion-list *ngIf="isTest">
<ion-input> </ion-input>
<ion-input> </ion-input>
<ion-input> </ion-input>
</ion-list>
<button ion-button>Submit</button>
</ion-content>
On Android it's working, but when I test it on iOS, when I click on ion-input the page jumps up and down which is not good UX at all. Any ideas how to solve this issue on iOS ?
Here is video example of the issue. drive.google.com/open?id=0B22-s3eK4PTLWXpNMk1tbzdjcGs
Ok. After some research I found the answer for my issue. If someone else is having issue like this one, then in app.component.ts file you should add this lines.
constructor(private config: Config) {
this.config.set("scrollPadding", false);
this.config.set("scrollAssist", false);
this.config.set("autoFocusAssist", true);
this.config.set("android", "scrollAssist", true );
this.config.set("android", "autoFocusAssist", "delay");
}
this solved my problem for iOS and Android.
Try using ion-input like it's in the docs, inside a ion-item.
<ion-item>
<ion-label stacked>Name</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
if you don't want a ion-label just remove it and add item-content as a attribute to ion-input.
When you use ion-item Ionic automatically adds some classes and components where it places the input inside, maybe the lack of this component is causing your screen to bump when it's unecessary.
Hope this helps.
#djumerko is right. Just a little change.
Here is what works for me:
this.config.set("ios", "scrollPadding", false);
this.config.set("ios", "scrollAssist", false);
this.config.set("ios", "autoFocusAssist", true);
this.config.set("android", "scrollAssist", true );
this.config.set("android", "autoFocusAssist", "delay");
I have simple paper-dropdown-menu:
<paper-dropdown-menu label="select">
<paper-listbox class="dropdown-content">
<paper-item>option a</paper-item>
<paper-item>option b</paper-item>
</paper-listbox>
</paper-dropdown-menu>
When I click the dropdown for the first time everything is ok, but each next click cuts height of the list in half (in Dartium):
It works well when I compile this to javascript:
How to prevent this behaviour in Dartium?
This is a known issue in Dartium, it should work fine in other browsers. A new version of Dartium was announced for Dart 1.14.
I have come across this strange problem and it is driving me nuts.
It looks like a bug, but I don't know if maybe I am doing someting wrong.
The CSS attached to a component via cssUrl doesn't work on Internet Explorer.
If I add some content to the html template and I use classes from the CSS, those classes are not applied in IE. However, the same code works fine in Dartium, Chrome and Firefox.
I have created a sample project in github showing the error:
https://github.com/gonzalopezzi/ie-angulardart-shadowdom-bug
The project has the following dependencies:
dependencies:
browser: 0.10.0+2
angular: 0.11.0
shadow_dom: 0.10.0
(I have tried to avoid "any" but those are the latest versions of such packages)
I have a very simple component:
import 'package:angular/angular.dart';
#Component(selector: 'internet-explorer-bug',
templateUrl:'internet-explorer-bug/internet-explorer-bug.html',
cssUrl:'internet-explorer-bug/internet-explorer-bug.css',
useShadowDom: true,
publishAs: 'cmp')
class InternetExplorerBug {
}
This is the css file (internet-explorer-bug.css):
.red-div {
background-color: red;
}
And this is the template (internet-explorer-bug.html)
<div id="main-div">
<div class="red-div">Red background?</div>
</div>
The component works properly in Dartium, Chrome and Firefox. It doesn't show the red background in Internet Explorer, though.
I have tested it in Internet Explorer 10 and 11. These are the results:
The red background is not displayed
The browser downloads the css file (I can see that in IE dev tools)
If I inspect the DOM, I see a strange css attribute assigned to the div with the name "background-color:red" and no value:
.red-div {
background-color:red: ;
}
I have posted the same question in the mailing list (here). If I somebody helps me there I will post the solution here too.
Any help will be appreciated.
Thanks in advance.
I guess this line causes the problem
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
This is deprecated. You should use
<script src="packages/web_components/platform.js"></script>
You need to change your pubspec.yaml too (shadow_dom to web_components)