qml Surface3D draw random lines to origin point - qt

I want to to draw 3d surface using some points, I use Surface3D to draw that surface.
The problem is Surface3D always create random lines from beginning and ending of surface to the origin point (0,0,0), however the origin point doesn't exist in my cloud points.
For example, I run this code
main.qml
import QtQuick 2.1
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0
import QtDataVisualization 1.3
Rectangle {
id: mainview
width: 1024
height: 768
color: surfacePlot.theme.windowColor
Data {
id: surfaceData
}
Item {
id: surfaceView
width: mainview.width
height: mainview.height
anchors.top: mainview.top
anchors.left: mainview.left
ColorGradient {
id: surfaceGradient
ColorGradientStop { position: 0.0; color: "darkslategray" }
ColorGradientStop { id: middleGradient; position: 0.25; color: "peru" }
ColorGradientStop { position: 1.0; color: "red" }
}
Surface3D {
id: surfacePlot
width: surfaceView.width
height: surfaceView.height
//! [7]
theme: Theme3D {
type: Theme3D.ThemeStoneMoss
font.family: "STCaiyun"
font.pointSize: 35
colorStyle: Theme3D.ColorStyleRangeGradient
baseGradients: [surfaceGradient]
}
//! [7]
shadowQuality: AbstractGraph3D.ShadowQualityNone
selectionMode: AbstractGraph3D.SelectionSlice | AbstractGraph3D.SelectionItemAndRow
scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeft
axisX.min: 0
axisX.max: 500
axisY.min: 20
axisY.max: 300
axisZ.min: 0
axisZ.max: 500
axisX.segmentCount: 10
axisX.subSegmentCount: 2
axisX.labelFormat: "%i"
axisZ.segmentCount: 10
axisZ.subSegmentCount: 2
axisZ.labelFormat: "%i"
axisY.segmentCount: 5
axisY.subSegmentCount: 2
axisY.labelFormat: "%i"
axisY.title: "Height"
axisX.title: "Latitude"
axisZ.title: "Longitude"
//! [5]
Surface3DSeries {
id: surfaceSeries
flatShadingEnabled: false
drawMode: Surface3DSeries.DrawSurface
ItemModelSurfaceDataProxy {
itemModel: surfaceData.model
rowRole: "longitude"
columnRole: "latitude"
yPosRole: "height"
}
}
}
}
}
Data.qml
import QtQuick 2.1
Item {
property alias model: dataModel
//! [0]
ListModel {
id: dataModel
ListElement{ longitude: 50; latitude: 200; height: 50; }
ListElement{ longitude: 50; latitude: 210; height: 53; }
ListElement{ longitude: 50; latitude: 220; height: 50; }
ListElement{ longitude: 50; latitude: 230; height: 51; }
ListElement{ longitude: 50; latitude: 240; height: 52; }
ListElement{ longitude: 50; latitude: 250; height: 54; }
ListElement{ longitude: 50; latitude: 260; height: 54; }
ListElement{ longitude: 50; latitude: 270; height: 51; }
ListElement{ longitude: 50; latitude: 280; height: 51; }
ListElement{ longitude: 50; latitude: 290; height: 51; }
ListElement{ longitude: 50; latitude: 300; height: 52; }
ListElement{ longitude: 50; latitude: 310; height: 50; }
ListElement{ longitude: 50; latitude: 320; height: 54; }
ListElement{ longitude: 50; latitude: 330; height: 54; }
ListElement{ longitude: 50; latitude: 340; height: 50; }
ListElement{ longitude: 50; latitude: 350; height: 54; }
ListElement{ longitude: 50; latitude: 360; height: 52; }
ListElement{ longitude: 50; latitude: 370; height: 50; }
ListElement{ longitude: 50; latitude: 380; height: 53; }
ListElement{ longitude: 50; latitude: 390; height: 54; }
ListElement{ longitude: 60; latitude: 400; height: 50; }
ListElement{ longitude: 60; latitude: 390; height: 50; }
ListElement{ longitude: 60; latitude: 380; height: 50; }
ListElement{ longitude: 60; latitude: 370; height: 51; }
ListElement{ longitude: 60; latitude: 360; height: 53; }
ListElement{ longitude: 60; latitude: 350; height: 52; }
ListElement{ longitude: 60; latitude: 340; height: 51; }
ListElement{ longitude: 60; latitude: 330; height: 53; }
ListElement{ longitude: 60; latitude: 320; height: 54; }
ListElement{ longitude: 60; latitude: 310; height: 51; }
ListElement{ longitude: 60; latitude: 300; height: 54; }
ListElement{ longitude: 60; latitude: 290; height: 53; }
ListElement{ longitude: 60; latitude: 280; height: 53; }
ListElement{ longitude: 60; latitude: 270; height: 52; }
ListElement{ longitude: 60; latitude: 260; height: 51; }
ListElement{ longitude: 60; latitude: 250; height: 54; }
ListElement{ longitude: 60; latitude: 240; height: 53; }
ListElement{ longitude: 60; latitude: 230; height: 51; }
ListElement{ longitude: 60; latitude: 220; height: 51; }
ListElement{ longitude: 60; latitude: 210; height: 54; }
ListElement{ longitude: 60; latitude: 200; height: 54; }
ListElement{ longitude: 60; latitude: 190; height: 50; }
ListElement{ longitude: 60; latitude: 180; height: 54; }
ListElement{ longitude: 60; latitude: 170; height: 50; }
ListElement{ longitude: 60; latitude: 160; height: 54; }
ListElement{ longitude: 60; latitude: 150; height: 53; }
ListElement{ longitude: 60; latitude: 140; height: 54; }
ListElement{ longitude: 60; latitude: 130; height: 50; }
ListElement{ longitude: 60; latitude: 120; height: 52; }
ListElement{ longitude: 60; latitude: 110; height: 50; }
ListElement{ longitude: 60; latitude: 100; height: 52; }
ListElement{ longitude: 60; latitude: 90; height: 50; }
ListElement{ longitude: 60; latitude: 80; height: 50; }
ListElement{ longitude: 60; latitude: 70; height: 51; }
ListElement{ longitude: 60; latitude: 60; height: 54; }
ListElement{ longitude: 60; latitude: 50; height: 52; }
ListElement{ longitude: 60; latitude: 40; height: 53; }
ListElement{ longitude: 60; latitude: 30; height: 54; }
ListElement{ longitude: 60; latitude: 20; height: 50; }
ListElement{ longitude: 60; latitude: 10; height: 50; }
ListElement{ longitude: 70; latitude: 0; height: 51; }
ListElement{ longitude: 70; latitude: 10; height: 52; }
ListElement{ longitude: 70; latitude: 20; height: 54; }
ListElement{ longitude: 70; latitude: 30; height: 52; }
ListElement{ longitude: 70; latitude: 40; height: 54; }
ListElement{ longitude: 70; latitude: 50; height: 51; }
ListElement{ longitude: 70; latitude: 60; height: 53; }
ListElement{ longitude: 70; latitude: 70; height: 50; }
ListElement{ longitude: 70; latitude: 80; height: 53; }
ListElement{ longitude: 70; latitude: 90; height: 54; }
ListElement{ longitude: 70; latitude: 100; height: 54; }
ListElement{ longitude: 70; latitude: 110; height: 54; }
ListElement{ longitude: 70; latitude: 120; height: 53; }
ListElement{ longitude: 70; latitude: 130; height: 53; }
ListElement{ longitude: 70; latitude: 140; height: 52; }
ListElement{ longitude: 70; latitude: 150; height: 52; }
ListElement{ longitude: 70; latitude: 160; height: 53; }
ListElement{ longitude: 70; latitude: 170; height: 52; }
ListElement{ longitude: 70; latitude: 180; height: 50; }
ListElement{ longitude: 70; latitude: 190; height: 51; }
ListElement{ longitude: 70; latitude: 200; height: 53; }
ListElement{ longitude: 70; latitude: 210; height: 54; }
ListElement{ longitude: 70; latitude: 220; height: 50; }
ListElement{ longitude: 70; latitude: 230; height: 51; }
ListElement{ longitude: 70; latitude: 240; height: 50; }
ListElement{ longitude: 70; latitude: 250; height: 54; }
ListElement{ longitude: 70; latitude: 260; height: 50; }
ListElement{ longitude: 70; latitude: 270; height: 50; }
ListElement{ longitude: 70; latitude: 280; height: 51; }
ListElement{ longitude: 70; latitude: 290; height: 53; }
ListElement{ longitude: 70; latitude: 300; height: 50; }
ListElement{ longitude: 70; latitude: 310; height: 53; }
ListElement{ longitude: 70; latitude: 320; height: 52; }
ListElement{ longitude: 70; latitude: 330; height: 51; }
ListElement{ longitude: 70; latitude: 340; height: 53; }
ListElement{ longitude: 70; latitude: 350; height: 51; }
ListElement{ longitude: 70; latitude: 360; height: 52; }
ListElement{ longitude: 70; latitude: 370; height: 51; }
ListElement{ longitude: 70; latitude: 380; height: 53; }
ListElement{ longitude: 70; latitude: 390; height: 54; }
ListElement{ longitude: 80; latitude: 400; height: 54; }
ListElement{ longitude: 80; latitude: 390; height: 52; }
ListElement{ longitude: 80; latitude: 380; height: 53; }
ListElement{ longitude: 80; latitude: 370; height: 51; }
ListElement{ longitude: 80; latitude: 360; height: 50; }
ListElement{ longitude: 80; latitude: 350; height: 52; }
ListElement{ longitude: 80; latitude: 340; height: 53; }
ListElement{ longitude: 80; latitude: 330; height: 52; }
ListElement{ longitude: 80; latitude: 320; height: 51; }
ListElement{ longitude: 80; latitude: 310; height: 53; }
ListElement{ longitude: 80; latitude: 300; height: 54; }
ListElement{ longitude: 80; latitude: 290; height: 53; }
ListElement{ longitude: 80; latitude: 280; height: 52; }
ListElement{ longitude: 80; latitude: 270; height: 54; }
ListElement{ longitude: 80; latitude: 260; height: 53; }
ListElement{ longitude: 80; latitude: 250; height: 50; }
ListElement{ longitude: 80; latitude: 240; height: 54; }
ListElement{ longitude: 80; latitude: 230; height: 50; }
ListElement{ longitude: 80; latitude: 220; height: 50; }
ListElement{ longitude: 80; latitude: 210; height: 52; }
ListElement{ longitude: 80; latitude: 200; height: 50; }
ListElement{ longitude: 80; latitude: 190; height: 50; }
ListElement{ longitude: 80; latitude: 180; height: 50; }
ListElement{ longitude: 80; latitude: 170; height: 51; }
ListElement{ longitude: 80; latitude: 160; height: 52; }
ListElement{ longitude: 80; latitude: 150; height: 53; }
ListElement{ longitude: 80; latitude: 140; height: 50; }
ListElement{ longitude: 80; latitude: 130; height: 51; }
ListElement{ longitude: 80; latitude: 120; height: 50; }
ListElement{ longitude: 80; latitude: 110; height: 52; }
ListElement{ longitude: 80; latitude: 100; height: 53; }
ListElement{ longitude: 80; latitude: 90; height: 54; }
ListElement{ longitude: 80; latitude: 80; height: 53; }
ListElement{ longitude: 80; latitude: 70; height: 50; }
ListElement{ longitude: 80; latitude: 60; height: 54; }
ListElement{ longitude: 80; latitude: 50; height: 53; }
ListElement{ longitude: 80; latitude: 40; height: 52; }
ListElement{ longitude: 80; latitude: 30; height: 50; }
ListElement{ longitude: 80; latitude: 20; height: 54; }
ListElement{ longitude: 80; latitude: 10; height: 50; }
ListElement{ longitude: 90; latitude: 0; height: 53; }
ListElement{ longitude: 90; latitude: 10; height: 52; }
ListElement{ longitude: 90; latitude: 20; height: 52; }
ListElement{ longitude: 90; latitude: 30; height: 53; }
ListElement{ longitude: 90; latitude: 40; height: 54; }
ListElement{ longitude: 90; latitude: 50; height: 52; }
ListElement{ longitude: 90; latitude: 60; height: 52; }
ListElement{ longitude: 90; latitude: 70; height: 54; }
ListElement{ longitude: 90; latitude: 80; height: 50; }
}
}
I suppose that a thin surface should be rendered, but the following surface is rendered
Result of running the above code, There are random lines to the origin point
Can anyone explain why there are lines between edges of surface and origin point and how can I eliminate them ?
Thanks!


