I installed the ag-grid enterprise (i have the license also). But the table doesn't come with proper styles. it also changed the other tables(without created the enterprise) styles also. I tried it in different versions of ag-grid, ag-grid-angular, ag-grid-community, ag-grid-enterprise. but I got the same issue.
I tried the latest version(22.0.0) of these modules.
"ag-grid": "^18.1.3",
"ag-grid-angular": "^22.0.0",
"ag-grid-community": "^22.0.0",
"ag-grid-enterprise": "^22.0.0", Then then the project didn't load and nothing was shown in the browser.
I tried it in different versions of ag-grid, ag-grid-angular, ag-grid-community, ag-grid-enterprise. Then the project loaded. But didn't get the proper styles.
Why this happens and what versions should I uses to get the right versions?.
enter image description here
use next versions
"ag-grid-angular": "^21.2.2",
"ag-grid-community": "^21.2.2",
"ag-grid-enterprise": "^21.2.2",
Here you can find step-by-step instructions:
https://stackoverflow.com/a/59197319/9200941
dont forget import ag-Grid styles - in styles.scss
and add class to grid
<ag-grid-angular
style="width: 100%; height: 100%;"
class="ag-theme-balham"
in my project I use next import in styles.scss
#import "~ag-grid-community/dist/styles/ag-grid.css";
#import "~ag-grid-community/dist/styles/ag-theme-balham.css";
I recommend not use "ag-grid-enterprise": "^21.2.2" for now, it has some issue with EnterpriseCoreModule, use follow that i write above - it is stable versions
Related
I've been working on an ionic app, I've come to do some styling on it and I'm having issues with app.scss.
According to the ionic documents I should be able to use app.scss for app-wide styles such as the toolbar etc. but nothing happens when I try to style anything from this file, it's like it's not being included in the build?
The initial project was done by creating the app in CLI with the sidebar menu option as the template and all the scss files work fine in the individual components.
Any idea why the app.scss file isn't working? I've inspected elements I've tried to style and they are not being picked up at all.
An example:
ion-title {
background: red;
}
this doesn't work, the toolbar background doesn't change, but it does through chrome inspector.
I have tried this in global.scss too and still nothing, funny thing is if I apply a display:none to all elements it works:
* {
display: none;
}
it just doesn't seem to want to style individual elements like the "ion-title"
UPDATE:
There seems to be a bug in ionic 4, the styleUrls won't accept me adding ../app.scss , it throws an error, but I can include ../app.css so I'm just going to auto-compile the scss to css.
I can then include the app.css file in each component and it's working!
In Ionic 4, global styles are saved by default in src/app/global.scss
If this is an Angular project that you are converting from an Ionic 3 template, you must add a reference to your global scss file in your angular.json file in under projects/app/architect/build/styles, like below
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
This is a change from Ionic 3 where it used to be in src/app/app.scss. If you created a project in Ionic 3 or earlier, you must move your styles into a new global.scss for them to be applied throughout the whole app
There seems to be a bug in ionic 4, the styleUrls won't accept me adding ../app.scss , it throws an error, but I can include ../app.css so I'm just going to auto-compile the scss to css.
I can then include the app.css file in each component and it's working!
You must include the path of app.scss file in your app.component.ts like this
styleUrls: ['app.scss']
Then you will be able to use your scss file
I am just getting started with Ionic 2. I have created an img file in app inside it is a file logo.png. So I have created the following code:
css:
.getting-started {
.logo {
background-image: url(./img/logo.png);
}
}
html:
<ion-col offset-33 width-33 class="logo"><h1>Logo</h1></ion-col>
<h3>Welcome to your first Ionic app!</h3>
</ion-content>
I know the css is working, as if I toggle the background color, I get the expected results. However, I don't get any background image, just the Logo text specified. Where should I have put the image file?
EDIT: As of Ionic 2 RC 0, the correct place to put your images is in src/assets/img/ and the correct code to reference the image is <img src="assets/img/myImg.png">. Please see Ionic's change log for RC0 (specifically #28).
As of right now, using the official Drifty Co. Ionic 2 Conference App as a reference, images should be placed inside of the www/ directory.
In my current Ionic 2 app, an image is located at www/img/logo.png and it is referenced in app/pages/page_name/page_name.html as <img src='img/logo.png'> and it works like a charm.
Currently using:
ionic-angular v2.0.0-beta.6 (package.json)
ionic-native ^1.1.0 (package.json)
ionic-cli v 2.0.0-beta.25 (installed CLI)
Using Ionic 2 beta 6, I handled this with a simple gulp task. I dropped my images in app/assets/images (this path is completely arbitrary). Then, I added the following task to gulpfile.js:
gulp.task("assets", function() {
return gulp.src(["app/assets/images/*"])
.pipe(gulp.dest("www/build/images"));
});
You'll also need to update the watch and build tasks to include the new assets task in their calls to runSequence(). I don't believe the order of tasks in the sequence matters, in this case:
gulp.task("build", ["clean"], function(done) {
runSequence(
["sass", "html", "fonts", "assets", "scripts"],
function() {
buildBrowserify().on("end", done);
}
);
});
If you output your images to the same path as I did, then you would reference your images in CSS from ../images/image-name.png and in <img> tags from build/images/image-name.png. I have confirmed that these images are visible both from the browser and an Android device. I don't think it should be any different for iOS.
The assets folder is the correct folder to place any media.
The location of my image:
fyi: if you dont have the folder, just create it
src > assets > img > background.png
variables.scss
.backgroundImage {
background-image: url('../assets/img/background.png');
}
Then on the page I want to use it on:
home.html
<ion-content padding class="backgroundImage">
</ion-content>
You can also reference images the following way:
home.html
<ion-content padding class="backgroundImage">
<img src="./assets/img/background.png" width="50%" />
</ion-content>
www\lib\ionic inside ionic create one folder img
now your path
www\lib\ionic\img put your background image inside this img folder and in your
www\lib\ionic\css\ionic.css
inside ionic.css find .view-container class and past this line.
.view-container {
background: url("../img/main_bg.jpg") repeat scroll 0 0 / 100% 100%;
}
OK, so I found the answer on the IONIC forum. The images go in www/img, the paths to these is then:
url('../../img/appicon.png')
when referenced from css or html in a page folder which is in pages in app.
Hope this helps anyone in the future.
I was having same problem, I found a way, I don't know if is the best way, but it's work.
the images must go on a file sibling to build, inside folder www
www
build
img
Got the solution. Its using path relative to index.html and not template folder.
So we need use path without../
src="img/John_Williams.jpg"
This works both on browser and apk
I could not manage to make it work using a PNG file. It worked in the browser but when I build the app and deployed to a device it did not displayed.
Instead of fiddling with the Gulp file to understand what was going on, I figured out a simpler workaround :
Inline the image into your HTML (or CSS) using a Data URI.
There are many tools online such as this one that will convert your PNG to a Base64 data URI.
If your image is pool.jpg. Place it in /src/assets/img/pool.jpg
It needs to be in this directory (assets) as it is your source from where everything gets built.
Then stop your ionic serve command (Ctrl-C) or whatever you use.
Then delete EVERYTHING under www directory (it all gets rebuilt anyway).
Then restart your server by running 'ionic serve' again.
This will rebuild the directory with the images.
You can reference the image as background-image: url('../assets/img/pool.jpg');
in your code.
I am using ionic 3 and it's a shame it doesn't pick up changes in the assets directory. IONIC should look at this.
I 'm currently on ionic version 3.6 and I had to use this to work:
src="../../assets/img/myImage.jpg"
The path assets/img/myImage didn't work for me
I hope this helps
Hi Guys i found a method add images to ionic v2
Create a images folder in "www" directory (www/images/) and add your all images in this path.
Then give your image path like this
ex: for pages
src="images/logo.png"
in CSS
.ThemeColor{ background: url(/images/bg.png)};
That's it, works for me..
Thanks
The icons that displayed here:
http://ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/default.html#/ are working fine, though if I copy paste the entire code and copy-paste it in my index.html in my local Ionic project that I created - the icons are not aligned.
[Screenshot]
[]1
Thing is, beside index.html - I really didn't change anything, so I'm not really sure what's causing it:
The <a> tags are with text-align: center after rendering ( "computed" in Firebug )
I though the Ionic version maybe outdated/too new, but version 1.1.1 works fine vs 1.0.0 in the demo URL.
Another thing to notice is that the code in the demo:
<style>
.slider-slide h3{
color:#fff;
margin-top:10px;
};
.scroll{ height:100%;};
</style>
should make the title "Games content" white ... but it's not affecting it.
Clarifying my debugging
Checkout my plunker for example: http://plnkr.co/edit/3wLO3MNgeMOESSBRA0Vp?p=preview
( code is exactly as in the GitHub example in the link above just I played with the Ionic version to see if maybe I have an outdated version of Ionic )
In my server I did:
> I created a new Ionic project, bower.json:
"ionic": "driftyco/ionic-bower#1.1.1"
> I edited files under www
> In www/index.html - I copy pasted the content of index.html from the Plunker
> Plunker works OK, but in my server I have Icons aligned to the left vs centered
Any thoughts ?
I am working with FusioChartsXT Trial Version.I am using this version for rendering charts in my cshtml pages.It is working fine .But showing a water mark as "Fusion Chart XT trial" below all charts.It is using single JavaScript file for rendering charts.. I am sharing code.
In my Layout page
<script src="~/Scripts/js/fusioncharts.js"></script>
<script src="~/Scripts/js/themes/fusioncharts.theme.zune.js"></script>
****In My View Page****
var dashboardChart = new FusionCharts({
type: chartType,
renderAt: "chartContainer",
width: chartWidth + 'px',
height: "350",
dataFormat: "xml",
dataSource: $('#xmlDoc').val()
,
"events": {
"renderComplete": function (eventObj, argsObj) {
loadResult();
}
}
}
But our company already had fusion chart license. It is 3.2.2.2.It is using in old project which not required in mobile devices
How I can use to my current development?
If You are using the Trial version the watermark is intended. And can not be removed by changing the code snippet you shared. If you have prior license files you need to replace your FusionCharts specific files with those old files and check whether they serve the purpose.
If not, you need to get in touch with FusionCharts, and buy / upgrade your license.
Hope this helps.
worked for me in FusionCharts version 3.11.3
add this css
[class*="creditgroup"]{
display: none;
}
I want to remove the "Chart Types" link from the dashboard but am not able to do so. I tried adding
.show_chartTypeSelector_wrapper { display: none; }
to overrides_custom.css of my(default) theme, but it does not reflect. I am not sure if its being picked up. Also I restart jasper server after every change just to be sure
Any help is appreciated.
As the reports opens in iFrame, the override_ccustom css file is not effective there.
The resource (css) is loaded with the follwoing URL:
.../reportresource?resource=com/jaspersoft/jasperreports/highcharts/charts/resources/ jive.highcharts.vm.css&jr.dynamic=true
In order to modify any property, you have to chnage into the resources located into ythat jar.
Steps to do that:
Download and open jasperreports-highcharts-5.x.x.jar file
Open the jar as archive with 7zip.
Go to com.jaspersoft.jasperreports/highcharts/charts/resources
Download jive.highcharts.vm.css file
Locate class jive_chartSettingsIcon
add display: none into it and put it back to the archive location
Now replace the jar and restart the server.
I solved the problem by adding to my overrides_custom.css, the following style:
.jive_chartSettingsIcon {
display: none;
}
(without the need of changing the archive)
You can also set a property in the jasperserver.properties file:
com.jaspersoft.jasperreports.highcharts.interactive=false
This should to the trick, removing the chart type possibilities from every report displayed in the dashboard
Hope it helps
Fran