i'm trying to remove the light gray line that's next to the darker gray line:
After searching the rechart library through and through i decided to try and hide it with a css file.
this is the code :
.recharts-layer.recharts-cartesian-axis-tick line{
display: hidden;
}
I've also tried :
.recharts-cartesian-axis-tick-line{
display:hidden !important;
}
and still doesn't work.
it's important to note that the css file is linked and when trying to style something else it works.
this is what i see when i inspect and pick the element in the dev tools :
any help will be appreciated!
What you need to do is remove the tickLine from YAxis.
Something like that:
<LineChart>
...
<YAxis tickLine={false} />
...
</LineChart>
You can check more about it in docs API.
Related
I've been following this tutorial by Coder Coder to make my vscode look better
(tutorial link https://youtu.be/pGzssFNtWXw).
As per the video I've opened the settings.json file and just wrote some code
But when I try to change the color of the icons in the activity bar, nothing happens, here is the line of code I tried to use to change the color:"activityBarBadge.foreground": "#000000" this does not work though
Here is the code:
"workbench.colorCustomizations": {
"editor.background": "#000814",
"sideBar.background": "#000d20",
"sideBarTitle.foreground": "#ffd60a",
"sideBarSectionHeader.foreground": "#ffd60a",
"activityBar.activeBackground": "#ffea81d5",
"activityBar.background": "#22223b",
"statusBar.background": "#ffd60a",
}
Here is the result I got:
To change the Activity Bar icon colors use these two colorCustomizations:
"activityBar.inactiveForeground"
"activityBar.foreground" // for the active icon
Not able to change placeholder opacity in ionic v4
i have tried to change opacity of ion-select placeholder in
global.css
following is my code
.select-placeholder
{
opacity: 1 ;
}
but that didn't works , even i tried all methods to change it's css like
ion-select{
--placeholder-opacity: 1 !important;
}
ion-select{
--opacity: 1 !important;
}
ion-select{
opacity: 1 !important;
}
etc... but not works fine , event it color change very well using following code
ion-select{
color: var(--ion-color-secondary);
}
no change , it took default opacity <style> tag.
Any help would be appreciated
Edited
<ion-select class="contact-us-select" interface="alert" [interfaceOptions]="customPopoverOptions"
placeholder="selection" cancelText="cancel" okText="done" (ionChange)="onSelectChangevalue($event)">
<ion-select-option *ngFor="let item of Data" [value]="item.id">{{item?.title}}</ion-select-option>
</ion-select>
ion-select{
--placeholder-opacity: 1 !important;
color:black;
}
I'm afraid that's a bug of Ionic 4 (still happening in Ionic 4.4 as you can see in these github issues: 17446, 17166 and 17248).
Unfortunately, since you cannot access directly to the shadow DOM to change that value, there's no much we can do to fix the issue for now.
One of the users suggested using a label as a workaround (here) or even modifying a file from the node modules folder (here) but I guess a better workaround would be to preselect the first value by default. So for example if the options are Phone, Email, Live Chat, instead of showing the placeholder, you could preselect Phone by default until this bug is fixed in Ionic's core.
global.scss
ion-select{
opacity: 0.3 !important;
color: var(--ion-color-secondary);
}
that should work fine for changing global scss, you only need -- for changing scss variables defined in the component.
You should try this in css file:
.select-ios .select-placeholder{
color: #000;
font-size: 13px;
}
Go to this path:
[YOUR_PROJECT_PATH]/node_modules/#ionic/core/dist/esm
Look for this files:
ion-select_3-ios.entry.js
ion-select_3-md.entry.js
open it, and find:
.select-placeholder{color:currentColor;opacity:.33}
change it to what you want
I think the following code will help you, I tried on text box's placeholder, it works. For text box placeholder my code work, but for selection box I am not sure but, according to your code I think the following code may help you. Also, Run Code Snippet in which I code it for text box's placeholder.
select::placeholder {
opacity:0.5;
}
input::placeholder {
opacity:0.5;
}
<input type="text" placeholder="Input box">
I had same problem with ionic 4, this was my solution and works perfect
CSS
ion-select.industry-group:before{content:"Select industry"}
ion-select<your class>:before{
content: "Select Industry"
opacity: 1;
color: #00000
}
no placeholder in html
<ion-select class="industry-group" [formControl]="industryGroupFormControl" ok-text="Ok" cancel-text="Cancel">
enter image description here
When I use VS Code, a problem notice likes that(in the above image) is printed.
Although I want to fix it and really don't want to see it, I can't find any way to fix.
I am very painful about just seeing that error message all the time.
Please give me some helps.
You opened a { parenthesis at line 2784 and didn't close it. You should close it. --> }
Also, you have an extra comma , at 2793 that you have to remove.
Not use {}, because you may already mess your settings.json before.
so my suggestion as follows:
// in/your/settings.json/file
...
setting0_name:[setting0.0, setting0.1],
seting1_name : settings,
...
I have a custom directive that I use to manage user access through my website. I use this to add a 'disabled="disabled"' attribute to html tags.
However, when I try to use this with tag-input, it doesn't work. I'm guess this is down to that fact that ngTagsInput uses it's own directive for tags-input.
I have read the documentation and cannot find a solution to what I am looking for.
Here is my code:
Html:
<div access-level="Admin">
<tags-input ng-model="tags" on-tag-added="addNewTag($tag)" on-tag-removed="removeTag($tag)">
<auto-complete source="loadTags($query)" min-length="0"></auto-complete>
</tags-input>
</div>
Is there any work around for this?
Thanks.
It's currently unsupported, but looks like will be in the next major version (2.3.0):
https://github.com/mbenford/ngTagsInput/issues/102
Edit:
2.3.0 is out; see following link for details https://github.com/mbenford/ngTagsInput/blob/master/CHANGELOG.md#features
I could not find this option in the release 2.3.0, but at least they have enabled the regular disabled attribute.
What I have done to hide the remove button and the "Add a tag" input box, was to add a couple of rules in the CSS.
tags-input[disabled] .remove-button {
display: none;
}
tags-input[disabled] input.input {
display: none;
}
Probably there is a better way to do it, this was the fastest I could find.
I want to use jQuery ui-icon-close instead of ui-icon-cancel. So I go to the fileupload.js file in the primefaces jar (3.3.1), change the reference to ui-icon-cancel to ui-icon-close (line#2082, upload template). But it doesn't work. Any idea? Thanks.
I found an easier way to solve this problem:
I added an id to my fileupload control:
<p:fileUpload id="related_file" ..../>
Then in my css, I add the following lines:
div[id*=related_file] .ui-icon-cancel{
background-position: -96px -128px !important;
}
This works and the cancel button ends up using the ui-icon-closeThick icon.
But I would still like to know why my original approach didn't work if anybody knows the answer. Thanks.