after a few tries I figured out that ListModel elements to plot Surface3D should be defined like this, for example:
SurfaceData.qml
import QtQuick 2.1
ListModel {
ListElement{ xPos: -73.85896; zPos: 45.62104; yPos: 36.00793 }
ListElement{ xPos: -73.85875; zPos: 45.62104; yPos: 35.85623 }
ListElement{ xPos: -73.85854; zPos: 45.62104; yPos: 35.80596 }
ListElement{ xPos: -73.85833; zPos: 45.62104; yPos: 35.86737 }
ListElement{ xPos: -73.85813; zPos: 45.62104; yPos: 36.19770 }
ListElement{ xPos: -73.85792; zPos: 45.62104; yPos: 36.59485 }
ListElement{ xPos: -73.85771; zPos: 45.62104; yPos: 37.05033 }
ListElement{ xPos: -73.85750; zPos: 45.62104; yPos: 37.49552 }
ListElement{ xPos: -73.85729; zPos: 45.62104; yPos: 37.85025 }
ListElement{ xPos: -73.85708; zPos: 45.62104; yPos: 38.12154 }
ListElement{ xPos: -73.85896; zPos: 45.62125; yPos: 36.01458 }
ListElement{ xPos: -73.85875; zPos: 45.62125; yPos: 35.95255 }
ListElement{ xPos: -73.85854; zPos: 45.62125; yPos: 35.95918 }
ListElement{ xPos: -73.85833; zPos: 45.62125; yPos: 36.04505 }
ListElement{ xPos: -73.85813; zPos: 45.62125; yPos: 36.35229 }
ListElement{ xPos: -73.85792; zPos: 45.62125; yPos: 36.71176 }
ListElement{ xPos: -73.85771; zPos: 45.62125; yPos: 37.11597 }
ListElement{ xPos: -73.85750; zPos: 45.62125; yPos: 37.49729 }
ListElement{ xPos: -73.85729; zPos: 45.62125; yPos: 37.81175 }
ListElement{ xPos: -73.85708; zPos: 45.62125; yPos: 38.06440 }
ListElement{ xPos: -73.85896; zPos: 45.62146; yPos: 36.32553 }
ListElement{ xPos: -73.85875; zPos: 45.62146; yPos: 36.33961 }
ListElement{ xPos: -73.85854; zPos: 45.62146; yPos: 36.38792 }
ListElement{ xPos: -73.85833; zPos: 45.62146; yPos: 36.48003 }
ListElement{ xPos: -73.85813; zPos: 45.62146; yPos: 36.70997 }
ListElement{ xPos: -73.85792; zPos: 45.62146; yPos: 36.97702 }
ListElement{ xPos: -73.85771; zPos: 45.62146; yPos: 37.27619 }
ListElement{ xPos: -73.85750; zPos: 45.62146; yPos: 37.55237 }
ListElement{ xPos: -73.85729; zPos: 45.62146; yPos: 37.79258 }
ListElement{ xPos: -73.85708; zPos: 45.62146; yPos: 37.99829 }
ListElement{ xPos: -73.85896; zPos: 45.62167; yPos: 36.78084 }
ListElement{ xPos: -73.85875; zPos: 45.62167; yPos: 36.86065 }
ListElement{ xPos: -73.85854; zPos: 45.62167; yPos: 36.93751 }
ListElement{ xPos: -73.85833; zPos: 45.62167; yPos: 37.01362 }
ListElement{ xPos: -73.85813; zPos: 45.62167; yPos: 37.14435 }
ListElement{ xPos: -73.85792; zPos: 45.62167; yPos: 37.29476 }
ListElement{ xPos: -73.85771; zPos: 45.62167; yPos: 37.46340 }
ListElement{ xPos: -73.85750; zPos: 45.62167; yPos: 37.61312 }
ListElement{ xPos: -73.85729; zPos: 45.62167; yPos: 37.75639 }
ListElement{ xPos: -73.85708; zPos: 45.62167; yPos: 37.89418 }
ListElement{ xPos: -73.85896; zPos: 45.62186; yPos: 37.21138 }
ListElement{ xPos: -73.85875; zPos: 45.62186; yPos: 37.34629 }
ListElement{ xPos: -73.85854; zPos: 45.62186; yPos: 37.44530 }
ListElement{ xPos: -73.85833; zPos: 45.62186; yPos: 37.50286 }
ListElement{ xPos: -73.85813; zPos: 45.62186; yPos: 37.53003 }
ListElement{ xPos: -73.85792; zPos: 45.62186; yPos: 37.55219 }
ListElement{ xPos: -73.85771; zPos: 45.62186; yPos: 37.57159 }
ListElement{ xPos: -73.85750; zPos: 45.62186; yPos: 37.61607 }
ListElement{ xPos: -73.85729; zPos: 45.62186; yPos: 37.68665 }
ListElement{ xPos: -73.85708; zPos: 45.62186; yPos: 37.78460 }
ListElement{ xPos: -73.85896; zPos: 45.62208; yPos: 37.55103 }
ListElement{ xPos: -73.85875; zPos: 45.62208; yPos: 37.72618 }
ListElement{ xPos: -73.85854; zPos: 45.62208; yPos: 37.83209 }
ListElement{ xPos: -73.85833; zPos: 45.62208; yPos: 37.84795 }
ListElement{ xPos: -73.85813; zPos: 45.62208; yPos: 37.77734 }
ListElement{ xPos: -73.85792; zPos: 45.62208; yPos: 37.69717 }
ListElement{ xPos: -73.85771; zPos: 45.62208; yPos: 37.61931 }
ListElement{ xPos: -73.85750; zPos: 45.62208; yPos: 37.61611 }
ListElement{ xPos: -73.85729; zPos: 45.62208; yPos: 37.66154 }
ListElement{ xPos: -73.85708; zPos: 45.62208; yPos: 37.75663 }
ListElement{ xPos: -73.85896; zPos: 45.62229; yPos: 37.85260 }
ListElement{ xPos: -73.85875; zPos: 45.62229; yPos: 38.02822 }
ListElement{ xPos: -73.85854; zPos: 45.62229; yPos: 38.11202 }
ListElement{ xPos: -73.85833; zPos: 45.62229; yPos: 38.07137 }
ListElement{ xPos: -73.85813; zPos: 45.62229; yPos: 37.94499 }
ListElement{ xPos: -73.85792; zPos: 45.62229; yPos: 37.82461 }
ListElement{ xPos: -73.85771; zPos: 45.62229; yPos: 37.73309 }
ListElement{ xPos: -73.85750; zPos: 45.62229; yPos: 37.73527 }
ListElement{ xPos: -73.85729; zPos: 45.62229; yPos: 37.79184 }
ListElement{ xPos: -73.85708; zPos: 45.62229; yPos: 37.90438 }
ListElement{ xPos: -73.85896; zPos: 45.62250; yPos: 38.18437 }
ListElement{ xPos: -73.85875; zPos: 45.62250; yPos: 38.31119 }
ListElement{ xPos: -73.85854; zPos: 45.62250; yPos: 38.34892 }
ListElement{ xPos: -73.85833; zPos: 45.62250; yPos: 38.27476 }
ListElement{ xPos: -73.85813; zPos: 45.62250; yPos: 38.15377 }
ListElement{ xPos: -73.85792; zPos: 45.62250; yPos: 38.04902 }
ListElement{ xPos: -73.85771; zPos: 45.62250; yPos: 37.98370 }
ListElement{ xPos: -73.85750; zPos: 45.62250; yPos: 38.01583 }
ListElement{ xPos: -73.85729; zPos: 45.62250; yPos: 38.10371 }
ListElement{ xPos: -73.85708; zPos: 45.62250; yPos: 38.25076 }
ListElement{ xPos: -73.85896; zPos: 45.62271; yPos: 38.51958 }
ListElement{ xPos: -73.85875; zPos: 45.62271; yPos: 38.57501 }
ListElement{ xPos: -73.85854; zPos: 45.62271; yPos: 38.56699 }
ListElement{ xPos: -73.85833; zPos: 45.62271; yPos: 38.49122 }
ListElement{ xPos: -73.85813; zPos: 45.62271; yPos: 38.40864 }
ListElement{ xPos: -73.85792; zPos: 45.62271; yPos: 38.35099 }
ListElement{ xPos: -73.85771; zPos: 45.62271; yPos: 38.33998 }
ListElement{ xPos: -73.85750; zPos: 45.62271; yPos: 38.42698 }
ListElement{ xPos: -73.85729; zPos: 45.62271; yPos: 38.55856 }
ListElement{ xPos: -73.85708; zPos: 45.62271; yPos: 38.73426 }
ListElement{ xPos: -73.85896; zPos: 45.62292; yPos: 38.80311 }
ListElement{ xPos: -73.85875; zPos: 45.62292; yPos: 38.80242 }
ListElement{ xPos: -73.85854; zPos: 45.62292; yPos: 38.76921 }
ListElement{ xPos: -73.85833; zPos: 45.62292; yPos: 38.71027 }
ListElement{ xPos: -73.85813; zPos: 45.62292; yPos: 38.67825 }
ListElement{ xPos: -73.85792; zPos: 45.62292; yPos: 38.68442 }
ListElement{ xPos: -73.85771; zPos: 45.62292; yPos: 38.75226 }
ListElement{ xPos: -73.85750; zPos: 45.62292; yPos: 38.89324 }
ListElement{ xPos: -73.85729; zPos: 45.62292; yPos: 39.05473 }
ListElement{ xPos: -73.85708; zPos: 45.62292; yPos: 39.22962 }
}
Result 1.
So there should be equal intervals between "blocks of data with same Z-values" (or longitude in your case). And the set of X-values should be the same in every block of the model. For example in your case:
import QtQuick 2.1
ListModel {
ListElement{ longitude: 50; latitude: 200; height: 50; }
ListElement{ longitude: 50; latitude: 210; height: 53; }
ListElement{ longitude: 50; latitude: 220; height: 50; }
ListElement{ longitude: 50; latitude: 230; height: 51; }
ListElement{ longitude: 50; latitude: 240; height: 52; }
ListElement{ longitude: 50; latitude: 250; height: 54; }
ListElement{ longitude: 50; latitude: 260; height: 54; }
ListElement{ longitude: 50; latitude: 270; height: 51; }
ListElement{ longitude: 50; latitude: 280; height: 51; }
ListElement{ longitude: 50; latitude: 290; height: 51; }
ListElement{ longitude: 50; latitude: 300; height: 52; }
ListElement{ longitude: 50; latitude: 310; height: 50; }
ListElement{ longitude: 50; latitude: 320; height: 54; }
ListElement{ longitude: 50; latitude: 330; height: 54; }
ListElement{ longitude: 50; latitude: 340; height: 50; }
ListElement{ longitude: 50; latitude: 350; height: 54; }
ListElement{ longitude: 50; latitude: 360; height: 52; }
ListElement{ longitude: 50; latitude: 370; height: 50; }
ListElement{ longitude: 50; latitude: 380; height: 53; }
ListElement{ longitude: 50; latitude: 390; height: 54; }
ListElement{ longitude: 60; latitude: 390; height: 50; }
ListElement{ longitude: 60; latitude: 380; height: 50; }
ListElement{ longitude: 60; latitude: 370; height: 51; }
ListElement{ longitude: 60; latitude: 360; height: 53; }
ListElement{ longitude: 60; latitude: 350; height: 52; }
ListElement{ longitude: 60; latitude: 340; height: 51; }
ListElement{ longitude: 60; latitude: 330; height: 53; }
ListElement{ longitude: 60; latitude: 320; height: 54; }
ListElement{ longitude: 60; latitude: 310; height: 51; }
ListElement{ longitude: 60; latitude: 300; height: 54; }
ListElement{ longitude: 60; latitude: 290; height: 53; }
ListElement{ longitude: 60; latitude: 280; height: 53; }
ListElement{ longitude: 60; latitude: 270; height: 52; }
ListElement{ longitude: 60; latitude: 260; height: 51; }
ListElement{ longitude: 60; latitude: 250; height: 54; }
ListElement{ longitude: 60; latitude: 240; height: 53; }
ListElement{ longitude: 60; latitude: 230; height: 51; }
ListElement{ longitude: 60; latitude: 220; height: 51; }
ListElement{ longitude: 60; latitude: 210; height: 54; }
ListElement{ longitude: 60; latitude: 200; height: 54; }
ListElement{ longitude: 70; latitude: 200; height: 53; }
ListElement{ longitude: 70; latitude: 210; height: 54; }
ListElement{ longitude: 70; latitude: 220; height: 50; }
ListElement{ longitude: 70; latitude: 230; height: 51; }
ListElement{ longitude: 70; latitude: 240; height: 50; }
ListElement{ longitude: 70; latitude: 250; height: 54; }
ListElement{ longitude: 70; latitude: 260; height: 50; }
ListElement{ longitude: 70; latitude: 270; height: 50; }
ListElement{ longitude: 70; latitude: 280; height: 51; }
ListElement{ longitude: 70; latitude: 290; height: 53; }
ListElement{ longitude: 70; latitude: 300; height: 50; }
ListElement{ longitude: 70; latitude: 310; height: 53; }
ListElement{ longitude: 70; latitude: 320; height: 52; }
ListElement{ longitude: 70; latitude: 330; height: 51; }
ListElement{ longitude: 70; latitude: 340; height: 53; }
ListElement{ longitude: 70; latitude: 350; height: 51; }
ListElement{ longitude: 70; latitude: 360; height: 52; }
ListElement{ longitude: 70; latitude: 370; height: 51; }
ListElement{ longitude: 70; latitude: 380; height: 53; }
ListElement{ longitude: 70; latitude: 390; height: 54; }
ListElement{ longitude: 80; latitude: 390; height: 52; }
ListElement{ longitude: 80; latitude: 380; height: 53; }
ListElement{ longitude: 80; latitude: 370; height: 51; }
ListElement{ longitude: 80; latitude: 360; height: 50; }
ListElement{ longitude: 80; latitude: 350; height: 52; }
ListElement{ longitude: 80; latitude: 340; height: 53; }
ListElement{ longitude: 80; latitude: 330; height: 52; }
ListElement{ longitude: 80; latitude: 320; height: 51; }
ListElement{ longitude: 80; latitude: 310; height: 53; }
ListElement{ longitude: 80; latitude: 300; height: 54; }
ListElement{ longitude: 80; latitude: 290; height: 53; }
ListElement{ longitude: 80; latitude: 280; height: 52; }
ListElement{ longitude: 80; latitude: 270; height: 54; }
ListElement{ longitude: 80; latitude: 260; height: 53; }
ListElement{ longitude: 80; latitude: 250; height: 50; }
ListElement{ longitude: 80; latitude: 240; height: 54; }
ListElement{ longitude: 80; latitude: 230; height: 50; }
ListElement{ longitude: 80; latitude: 220; height: 50; }
ListElement{ longitude: 80; latitude: 210; height: 52; }
ListElement{ longitude: 80; latitude: 200; height: 50; }
}
Result 2.
So if the "same Z blocks of data" are not equal then Qt reduces the unknown data in incomplete blocks to (0;0;0), which leads to strange behavior.
More info about QAbstractItemModel.
Also here and here you can find useful information about situation when your ItemModel's data are taken at irregular intervals.

