I recently setup a create-react-app to work with antd-mobile. I had to eject CRA, and change webpack. I got it working with webpack, using the babel-import-plugin. I used ["import", { "libraryName": "antd-mobile", "style": "css" }]
However, all the elements are very large. They are not the same size as the demo. This is on both mobile & web.
I am on version antd-mobile: 1.1.4-beta.1 but the same happend on 1.0.0
My code is in this repo here: https://github.com/yarnball/antd-mobile-create-react-app/
Here is a screenshot:
It is relaved to the viewport.
Remove <meta viewport
Add this script inside the <head></head> tags:
!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);flex(100, 1);
Related
I am using ACE editor in my browser extension. It all works fine in a Chrome/Chromium browser, but when I try the extension in Firefox (latest version), only ace.define and ace.require are available (ace.edit is needed, at least, to initialize).
Here is the part of the manifest (MV2) file involved:
"content_scripts" :
[
{
"matches": ["*://example.com/*"],
"all_frames": true,
"js": [
"ace-min/ace.js",
"myscript.js"
],
"run_at": "document_end"
},
]
What could be done wrong? Both files are being read, but only a part of ace.js seems to be executed. Imagine that myscript.js contains a console.log(ace), to see which functions can I use.
Thanks in advance!
I posted an issue on the ACE's GitHub repository. The response was very quick and polite.
All is explained in this comment: https://github.com/ajaxorg/ace/issues/4898#issuecomment-1217887526
Just a side note, use noconflict ace instead of normal ace. The function you need to change is at the bottom.
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've deployed my angular 7 project in cumulocity server. No errors while building and deploying the application. But, Bootstrap CSS styling is not working properly.
In package.json I've mentioned these dependencies.
"#c8y/ngx-components": "1004.2.0",
"#c8y/style": "1004.2.0",
"#ng-bootstrap/ng-bootstrap": "^4.1.0",
In the new Angular Web SDK the Cumulocity Team switched to ngx-bootstrap. It is included in ngx-components, so no need to add it.
Your issue might be that some styles are missing as Cumulocity just comes with a subset of bootstrap. You might need to add bootstrap CSS to your app to make it working:
Add a branding entry in the package.json:
"c8y": {
"application": {
"name": "tutorial application",
"contextPath": "tutorial-application",
"key": "tutorial-application-key",
"brandingEntry": "./branding/branding.less",
"globalTitle": "Pied Piper IoT",
"tabsHorizontal": true
}
}
Then add the #c8y styles plus bootstrap in that file:
#import '~#c8y/style/extend.less';
#import '~yourpatt/to/boostrap.css';
I am using angular-material.sass to compile my app.css but it doesn't work.
Cause of it is <link> tag created by JSPM.
Angular material has in package.son this lines:
"shim": {
"angular-material": {
"deps": [
"./angular-material.css!"
]
}
}
It makes JSPM create <link> tag after my app.css and lots of overwrites does not work.
Every Angular Material version update I has to go to angular-material.js and delete these lines:
"deps ./angular-material.css!";
and after that it stops loading it's CSS. Annoying.
Why CSS framework forcefully adds itself to HTML? Is it 'feature"? For me it's a bug
I've just started using the Angular Leaflet directive (http://tombatossals.github.io/angular-leaflet-directive/#!/) and I'm trying to integrate this within an Ionic project.
On the browser, everything works fine: the map tiles are loaded in. When I compile the app with XCode and run in within the iOS simulator, the tiles do not load as expected.
When I use the inspector, I noticed that the html for the tiles that are loaded in is of the following form:
<img class="leaflet-tile leaflet-tile-loaded" src="//b.tile.openstreetmap.org/18/131008/87171.png" style="height: 256px; width: 256px; left: 791px; top: -114px;">
Notice the protocol is missing with the src property. Within the Cordova wrapper, the app assumes that this should be file://, and naturally fails to load in the tiles.
Is there any way to either:
Explicitly add the http:// protocol to the img src?
Set Cordova to default to http:// with URI's that start with //?
GitHub issue: https://github.com/tombatossals/angular-leaflet-directive/issues/460
I don't know the exact cause of the problem, but it seems to be an issue with the latest version of the leaflet-directive.
As a current work-around until the issue is fixed, use angular-leaflet v0.7.7 instead of the latest.
If you use bower, change the bower.json line to
"angular-leaflet": "0.7.7"
make sure it's not '~0.7.7'
Hope this helps!
This issue seems to be fixed in the current version of the Angular Leaflet Directive.
I am currently using this code in my controller and it works in the browser as well as on device:
angular.extend($scope, {
center: {
lat: 52.367215,
lng: 4.893036,
zoom: 1
},
maxbounds: {},
defaults: {
maxZoom: 16,
minZoom: 12,
tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
tileLayerOptions: {
opacity: 0.9,
detectRetina: true,
reuseTiles: true,
},
scrollWheelZoom: true
}
})