I have a bootstrap carousel with 3 columns, but I want it to 2 columns for a medium screen and 1 column for a small screen. How can I achieve it?
When I adjust it to a medium screen I want the item3 to shift to next carousel item.
carousel slider images:
carousel item1 image
carousel item2 image
This is a react bootstrap code.
<Carousel datainterval="false">
<Carousel.Item>
<Row style={{ width: "80%", margin: "auto" }}>
<Col sm={4}>
<Row>
<Col xs={6}>
<img src="../images/img3.jpeg" width="100%" />
</Col>
<Col xs={6}>
<h3>item1</h3>
</Col>
</Row>
</Col>
<Col sm={4}>
<Row>
<Col xs={6}>
<img src="../images/img1.jpeg" width="100%" />
</Col>
<Col xs={6}>
<h3>item2</h3>
</Col>
</Row>
</Col>
<Col sm={4}>
<Row>
<Col xs={6}>
<img src="../images/img2.jpeg" width="100%" />
</Col>
<Col xs={6}>
<h3>item3</h3>
</Col>
</Row>
</Col>
</Row>
</Carousel.Item>
<Carousel.Item>
<Row style={{ width: "80%", margin: "auto" }}>
<Col sm={4}>
<Row>
<Col xs={6}>
<img src="../images/img4.jpeg" width="100%" />
</Col>
<Col xs={6}>
<h3>item4</h3>
</Col>
</Row>
</Col>
<Col sm={4}>
<Row>
<Col xs={6}>
<img src="../images/img5.jpeg" width="100%" />
</Col>
<Col xs={6}>
<h3>item5</h3>
</Col>
</Row>
</Col>
<Col sm={4}>
<Row>
<Col xs={6}>
<img src="../images/img6.jpeg" width="100%" />
</Col>
<Col xs={6}>
<h3>item6</h3>
</Col>
</Row>
</Col>
</Row>
</Carousel.Item>
</Carousel>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Define the md for medium screen, change its query and set md={6} and sm={12}. So you set up for a medium screen 2 columns and for a screen a column
Example
You can try bootstrap display property for columns you want to hide.
Example:
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
https://getbootstrap.com/docs/4.0/utilities/display/
Related
I am programming a GUI for a ground base for piloting a drone using an FXML file created with Scene Builder. The Main file looks like this:
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
FXMLLoader loader = new FXMLLoader(getClass().getResource("/ground/view/HMI.fxml"));
loader.setController(new RadarView());
Parent root = loader.load();
//Parent root = FXMLLoader.load(getClass().getResource("/ground/view/HMI.fxml"));
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.setTitle("HMI");
primaryStage.setResizable(false);
primaryStage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
//Test adding lines
launch(args);
}
}
As I set the controller at the Main file, I do not set it on the FXML code. The FXML file is quite complex and extended, but its generic structure is an AnchorPane which is the parent of a HBox that subdivides the GUI in three columns:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.effect.ColorInput?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<AnchorPane id="HMIpane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="1080.0" prefWidth="1920.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
<children>
<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="1080.0" prefWidth="1920.0">
<children>
<VBox id="Left_Column" minHeight="1080.0" minWidth="500.0" style="-fx-background-color: GREY;">
<children>
<TitledPane id="autoPilotPanel" collapsible="false" minHeight="150.0" minWidth="500.0" text="Autopilot Modes">
<content>
<AnchorPane id="autoPilotPanelPane" minHeight="120.0" minWidth="496.0" style="-fx-background-color: GREY;">
<children>
<Button id="apSpeedBtn" fx:id="apSpeedBtn" disable="true" layoutX="14.0" layoutY="14.0" minHeight="40.0" minWidth="140.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="SPEED" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0" />
<Button id="apAltBtn" fx:id="apAltBtn" disable="true" layoutX="178.0" layoutY="14.0" minHeight="40.0" minWidth="140.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="ALTITUDE" AnchorPane.topAnchor="0.0" />
<Button id="apVSBtn" fx:id="apVSBtn" disable="true" layoutX="342.0" layoutY="14.0" minHeight="40.0" minWidth="140.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="VERTICAL SPEED" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
<Button id="apDisengageBtn" fx:id="apDisengageBtn" layoutX="276.0" layoutY="61.0" minHeight="40.0" minWidth="140.0" mnemonicParsing="false" style="-fx-background-color: #6e0000; -fx-border-color: BLACK;" text="DISENGAGE" textFill="RED" AnchorPane.bottomAnchor="0.0" />
<Button id="apEngageBtn" fx:id="apEngageBtn" layoutX="80.0" layoutY="72.0" minHeight="40.0" minWidth="140.0" mnemonicParsing="false" style="-fx-background-color: #0a3c00; -fx-border-color: BLACK;" text="ENGAGE" textFill="#2fff00" />
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane id="DLCommandLinePanel" collapsible="false" minHeight="565.0" minWidth="500.0" style="-fx-background-color: BLACK;" text="Data Link Command Line">
<content>
<AnchorPane id="DLCommandLinePanelPane" minHeight="532.0" minWidth="519.0" style="-fx-background-color: BLACK;">
<children>
<TextArea id="DataLinkCommandLog" fx:id="DataLinkCommandLog" editable="false" layoutX="18.6" layoutY="19.6" minHeight="400.0" minWidth="480.0" style="-fx-border-color: GREY;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<effect>
<ColorInput />
</effect>
</TextArea>
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane id="PFDPanel" collapsible="false" minHeight="365.0" minWidth="500.0" text="Primary Flight Data">
<content>
<AnchorPane id="PFDPanelPane" minHeight="125.0" minWidth="500.0" style="-fx-background-color: GREY;">
<children>
<GridPane id="PFDGrid" layoutX="64.0" layoutY="38.0" minHeight="175.0" minWidth="260.0" style="-fx-background-color: GREY;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Label id="IASlabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="IAS" textAlignment="CENTER" textFill="WHITE">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="altitudeLabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="ALTITUDE" textAlignment="CENTER" textFill="WHITE" GridPane.rowIndex="1">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="VSlabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="VS" textAlignment="CENTER" textFill="WHITE" GridPane.rowIndex="2">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="headingLabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="HEADING" textAlignment="CENTER" textFill="WHITE" GridPane.rowIndex="3">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="AoAlabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="AoA" textAlignment="CENTER" textFill="WHITE" GridPane.rowIndex="4">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="QNHlabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="QNH" textAlignment="CENTER" textFill="WHITE" GridPane.rowIndex="5">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="IASvalue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="altitudeValue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="1">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="VSvalue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="2">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="headingValue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="3">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="AoAvalue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="4">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="QNHvalue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="5">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="IAStarget" alignment="CENTER" contentDisplay="CENTER" prefHeight="76.0" prefWidth="134.0" style="-fx-background-color: GREY; -fx-border-color: WHITE;" textAlignment="CENTER" textFill="#ea00ff" GridPane.columnIndex="2">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="altitudeTarget" alignment="CENTER" contentDisplay="CENTER" prefHeight="76.0" prefWidth="134.0" style="-fx-background-color: GREY; -fx-border-color: WHITE;" textAlignment="CENTER" textFill="#ea00ff" GridPane.columnIndex="2" GridPane.rowIndex="1">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="VStarget" alignment="CENTER" contentDisplay="CENTER" prefHeight="76.0" prefWidth="134.0" style="-fx-background-color: GREY; -fx-border-color: WHITE;" textAlignment="CENTER" textFill="#ea00ff" GridPane.columnIndex="2" GridPane.rowIndex="2">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="headingTarget" alignment="CENTER" contentDisplay="CENTER" prefHeight="76.0" prefWidth="134.0" style="-fx-background-color: GREY; -fx-border-color: WHITE;" textAlignment="CENTER" textFill="#ea00ff" GridPane.columnIndex="2" GridPane.rowIndex="3">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="bankAngleLabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="BANK ANGLE" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="2" GridPane.rowIndex="4">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="QFElabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="QFE" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="2" GridPane.rowIndex="5">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="bankAngleValue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="3" GridPane.rowIndex="4">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="QFEvalue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="3" GridPane.rowIndex="5">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</GridPane>
</children>
</AnchorPane>
</content>
<VBox.margin>
<Insets />
</VBox.margin>
</TitledPane>
</children>
</VBox>
<VBox id="Center_Column" minHeight="1080.0" minWidth="920.0" style="-fx-background-color: BLACK;">
<children>
<TitledPane id="HNAVPanel" collapsible="false" minHeight="1040.0" minWidth="920.0" style="-fx-background-color: BLACK;" text="HNAV Panel">
<content>
<AnchorPane id="HNAVPanelPane" fx:id="HNAVPanelPane" minWidth="920.0" style="-fx-background-color: BLACK;" />
</content></TitledPane>
<ToolBar id="toolBar" minHeight="40.0" minWidth="920.0" style="-fx-background-color: BLACK;">
<items>
<Button id="checkListBtn" fx:id="a6" minHeight="26.0" minWidth="223.0" mnemonicParsing="false" style="-fx-border-color: #434343; -fx-background-color: BLACK;" text="CheckList" textFill="WHITE" />
<Button id="flightPlanBtn" fx:id="a7" minHeight="26.0" minWidth="223.0" mnemonicParsing="false" style="-fx-border-color: #434343; -fx-background-color: BLACK;" text="Flight Plan" textFill="WHITE" />
<Button fx:id="a8" minHeight="26.0" minWidth="223.0" mnemonicParsing="false" style="-fx-border-color: #434343; -fx-background-color: BLACK;" styleClass="dataLinkBtn" text="Data Link Status" textFill="WHITE" />
<Button id="weatherBtn" minHeight="26.0" minWidth="223.0" mnemonicParsing="false" style="-fx-border-color: #434343; -fx-background-color: BLACK;" text="Weather" textFill="WHITE" />
</items>
</ToolBar>
</children>
</VBox>
<VBox id="Right_Column" minHeight="1080.0" minWidth="500.0" style="-fx-background-color: GREY;">
<children>
<TitledPane id="VNAVPanel" collapsible="false" minHeight="500.0" minWidth="500.0" text="VNAV Panel">
<content>
<AnchorPane id="VNAVPanelPane" minHeight="180.0" minWidth="200.0" style="-fx-background-color: BLACK;" />
</content>
</TitledPane>
<TitledPane id="alertPanel" collapsible="false" minHeight="240.0" minWidth="500.0" text="Alert Panel">
<content>
<AnchorPane id="alertPanelPane" minHeight="209.0" minWidth="498.0" style="-fx-background-color: GREY; -fx-border-color: YELLOW;" />
</content>
</TitledPane>
<TitledPane id="actionPanel" collapsible="false" minHeight="340.0" minWidth="500.0" prefHeight="340.0" prefWidth="500.0" text="Action Panel">
<content>
<AnchorPane id="actionPanelPane" minHeight="310.0" minWidth="500.0" style="-fx-background-color: GREY;">
<children>
<Button id="directToBtn" fx:id="a11" layoutX="14.0" layoutY="14.0" minHeight="40.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="DIRECT TO" AnchorPane.leftAnchor="0.0" />
<Button id="headToBtn" fx:id="a12" layoutX="14.0" layoutY="66.0" minHeight="40.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="HEAD TO" AnchorPane.leftAnchor="0.0" />
<Button id="climbToBtn" fx:id="a13" layoutX="14.0" layoutY="118.0" minHeight="40.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="CLIMB TO" AnchorPane.leftAnchor="0.0" />
<Button id="descentToBtn" fx:id="a14" layoutX="14.0" layoutY="171.0" minHeight="40.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="DESCENT TO" AnchorPane.leftAnchor="0.0" />
<Button id="speedAtBtn" fx:id="a15" layoutX="14.0" layoutY="223.0" minHeight="40.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="SPEED AT" AnchorPane.leftAnchor="0.0" />
<ChoiceBox id="directToChoice" disable="true" layoutX="174.0" layoutY="14.0" minHeight="40.0" minWidth="315.0" style="-fx-background-color: GREY; -fx-border-color: BLACK;" AnchorPane.rightAnchor="0.0" />
<ChoiceBox id="headToChoice" disable="true" layoutX="174.0" layoutY="66.0" minHeight="40.0" minWidth="315.0" style="-fx-background-color: GREY; -fx-border-color: BLACK;" AnchorPane.rightAnchor="0.0" />
<ChoiceBox id="climbToChoice" disable="true" layoutX="174.0" layoutY="118.0" minHeight="40.0" minWidth="315.0" style="-fx-background-color: GREY; -fx-border-color: BLACK;" AnchorPane.rightAnchor="0.0" />
<ChoiceBox id="descentToChoice" disable="true" layoutX="174.0" layoutY="171.0" minHeight="40.0" minWidth="315.0" style="-fx-background-color: GREY; -fx-border-color: BLACK;" AnchorPane.rightAnchor="0.0" />
<ChoiceBox id="speedAtChoice" disable="true" layoutX="174.0" layoutY="223.0" minHeight="40.0" minWidth="315.0" style="-fx-background-color: GREY; -fx-border-color: BLACK;" AnchorPane.rightAnchor="0.0" />
<Button id="submitBtn" fx:id="a10" disable="true" layoutX="339.0" layoutY="271.0" minHeight="35.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: YELLOW;" text="SUBMIT" textFill="YELLOW" AnchorPane.rightAnchor="0.0" />
<Button id="cancelBtn" fx:id="a9" disable="true" layoutX="14.0" layoutY="271.0" minHeight="35.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: #ff9100;" text="CANCEL" textFill="#ff9100" AnchorPane.leftAnchor="0.0" />
</children>
</AnchorPane>
</content>
</TitledPane>
</children>
</VBox>
</children>
</HBox>
</children>
</AnchorPane>
GUI: the middle HNAVPanel should display a map which the Controller "RadarView()" loads and builds
Finally, the controller tries to load a map with a series of beacon on it. It worked propperly on its own, but when trying to add this "map" feature in the center column's AnchorPane "HNAVPanelPane" in my FXML GUI, it crashes raising the following exception:
Output:
Exception in Application start method
java.lang.reflect.InvocationTargetException
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at com.sun.javafx.application.LauncherImpl.launchApplicationWithArgs(LauncherImpl.java:389)
at com.sun.javafx.application.LauncherImpl.launchApplication(LauncherImpl.java:328)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at sun.launcher.LauncherHelper$FXHelper.main(LauncherHelper.java:873)
Caused by: java.lang.RuntimeException: Exception in Application start method
at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:917)
at com.sun.javafx.application.LauncherImpl.lambda$launchApplication$1(LauncherImpl.java:182)
at java.lang.Thread.run(Thread.java:750)
Caused by: java.lang.NullPointerException
at ground.view.RadarView.<init>(RadarView.java:37)
at build.Main.start(Main.java:23)
at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$8(LauncherImpl.java:863)
at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$7(PlatformImpl.java:326)
at com.sun.javafx.application.PlatformImpl.lambda$null$5(PlatformImpl.java:295)
at java.security.AccessController.doPrivileged(Native Method)
at com.sun.javafx.application.PlatformImpl.lambda$runLater$6(PlatformImpl.java:294)
at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at com.sun.glass.ui.win.WinApplication.lambda$null$4(WinApplication.java:185)
... 1 more
Exception running application build.Main
Java Result: 1
The controller code looks like this:
public class RadarView extends Pane{
#FXML
private AnchorPane HNAVPanelPane;
private IvyManager IM;
public RadarView(){
System.out.println("Initialized");
// Breaks after this point
// Its not appearing on HMI
HNAVPanelPane.getChildren().add(this);
// HNAV MAP
CartographyManagerXanthane cartography = new CartographyManagerXanthane();
Airspace myAirspace = new Airspace(cartography);
Map<String, IBeacon> beacons = myAirspace.getBeaconsByNameMap();
IBaseMap baseMap = cartography.loadBaseMap();
BaseMapView BMV = new BaseMapView(baseMap);
BeaconView BV = null;
this.getChildren().add(BMV);
SelfTraffic ST = new SelfTraffic(0, 0);
try{
IM = new IvyManager(ST);
}
catch(IvyException e){
throw new RuntimeException("Ivy bus had a failure...");
}
for(IBeacon beacon: beacons.values()){
BV = new BeaconView(beacon);
BMV.getChildren().add(BV);
}
SelfTrafficMarker aircraft = new SelfTrafficMarker(ST);
BMV.getChildren().add(aircraft.getMarker()); //discuss layers
panManager pM = new panManager(BMV);
dragManager dM = new dragManager(BMV);
zoomManager zM = new zoomManager(BMV);
}
}
On our website, we have a table with 5 rows and 3 columns.
https://www.bakashana.org/sponsor-a-young-woman
The table is in HTML. The problem is that when we get a new girl to sponsor, we put her at the beginning (top left of the table, the first column and row). This means I have to take the last row entry (picture) from each column and move it down to be the first row entry in the next column. This is a big hassle and takes lots of time.
I am looking for an easy solution which will allow me to simply add another girl's picture (row) at the beginning of the table, and have the table automatically force the rest of the rows to adjust (keeping only 5 rows in each column, and creating a new column if necessary to accommodate all the rows).
Thanks!
Site Code:
<table class="girlstable" style="background:transparent; vertical-align:top;">
<tr style="background:transparent;">
<td>[caption id="attachment_6483" align="aligncenter" width="100"]<img src="https://www.bakashana.org/wp-content/uploads/2019/11/highcompress-Christine-thumbnail-150x150.jpg" alt="christine zambia scholarship kasama" width="100%" height="100%" class="size-thumbnail wp-image-6483" /> Christine Mupeseni[/caption]</td><td>[caption id="attachment_6495" align="aligncenter" width="100"]<img src="https://www.bakashana.org/wp-content/uploads/2019/12/Joan-Chonto-Headshot-compressor.jpg" alt="Kasama sponsorship zambia" width="100%" height="100%" class="size-full wp-image-6495" /> Joan Chonto[/caption]</td><td>[caption id="attachment_6490" align="aligncenter" width="100"]<img src="https://www.bakashana.org/wp-content/uploads/2019/11/Catherine-Mwansa-headshot-compressor.jpg" alt="Sponsor young Zambian woman Catherine" width="100%" height="100%" class="size-full wp-image-6490" /> Catherine Mwansa[/caption]</td><td>[caption id="attachment_6486" align="aligncenter" width="100"]<img src="https://www.bakashana.org/wp-content/uploads/2019/11/highcompress-elizabeth-muma-thumbnail-150x150.jpg" alt="Elizabeth scholarship kasama" width="100%" height="100%" class="size-thumbnail wp-image-6486" /> Elizabeth Muma[/caption]
</td><td>[caption id="attachment_6498" align="aligncenter" width="100"]<img src="https://www.bakashana.org/wp-content/uploads/2019/12/Catherine-Chipanta-headshot-compressor.jpg" alt="girl child assistance catherine" width="100%" height="100%" class="size-full wp-image-6498" /> Catherine Chipanta[/caption]</td></tr>
<tr style="background:transparent;"><td>[caption id="attachment_3836" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/09/Priscilla-Mulenga-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3836" /> Priscilla Mulenga[/caption]</td><td>[caption id="attachment_3837" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/09/Sara-Kanyantag-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3837" /> Sara Kanyanta[/caption]</td><td>[caption id="attachment_3702" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/02/Kasonde-Marvel-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3702" /> Kasonde Marvel[/caption]</td><td>[caption id="attachment_4900" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2019/03/Jane-Kampamba.jpg" alt="" width="100%" height="100%" class="size-full wp-image-4900" /> Jane Kampamba[/caption]</td><td>[caption id="attachment_4899" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2019/03/lastage.jpg" alt="" width="100%" height="100%" class="size-full wp-image-4899" /> Lastage Musonda[/caption]</td>
</tr>
<tr>
<td>[caption id="attachment_3731" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/02/Costance-Mulenga-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3731" /> Constance Mulenga[/caption]</td><td>[caption id="attachment_3835" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/09/Vanessa-Kapembwa-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3835" /> Vanessa Kapembwa[/caption]</td><td>[caption id="attachment_3704" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/02/Violet-Chilufya-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3704" /> Violet Chilufya[/caption]</td><td>[caption id="attachment_3800" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/06/Joyce-Chileshe-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3800" /> Joyce Chileshe[/caption]</td><td>[caption id="attachment_3845" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/09/Regina-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3845" /> Regina Chokwe[/caption]</td>
</tr></table><hr />
I have a gridview and i have set a fixed header but the width of the columns in the gridview does not align with the column of the header.
<div style="width:1000px;border:1px solid #084B8A;color:#ffffff;font-weight:bold;">
<table style="color:#3090C7;">
<tr>
<td style ="width:120px;">Item_ID</td>
<td style ="width:200px;">Category</td>
<td style ="width:300px;">ItemName</td>
<td style ="width:120px;">Pack_Size</td>
<td style ="width:200px;">CostPrice</td>
<td style ="width:200px;">SalesPrice</td>
<td style ="width:150px;">Stock</td>
<td style ="width:150px;">Reorder</td>
<td style ="width:200px;">Barcode</td>
<td style ="width:200px;">Barcode2</td>
<td style ="width:200px;">Barcode3</td>
<td style ="width:200px;">Barcode4</td>
<td style ="width:200px;">Item_Discontinued</td>
</tr>
</table>
</div>
<div style ="height:300px; width:1000px; overflow:auto;" >
<asp:GridView ID="GrdItemList" runat="server" AutoGenerateColumns="false"
ShowHeader = "false" Width ="1000px" >
<AlternatingRowStyle BackColor="#BFE4FF" />
<Columns>
<asp:BoundField ItemStyle-Width = "120px" DataField="Item_ID" HeaderText="Item_ID"
/>
<asp:BoundField ItemStyle-Width = "200px" DataField="Category" HeaderText="Category"
/>
<asp:BoundField ItemStyle-Width = "300px" DataField="ItemName" HeaderText="ItemName"
/>
<asp:BoundField ItemStyle-Width = "120px" DataField="Pack_Size"
HeaderText="Pack_Size" />
<asp:BoundField ItemStyle-Width = "200px" DataField="CostPrice"
HeaderText="CostPrice" />
<asp:BoundField ItemStyle-Width = "200px" DataField="SalesPrice"
HeaderText="SalesPrice" />
<asp:BoundField ItemStyle-Width = "150px" DataField="Stock" HeaderText="Stock" />
<asp:BoundField ItemStyle-Width = "150px" DataField="Reorder" HeaderText="Reorder"
/>
<asp:BoundField ItemStyle-Width = "200px" DataField="Barcode" HeaderText="Barcode"
/>
<asp:BoundField ItemStyle-Width = "200px" DataField="Barcode2"
HeaderText="Barcode2" />
<asp:BoundField ItemStyle-Width = "200px" DataField="Barcode3"
HeaderText="Barcode3" />
<asp:BoundField ItemStyle-Width = "200px" DataField="Barcode4"
HeaderText="Barcode4" />
<asp:BoundField ItemStyle-Width = "200px" DataField="Item_Discontinued"
HeaderText="Item_Discontinued" />
</Columns>
</asp:GridView>
</div>
I want the output to be that if the header of say 'ItemID' is 50px, the column in the gridview holding the 'ItemID' also should be exact 50px and not overlapping.
In our browser developer tools there is no id, so we are using css value. But css value (css=#estimateTable[_ngcontent-c20].highlighted[_ngcontent-c20]) is changing dynamically. so we are getting an error message stating
Element with locator css=#estimateTable[_ngcontent-c20].highlighted[_ngcontent-c20] not found.
<tr _ngcontent-c5="" class="item-name highlighted" tabindex="0">
<td _ngcontentc5="">
<div _ngcontent-c5="" class="svg-size cursor" style="text-align:center;
padding-top:12px;">
<mat-icon _ngcontent-c5="" class="mat-icon" role="img" svgicon="common:estimatetmp" aria-hidden="true">
<svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false">
<desc>Created with Sketch.</desc>
<defs>
</defs>
<g id="__26Nzx83__estimate-tmp-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="__26Nzx83__Group-2">
<rect id="__26Nzx83__Rectangle-4-Copy-2" fill="#FFFFFF" x="0" y="0" width="32" height="32"></rect>
<g id="__26Nzx83__Group" transform="translate(4.000000, 4.000000)">
<rect id="__26Nzx83__Rectangle-3" fill="#9013FE" opacity="0.25" x="0" y="0" width="24" height="24" rx="2">
</rect>
<text id="__26Nzx83__E" font-family="OpenSans-ExtraBold, Open Sans" font-size="18" font-weight="600" fill="#FFFFFF">
<tspan x="7" y="19">E</tspan>
</text>
</g>
</g>
</g>
</svg>
</mat-icon>
</div>
</td>
<td _ngcontent-c5="" class="fontStyle" data-placement="top" title="Untitled Estimate 74"> Untitled Estimate 74 </td>
<td _ngcontent-c5="" class="fontStyle">venkatesh kumar</td>
<td _ngcontent-c5="" class="fontStyle">Oct 31 2018 11:28 AM</td>
<td _ngcontent-c5="">
<div _ngcontent-c5="" class="dropdown">
<div _ngcontent-c5="" class="options more-icon item-name" data-placement="top" data-toggle="dropdown" style="color: black; font-size: 24px;">
</div>
</div>
</td>
</tr>
How to handle this? Shall we tried using class name"(class=item.highlighted) instead of css and id but couldn't locate.
See my screencast for an example of what I mean. You see the problem about 20 seconds into the video.
It seems to mostly happen when scrolling the tableview causes the selected row to go off screen. When you scroll to bring that row back onto the screen and then select a new row the previously selected row's highlightedColor stays instead of switching back to the regular color. It doesn't happen every time, but this is the the best way I've found to replicate. Here's my Allow code:
recipe_list.xml
<Alloy>
<View class="container">
<TableView id="categories" class="master">
<TableViewRow class="category_row">
<Label class="category" text="Appetizers" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Drinks that are extremely complex" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Entrees" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Desserts" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Appetizers" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Drinks that are extremely complex" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Entrees" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Desserts" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Appetizers" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Drinks that are extremely complex" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Entrees" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Desserts" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Appetizers" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Drinks that are extremely complex" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Entrees" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Desserts" />
<View class="separator" />
</TableViewRow>
</TableView>
<View id="vertical_separator" />
</View>
</Alloy>
recipe_list.tss
".container": {
backgroundColor: "white",
height: Titanium.UI.FILL,
top: 0
}
".master": {
top: 0,
left: 0,
width: 320,
// height: Titanium.UI.FILL,
backgroundColor: "#ebeced",
separatorColor: "#d7d7d7",
allowsSelection: true
}
".category_row": {
selectionStyle: Titanium.UI.iPhone.TableViewCellSelectionStyle.BLUE,
selectedBackgroundColor: "#34c2d8"
}
".category": {
font: {fontFamily: "Open Sans [Regular]", fontSize: "20"},
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color: "#464646",
highlightedColor: "#fafdff",
top: 15,
bottom: 15,
height: Titanium.UI.SIZE
}
".separator": {
top: 0,
height: 1,
width: Titanium.UI.FILL,
backgroundColor: "#f6f6f7"
}
"#vertical_separator": {
left: 320,
width: 1,
height: Titanium.UI.FILL,
backgroundColor: "#cbcdcf"
}