Related

Clip element to right when changing screen size

I have this element that is on my login screen that I would like when the screen changes size, it holds position. Only today I test on different screen sizes, it moves. How can I make him get stuck in this position?
My code:
export const ContainerLogin = styled(Grid).attrs({
item: true,
})`
background-color: var(--white-100);
position: absolute;
z-index: 2;
left: 1242px;
width: 520px;
height: 528px;
top: 226px;
border-radius: 4px;
`;
Update:
Code:
return (
<ContainerMain >
<ContainerImagem >
<img src={backgroundFull} style={{ position: 'fixed', minWidth: '100%', minHeight: '100%', backgroundSize: 'cover', backgroundPosition: 'center', bottom: 0, left: 0, top: 0, right: 0 }} />
</ContainerImagem>
<ContainerLogin>
<motion.div
>
{children}
</motion.div>
</ContainerLogin>
</ContainerMain>
);
};
Style:
export const ContainerMain = styled(Grid).attrs({
container: true,
})`
align-items: center;
overflow: hidden;
`;
export const ContainerImagem = styled(Grid).attrs({
item: true,
})`
align-items: center;
display: flex;
`;
export const ContainerLogin = styled(Grid).attrs({
item: true,
})`
/* position: fixed; */
background-color: var(--white-100);
position: fixed;
z-index: 2;
right: 0;
width: 520px;
height: 528px;
top: 226px;
border-radius: 4px;
/* z-index: 2;
left: 1242px;
width: 520px;
height: 528px;
top: 226px;
border-radius: 4px; */
`;
Imagem result:
image example
My screen in this image is zoomed to 80%

