Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

How can I set the column width of a column in a classic report?

user1.0Nov 19 2021

I'm working in Apex 19.2.
I have a classic report that selects several columns with different data types. Right now all the columns are the same length. I would like to shrink some columns to save space on the page. For example, the Year column doesn't need to be _____________________ long. I only need 4 character length.
If I try to format the length in the query, like this:
APEX_ITEM.TEXT(4,ACTIVE_YEAR,'style="border:none;width:32px" class="right-align" id="YEAR_'|| AMT_ACCUMULATOR_REF_NUMBER ||'"') ACTIVE_YEAR,
I get a not a number error just running the query.

I put this code in the HTML expression for the column:
<span style="display:block; width:32px">#ACTIVE_YEAR#</span>
and got the box to change size but the data entry field is the same length. It looks like this now.
image.png
I changed the cell width to match the size of the box:
image.pngIt had no effect as you can see in the screen snippet.
So, how do i get the Active Year box AND the data entry field corresponding to that box to be the same size?

This post has been answered by user1.0 on Nov 19 2021
Jump to Answer

Comments

jsmith
A few methods:
a) style borders of the individual cells (and ensure that they fill their entire grid position) or
b) you style the background of the whole grid leaving gaps between cells which fill their entire grid position as is shown below or
c) add new grid nodes with lines and then style the added lines.

I chose method b (styling the grid background) for the code below:
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
 
public class GridPaneStyle extends Application {
  @Override public void start(final Stage stage) {
    // create a grid with some sample data.
    GridPane grid = new GridPane();
    grid.addRow(0, new Label("1"), new Label("2"), new Label("3"));
    grid.addRow(1, new Label("A"), new Label("B"), new Label("C"));
    
    // make all of the Controls and Panes inside the grid fill their grid cell, 
    // align them in the center and give them a filled background.
    // you could also place each of them in their own centered StackPane with 
    // a styled background to achieve the same effect.
    for (Node n: grid.getChildren()) {
      if (n instanceof Control) {
        Control control = (Control) n;
        control.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        control.setStyle("-fx-background-color: cornsilk; -fx-alignment: center;");
      }
      if (n instanceof Pane) {
        Pane pane = (Pane) n;
        pane.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        pane.setStyle("-fx-background-color: cornsilk; -fx-alignment: center;");
      }
    }

    // style the grid so that it has a background and gaps around the grid and between the 
    // grid cells so that the background will show through as grid lines.
    grid.setStyle("-fx-background-color: palegreen; -fx-padding: 2; -fx-hgap: 2; -fx-vgap: 2;");
    // turn layout pixel snapping off on the grid so that grid lines will be an even width.
    grid.setSnapToPixel(false);

    // set some constraints so that the grid will fill the available area.
    ColumnConstraints oneThird = new ColumnConstraints();
    oneThird.setPercentWidth(100/3.0);
    oneThird.setHalignment(HPos.CENTER);
    grid.getColumnConstraints().addAll(oneThird, oneThird, oneThird);
    RowConstraints oneHalf = new RowConstraints();
    oneHalf.setPercentHeight(100/2.0);
    oneHalf.setValignment(VPos.CENTER);
    grid.getRowConstraints().addAll(oneHalf, oneHalf);
    
    // layout the scene in a stackpane with some padding so that the grid is centered 
    // and it is easy to see the outer grid lines.
    StackPane layout = new StackPane();
    layout.setStyle("-fx-background-color: whitesmoke; -fx-padding: 10;");
    layout.getChildren().addAll(grid);
    stage.setScene(new Scene(layout, 600, 400));
    stage.show();
    
    // can be uncommented to show the grid lines for debugging purposes, but not particularly useful for styling purposes.
    //grid.setGridLinesVisible(true);
  }
  public static void main(String[] args) { launch(); }
}
934225
This example is very very helpful.
1 - 2

Post Details

Added on Nov 19 2021
5 comments
4,028 views