How to properly align Kivy/KivyMD widgets - kivy

I developed a GUI with KivyMD. It consists of eight box layout arranged vertically in another Box Layout. I started adding checkbox, labels and DropDownItem. Everything appears aligned except for the DropDownItem in the second row. I tried with pos_hint but I cannot move it along the x axis. I would like that the DropDownItem begins where the first checkbox of row1 begins.
Here is the full Kivy kv code:
<InitializeComponent>:
orientation: 'vertical'
padding: 20
MDBoxLayout:
MDLabel:
text: 'row 1'
MDCheckbox:
MDLabel:
text: 'Item 1'
MDCheckbox:
MDLabel:
text: 'Item 2'
MDCheckbox:
MDLabel:
text: 'Item 3'
MDCheckbox:
MDLabel:
text: 'Item 4'
Widget:
size_hint_x: None
width: myCombo.width
Widget:
size_hint_x: None
width: myCombo.width
MDBoxLayout:
MDLabel:
text: 'row 2___________'
MDDropDownItem:
text: 'select'
pos_hint: {"left":1, "center_y":0.5}
Widget:
Widget:
Widget:
Widget:
Widget:
Widget:
Widget:
MDDropDownItem:
id: myCombo
text: 'select'
pos_hint: {"center_y":0.5}
MDDropDownItem:
id: myCombo
text: 'select'
pos_hint: {"center_y":0.5}
MDBoxLayout:
MDLabel:
text: 'row____3'
MDCheckbox:
MDLabel:
text: 'Item 5'
MDCheckbox:
MDLabel:
text: 'Item 6'
MDCheckbox:
MDLabel:
text: 'Item 7'
Widget:
Widget:
MDDropDownItem:
text: 'select'
pos_hint: {"center_y":0.5}
MDDropDownItem:
text: 'select'
pos_hint: {"center_y":0.5}
MDBoxLayout:
MDLabel:
text: 'row____4_____'
MDCheckbox:
MDLabel:
text: 'Item 8'
Widget:
Widget:
Widget:
Widget:
Widget:
Widget:
MDDropDownItem:
text: 'select'
pos_hint: {"center_y":0.5}
MDDropDownItem:
text: 'select'
pos_hint: {"center_y":0.5}
MDBoxLayout:
MDLabel:
text: 'row____5'
MDCheckbox:
MDLabel:
text: 'Item 9'
MDCheckbox:
MDLabel:
text: 'Item 10'
Widget:
Widget:
Widget:
Widget:
MDDropDownItem:
text: 'select'
pos_hint: {"center_y":0.5}
MDDropDownItem:
text: 'select'
pos_hint: {"center_y":0.5}
MDBoxLayout:
MDLabel:
text: 'row____6'
MDCheckbox:
MDLabel:
text: 'Item 11'
Widget:
Widget:
Widget:
Widget:
Widget:
Widget:
MDDropDownItem:
text: 'select'
pos_hint: {"center_y":0.5}
MDDropDownItem:
text: 'select'
pos_hint: {"center_y":0.5}
MDBoxLayout:
MDLabel:
text: 'row____7_______'
MDCheckbox:
MDLabel:
text: 'Item 12'
Widget:
Widget:
Widget:
Widget:
Widget:
Widget:
MDDropDownItem:
text: 'select'
pos_hint: {"center_y":0.5}
MDDropDownItem:
text: 'select'
pos_hint: {"center_y":0.5}
MDBoxLayout:
MDRaisedButton:
text: 'BUTTON'
size_hint: 1, None
pos_hint: {"center_x":0.5, "center_y":0.5}
Any tip to keep the widgets aligned?

Related

Use Material UI theme attributes for styling highcharts - React