if you go into full page view and resize the window.it will always be on the right side of the window
img {
width: 60vw;
}
.rightelem {
background-color: cyan;
position: absolute;
z-index: 2;
right: 0;
width: 220px;
height: 228px;
top: 126px;
border-radius: 4px;
}
<div>
<img src="https://images.unsplash.com/photo-1664736607930-288b58f7e720?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80">
</div>
<div class="rightelem">
i am on the right side</div>

How to change breakpoint values in primevue/primefaces?

How can I change the default breakpoint values in primevue/primefaces ?
I mean setting values different than 576px for xs, 768px for md, 992px for lg etc.
A similar question has been asked here 3 years ago but no one answered.

After spending some time trying to come up with a solution, I've decided to go with this approach:
Import this css after you import your Primevue styles. Be sure to use
#media in the order it is provided below.
**
This will override Primevue's breakpoints
**
Lemme know if you found a better approach.
#media screen and (min-width: 0px){
.p-xs-1 {
width: 8.3333%;
}
.p-xs-2 {
width: 16.6667%;
}
.p-xs-3 {
width: 25%;
}
.p-xs-4 {
width: 33.3333%;
}
.p-xs-5 {
width: 41.6667%;
}
.p-xs-6 {
width: 50%;
}
.p-xs-7 {
width: 58.3333%;
}
.p-xs-8 {
width: 66.6667%;
}
.p-xs-9 {
width: 75%;
}
.p-xs-10 {
width: 83.3333%;
}
.p-xs-11 {
width: 91.6667%;
}
.p-xs-12 {
width: 100%;
}
}
#media screen and (min-width: 576px){
.p-sm-1 {
width: 8.3333%;
}
.p-sm-2 {
width: 16.6667%;
}
.p-sm-3 {
width: 25%;
}
.p-sm-4 {
width: 33.3333%;
}
.p-sm-5 {
width: 41.6667%;
}
.p-sm-6 {
width: 50%;
}
.p-sm-7 {
width: 58.3333%;
}
.p-sm-8 {
width: 66.6667%;
}
.p-sm-9 {
width: 75%;
}
.p-sm-10 {
width: 83.3333%;
}
.p-sm-11 {
width: 91.6667%;
}
.p-sm-12 {
width: 100%;
}
}
#media screen and (min-width: 992px){
.p-md-1 {
width: 8.3333%;
}
.p-md-2 {
width: 16.6667%;
}
.p-md-3 {
width: 25%;
}
.p-md-4 {
width: 33.3333%;
}
.p-md-5 {
width: 41.6667%;
}
.p-md-6 {
width: 50%;
}
.p-md-7 {
width: 58.3333%;
}
.p-md-8 {
width: 66.6667%;
}
.p-md-9 {
width: 75%;
}
.p-md-10 {
width: 83.3333%;
}
.p-md-11 {
width: 91.6667%;
}
.p-md-12 {
width: 100%;
}
}
#media screen and (min-width: 1200px){
.p-lg-1 {
width: 8.3333%;
}
.p-lg-2 {
width: 16.6667%;
}
.p-lg-3 {
width: 25%;
}
.p-lg-4 {
width: 33.3333%;
}
.p-lg-5 {
width: 41.6667%;
}
.p-lg-6 {
width: 50%;
}
.p-lg-7 {
width: 58.3333%;
}
.p-lg-8 {
width: 66.6667%;
}
.p-lg-9 {
width: 75%;
}
.p-lg-10 {
width: 83.3333%;
}
.p-lg-11 {
width: 91.6667%;
}
.p-lg-12 {
width: 100%;
}
}
#media screen and (min-width: 1600px){
.p-xl-1 {
width: 8.3333%;
}
.p-xl-2 {
width: 16.6667%;
}
.p-xl-3 {
width: 25%;
}
.p-xl-4 {
width: 33.3333%;
}
.p-xl-5 {
width: 41.6667%;
}
.p-xl-6 {
width: 50%;
}
.p-xl-7 {
width: 58.3333%;
}
.p-xl-8 {
width: 66.6667%;
}
.p-xl-9 {
width: 75%;
}
.p-xl-10 {
width: 83.3333%;
}
.p-xl-11 {
width: 91.6667%;
}
.p-xl-12 {
width: 100%;
}
}
#media screen and (min-width: 2000px){
.p-xxl-1 {
width: 8.3333%;
}
.p-xxl-2 {
width: 16.6667%;
}
.p-xxl-3 {
width: 25%;
}
.p-xxl-4 {
width: 33.3333%;
}
.p-xxl-5 {
width: 41.6667%;
}
.p-xxl-6 {
width: 50%;
}
.p-xxl-7 {
width: 58.3333%;
}
.p-xxl-8 {
width: 66.6667%;
}
.p-xxl-9 {
width: 75%;
}
.p-xxl-10 {
width: 83.3333%;
}
.p-xxl-11 {
width: 91.6667%;
}
.p-xxl-12 {
width: 100%;
}
}

