I am trying to achieve the transparent color of the area with only borders in spite of color fill for a donut graph. I am using nvd3 with angularJS, but unable to achieve that. Any suggestions on this as how to do this.
If there is any library - which is capable of doing so, please suggest.
Image for reference
The problem is the style set in nv.d3.css.
Add this style after including nv.d3.css
.nvd3.nv-pie path {
stroke: inherit;
stroke-width: 1px;
stroke-opacity: 1;
fill: white;
}
If you only want this to apply this to a particular pie chart add the id to the style selector.
Related
I'm trying to add a label (title) inside the border of my container. Although there are many implementations of input fields with this feature, I haven't found any for normal containers. Here's a screenshot of what I'm referring to:
I considered adding a background to the text, but since the container's background is different from the background behind it, this won't work as the colors will clash. Does anyone have any ideas on how to achieve this in React Native?
I haven't implemented this in react-native so I can't say if this will work for you, but I have done this in a web app before using a linear-gradient background on the label with a little padding-left and padding-right:
label {
background-image: linear-gradient(transparent 50%, #666 50%);
padding-left: 3px;
padding-right: 3px;
}
The hex value would be the background color of your input.
I'm new to React and wanted to ask what's the cleanest way to implement a background design like this. I want to know how you could change the background to blue and have the images overlap into the white area or the rings in the corners. So what is the best approach? And I don't want to use a background image
Background I want to implement
position: fixed;
background: "your image or some colors";
width: 100%;
height: 100vh;
Other contents should appear accordingly if you apply proper z-index
There are several options.
You can add !important behind the code that wnna be overwrite.
add z-index for the each element. note : the higher z-index number of the element, it will be place at the top.
in-line style. where you can add tag style={{ your style here}} within your element. example
<div style={{z-index : 10, backgroundImage : black}} > Text here </div>
manual CSS with tag backgroud-image.
I am using Apex charts in the react project, I have implemented a time series chart there I am not able to decrease the "thickness of a grid line" in the line chart.
Grid lines
Can anyone help?
I didn't find any standard ones. With css:
.apexcharts-gridline {
stroke-width: 2px;
}
default value 1px
In Angular js ui rid, how can I remove vertical and horizontal scrollbars ?
And also for each column heading I am getting a little carrot icon by default, which shows sort ascend, sort descent, Hide column. I want to remove this also from my column headings.
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableSorting : false,
enableColumnMenus : false;
Good answer from #Asqan answering the first part of your question. For the second part:
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
I'm thinking you mean you want the look in this plunker I created.
You can solve these css issues in one of two general ways.
1) Customize the ui-grid css
2) Leave the original ui-grid css then override it in your own css file
I've shows the first option to solve your "stripped" issue and the second option to implement your desired border. I have done both for example only so you can see both options - I recommend choosing and using consistently one method or the other.
The ui-grid sets the ".table-striped" look to which you are referring in the css. You can override this either in you own css file or using the customizer tool and setting the #rowcoloreven and #rowcolorodd fields to the hex code for white #ffffff. This will update the ui-grid css to contain the below:
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: #ffffff;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #ffffff;
}
For ".table-bordered" see specifically in the style.css file these added lines
.ui-grid-cell {
border-style: solid;
border-bottom: 1px #ff0000;
}
I have read a few questions here and here on this on StackOverflow but nothing seems to help with my situation.
I want to set the background color and border of a textfield dynamically.
My textfield looks like this, but the background is still not changed :
This is because of an image in the background that gives a shading effect. So I try and remove it in the CSS using background-image:none; and background:none; :
.invalid-component {
background-color : #f4f777;
border: 2px dotted #ffee27; //works!!
background-image:none;
background:none;
}
This still has no effect, the image is not removed and the background color does not change. Any help?
Im taking a guess here and going for ExtJS 4.2.1 with Classic theme.
So just change your CSS to
.invalid-component {
background : #f4f777 !important;
border: 2px dotted #ffee27; //works!!
}