I have a lot of legends in one of my high charts. I found a way to render this is using the navigation option inside legends.
http://api.highcharts.com/highstock#legend.navigation
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 12,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333',
fontSize: '12px'
}
}
But the navigation has very minimal options in it.
Can i position the legend according to my need, like at the bottom of the div?
Can i have a horizontal paging scroll instead of a vertical one?
To position legend at the bottom, I added maxHeight and changed layout to horizontal (as this suits my needs best), etc:
legend: {
layout: 'horizontal',//change to horizontal
//align: 'right',//removed alignment
verticalAlign: 'bottom',
maxHeight: 50,//this was the key property to make my legend paginated
//y: 40,//remove position
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 12,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333',
fontSize: '12px'
}
}
},
Related
I have a touchable opacity element which is inside a view. In this touchable opacity I placed a text element. The problem which I am facing is that the touchable opacity width is the same as the text width without any margin between the text and the button. (see the attached photo). Here is my code:
<View style={styles.buttonWrapper}>
<TouchableOpacity
style={styles.buttonStyle}
activeOpacity={0.5}
onPress={() => someMethod()}>
<Text style={styles.buttonTextStyle}>Blah blah</Text>
</TouchableOpacity>
</View>
and my styles:
buttonStyle: {
backgroundColor: '#5CB3FF',
height: 40,
justifyContent: 'center',
borderRadius: 20,
alignItems: 'center',
},
buttonTextStyle: {
fontSize: 24,
fontWeight: 'bold',
},
buttonWrapper: {
justifyContent: 'flex-end',
margin: 15,
flexDirection: 'row',
},
I would like to have some space between the text and the button border
EDIT: I tried with the following style
buttonTextStyle: {
fontSize: 24,
margin: 10
},
but it still doesnt leave any space
what about ??
padding-left: 10px;
padding-right: 10px;
Use Margin to add space outside of the element
Use Padding to add space inside the element by the border
I have this piece of code that displays a tooltip when a user hovers over the question circle icon. The tooltip content can have a maximum character count of 1000. How do I set the overflow-y to scroll by modifying the tooltip in data-toggle mode?
<i class="fa fa-question-circle" data-toggle="tooltip" title="#participant.DeclineReason" data-placement="bottom"></i>
I have the code for the data toggle in the JS script but how do I modify the tooltip properties:
#this.ScriptBlock(#<script>
$(function (){
$('.pie-chart').each(function () {
$(this).pieChart({
type: 'pie',
barColor: getColor($(this).attr('data-percent')),
trackColor: '#eee',
lineCap: 'round',
lineWidth: 5,
rotate: 0,
size: 145
});
$(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');
});
$('.pie-chart-notparticipating').each(function () {
$(this).pieChart({
type: 'pie',
barColor: getContrastColor($(this).attr('data-percent')),
trackColor: '#eee',
lineCap: 'round',
lineWidth: 5,
rotate: 0,
size: 145,
});
$(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');
});
$('[data-toggle="tooltip"]').tooltip(); <-------------//this line here
});
Give max-height and height to a class
.tooltip{
max-height:50px;
height:100px;
overflow-y:scroll;
}
Can’t add a comment as I as I don’t have the rep, but a better solution would be to use auto rather than scroll.
.tooltip {
max-height: 80px;
overflow-y: auto; }
auto doesn’t show a scrollbar when the content doesn't need to scroll.
I have this problem with my scrollbar that's overriding my header, is there some CSS property I can use to move the scrollbar "on-top" of my header? I have a transparent background which I thought would do the job.
Basically, how can I make my scrollbar hover above the header, instead of pushing it to the left?
As you see in the pic, the scrollbar is taking over the full width of the header.
Here is my scrollbar CSS:
'#global': {
'*': {
'scrollbar-width': 'thin',
}
,
'*::-webkit-scrollbar': {
width: '1rem', height: '1rem',
}
,
'*::-webkit-scrollbar-thumb': {
backgroundColor: '#d6dee1', borderRadius: '20px', border: "6px solid transparent", backgroundClip: 'content-box',
}
,
'*::-webkit-scrollbar-thumb:hover': {
backgroundColor: '#a8bbbf'
}
,
'*::-webkit-scrollbar-track': {
backgroundColor: 'transparent',
}
}
You can add a margin-top for the webkit-scrollbar-track :
'*::-webkit-scrollbar-track': {
backgroundColor: 'transparent';
margin-top: 10px;
}
This post explains it pretty good: Change scrollbar height
EDIT:
This post has a very similar problem:
How to get a scrollbar in a div with fixed header and footer?
The problem there was solved by fixing the header.
I need to center a google line chart.
The problem is, I cannot use align = "center" because it causes my tooltip hover to lag behind, I'm not sure why.
I found a way to center the chart in the inspector by removing position: relative two divs deep in my chart div.
I thought to override this with
#electricalLineChart div div{
position: static!important
}
But it ignores this code even with !important
I haven't found anything in the documentation that addresses positioning. I tried using legend just for kicks but it doesn't seem to do anything.
Here is my chart code:
// line chart
var linechart1 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'electricalLineChart',
dataTable: joinedData,
options: {
colors: ['#4DC3FA', '#185875'],
animation: {
duration: 1000,
easing: 'out',
},
width: 800,
height: 500,
legend: { position: 'static'},
title: 'Line Chart',
explorer: {},
hAxis: {
title: 'Month'
},
vAxis: {
format: formatPattern
//title: 'Amount Billed ($), Consumption (kWh)',
}
},
});
RELEVENT HTML:
<div style="overflow-x:auto;">
<table class="container">
<tbody id="electrical-tables">
<tr id="odd-cells">
<td>
<div id="electricalLineChart"></div>
</td>
</tr>
.... other rows removed for clarity
</tbody>
</table>
</div>
RELEVENT CSS:
#electricalLineChart, #Request_line_chart1{
width: 80%;
margin: auto;
}
Essentially, the third div down in the image with dir= "ltr" needs to be position: static not position: relative.
the problem, <div> elements are block elements, which means they expand the total width of their parent element.
even though the chart does not take up the entire width,
the <div> still expands to the width of the parent.
to prevent this behavior, add the following css to the <div>,
which will allow it to be centered...
display: inline-block;
e.g.
#electricalLineChart, #Request_line_chart1{
width: 80%;
margin: auto;
display: inline-block;
}
Hi i have used four div's in this page. if i click one div then it will shows its content by shrinking other divs into 10%.
click here
My problem is, when i click about div then technology and protection divs breaks down to the page and come back.
i want to animate without breaking of that div.
here is my code following for about div click,
//ABOUT CLICK STARTS HERE
$("#about").click(function()
{
$('#about-con').css({'display': 'block', 'width': '45%', 'right': '30%'});
$('#technology-con').css({'display': 'none', 'width': '', 'right': ''});
$('#protection-con').css({'display': 'none', 'width': '', 'right': ''});
$('#distribution-con').css({'display': 'none', 'width': '', 'right': ''});
$("#distribution").animate({'width': '10%', 'float': 'left', 'margin-left': '45%'}, 800);
$('#technology').animate({'width': '10%', 'float': 'left','margin-left': ''}, 800);
$('#protection').animate({'width': '10%', 'float': 'left','margin-left': '-17px'}, 800);
$("#about").css({'width': '25%','float': 'left','margin-left': ''},800);
}); //END OF ABOUT CLICK
css:
#about{
height: 500px;
background-color: red;
cursor: pointer;
width: 25%;
z-index: 5;
}