how do I make an image ocupy the entire grid tile

**[![model image][1]][1]
[1]: https://i.stack.imgur.com/0PfBI.jpg
Here, is my code, I don´t know how to make them look like in the image, I tried with the templates. but it´s in vain, I don't know how to do it. I tried changing the sizes, nothing, I'm stuck
thank you for your help, btw
.heromain-imgs {
display: grid;
grid-gap: 0;
grid-template-columns: 30% % 10% 12% 12% 12% 12% 12%;
grid-template-rows: repeat(3, 1fr)
}
.picture {
width: 100%;
height: 100%;
position: relative;
}
.picasia {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 4;
}
/* Picture of Asia */
.picture img {
width: 100%;
max-height: 100%;
}
.picture p {
position: absolute;
color: red;
z-index: 10;
left: 50%;
top: 50%;
}
/* */
.picsuda {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.picafrica {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 2;
grid-row-end: 3;
}**
enter image description here

Mixin for data-overlay selector

Is there a way to convert the following CSS rules to a Mixin or make it a bit more SCSS?
[data-overlay]:before {
content: '';
position: absolute;
background: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
[data-overlay="0"]:before {
opacity: 0;
}
[data-overlay="1"]:before {
opacity: 0.1;
}
[data-overlay="2"]:before {
opacity: 0.2;
}

Sassmeister demo.
Sass for loop.
#mixin overlays($count: 0) {
[data-overlay]:before {
content: '';
position: absolute;
background: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
#for $i from 0 through $count {
[data-overlay="#{$i}"]:before {
opacity: $i / 10;
}
}
}
#include overlays(4);

Wrong ink ripple position on md-list-item

On the first page, the ink ripple is correctly placed when we click on an image (It starts from the cursor). On the next pages (1 or above), the ink ripple is always starting on the left side of the image no madder where we click on the image.
Important : Only appears on Chrome & Opera ! (Firefox works fine)
Any Idea how I might fix this or is it a bug ?
JSFiddle with SASS
angular.module("myApp", ["ngMaterial"])
.controller("myCtrl", function($scope) {
var NB_ACTORS_PER_PAGE = Math.floor(document.getElementById("actorsFlexList").offsetHeight / 60);
$scope.pageIndex = 0;
$scope.actors = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
$scope.select = function() {
};
$scope.previousPage = function() {
if ($scope.pageIndex > 0) {
--$scope.pageIndex;
document.getElementById("actorsFlexList").style.transform = "translate(" + (-$scope.pageIndex * 60) + "px, 0)";
}
}
$scope.nextPage = function() {
if ($scope.pageIndex < ($scope.actors.length / NB_ACTORS_PER_PAGE) - 1) {
++$scope.pageIndex;
document.getElementById("actorsFlexList").style.transform = "translate(" + (-$scope.pageIndex * 60) + "px, 0)";
}
}
});
#advancedNavbar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 60px;
background-color: #eeeeee;
overflow: hidden;
}
#advancedNavbar #specificTemplate {
position: absolute;
top: 36px;
bottom: 0;
left: 0;
right: 0;
}
#advancedNavbar #specificTemplate #actorsList {
height: 100%;
}
#advancedNavbar #specificTemplate #actorsList md-list {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 30px;
padding: 0;
display: flex;
display: -ms-flexbox;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: start;
-webkit-align-content: flex-start;
align-content: flex-start;
-moz-transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
-o-transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
-webkit-transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
}
#advancedNavbar #specificTemplate #actorsList md-list md-list-item {
min-height: 0;
height: 60px;
width: 60px;
margin-bottom: 2px;
}
#advancedNavbar #specificTemplate #actorsList md-list md-list-item button {
padding: 0;
border-radius: 0;
min-width: 0;
}
#advancedNavbar #specificTemplate #actorsList md-list md-list-item button .md-list-item-inner {
min-height: 0;
}
#advancedNavbar #specificTemplate #actorsList md-list md-list-item button .md-list-item-inner img {
height: 60px;
}
#advancedNavbar #specificTemplate #actorsList md-list md-list-item button .md-ripple-container {
border-radius: 0;
}
#advancedNavbar #specificTemplate #pagination {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
height: 30px;
}
#advancedNavbar #specificTemplate #pagination .pagination-button {
color: gray;
float: left;
cursor: pointer;
width: 50%;
height: 100%;
text-align: center;
line-height: 30px;
}
#advancedNavbar #specificTemplate #pagination .pagination-button:hover {
color: black;
}
#advancedNavbar #specificTemplate #pagination .pagination-button:focus {
outline: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0-rc2/angular-material.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0-rc2/angular-material.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="advancedNavbar">
<div style="text-align:center;">{{pageIndex}}</div>
<div id="specificTemplate">
<div id="actorsList">
<md-list id="actorsFlexList">
<md-list-item ng-repeat="actor in actors" ng-click="select()" aria-label="actor">
<img ng-src="http://cdn.wccftech.com/wp-content/uploads/2015/04/mario-2.png" />
</md-list-item>
</md-list>
<div id="pagination">
<div id="leftCaret" class="pagination-button fa fa-caret-left" ng-click="previousPage()"></div>
<div id="rightCaret" class="pagination-button fa fa-caret-right" ng-click="nextPage()"></div>
</div>
</div>
</div>
</div>
</div>

Resources