I have been using Material ui themes for styled components in React. Now, We have a requirement in our application to use highcharts. But I still wanted to retain the same themeing for highcharts as well. Is there a way we could integrate Material UI theme to style highcharts chart? I did google this a lot before finally deciding to raise the question here. I know that highcharts provide their own theme. But I do not want to make the code messier with multiple themes. Is there a way to achieve this in a cleaner way? Any help would be much appreciated. Thanks in advance!
Highcharts have a possibility to set themes by Highcharts.setOptions to create schemate fit to you. That you can see there are specific sets for charts elements for that material UI it's not changing charts looks.
https://www.highcharts.com/docs/chart-design-and-style/themes#creating-your-own-theme
// set the theme
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
gridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
alternateGridColor: null,
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
credits: {
style: {
right: '10px'
}
},
labels: {
style: {
color: '#99b'
}
}
});

How to select user type letters in Search Delegate?

I developed search using search delegate. when user search I bold user type letters. But it's working only if user start to type with beginning otherwise bold letters wrong.
RichText(
text: TextSpan(
text: suggestList[index].d.substring(0, query.length),
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
children: [
TextSpan(
text: suggestList[index].d.substring(query.length),
style: TextStyle(color: Colors.grey))
])),

How to make different style in same text widget?

How to apply different styles for different part of displayed text. How to do this in flutter?
Example:
Hello World
This can be achieved using RichText
RichText(
text: TextSpan(
text: 'Hello',
style: TextStyle(fontSize: 22, color: Colors.black),
children: <TextSpan>[
TextSpan(
text: 'World',
style: TextStyle(
fontSize: 24,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
),
),
]
),
),
return RichText(
text: TextSpan(
text: 'Can you ',
style: TextStyle(color: Colors.black),
children: <TextSpan>[
TextSpan(
text: 'find the',
style: TextStyle(
color: Colors.green,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.wavy,
),
recognizer: _longPressRecognizer,
),
TextSpan(text: 'secret?'),
],
),
);

How to Hide Title on BottomNavigationBarItem

Hello everyone is it possible to hide title on bottomNavigationBarItem?
My current setup is as following:
BottomNavigationBar(
iconSize: 30.0,
type: BottomNavigationBarType.fixed,
currentIndex: 0,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: new Text(""),
),
BottomNavigationBarItem(
icon: Icon(Icons.delete),
title: new Text("",),
)
],
),
Ofcourse it didn't show the title, But the icon isn't centered.

Highchart not displaying

I am creating a simple chart using highcharts. The chart seems not displaying.
Stuck at it for few hours and I could not figure out what is wrong. Is there anything I have missed out? Need some help here.
xhtml
<script type="text/javascript">
function renderChart(divId, chartType, chartTitle, chartData, categories){
var options = createOption(divId, chartType, chartTitle, categories);
options.series = $.parseJSON(chartData);
var chart = new Highcharts.Chart(options);
}
function createOption(divId, chartType, chartTitle, categories){
var options = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1,
renderTo: divId,
type: chartType
},
title: {
text: 'JVM Heap Memory Usage Chart',
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
text: 'Source: http://java-bytes.blogspot.com',
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
ridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
categories: $.parseJSON(categories),
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
},
formatter: function() {
return this.value;
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
},
text: 'Heap Memory Usage'
},
labels: {
formatter: function() {
return this.value +'MB';
},
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
tooltip: {
formatter: function() {
return ''+ this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' MB';
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
labels: {
style: {
color: '#99b'
}
},
series: []
};
return options;
};
</script>
<h1>Highcharts</h1>
<p:commandButton oncomplete="renderChart('container','area','Sample Chart','${pc_Test.chartData}', '${pc_Test.categories}');" action="#{pc_Test.loadChartData}" id="chartvalue_btn">
<div id="container" style="width: 100%; height: 500px"></div>
</p:commandButton>
java
/**
* Load Chart Data
*/
public void loadChartData() {
String _LOC = "[************loadChartData************]";
System.out.println(_LOC + "1.0");
W_test _w = getW_test();
setChartData("[{name:'Heap Size',data:[1024]},{name:'Used Heap',data:[942]}]");
setCategories("['14:31:12']");
}

Resources