How to Create a Compact JavaFX ComboBox

I'm attempting to create a more compact version of the ComboBox, but no matter what I try, the space between the text and arrow button remains consistent.

When using the following CSS:

.combo-box-base > *.arrow-button {
    -fx-padding: 0 0 0 0;
    -fx-background-color: pink, pink, pink, pink;
}

The arrow button shrinks, but the ComboBox itself retains its original size, resulting in an increased space between the text and arrow.

If I try this:

.combo-box > .list-cell {
    -fx-padding: 0 0 0 0;
    -fx-border-insets: 0 0 0 0;
}

The combo box becomes shorter in height, but the width stays the same.

Is there a way to decrease the preferred size of the combo box by reducing the space between the text and the arrow?

Answer №1

While this question may be dated, I encountered the same issue and was determined to find a solution. By carefully debugging the JavaFX code step by step, I identified the source of the additional space that was causing problems.

Within the ComboBoxListViewSkin class, the width calculation for the ComboBox is handled by default. The compute method in this class delegates the computation to its superclass and compares the results with the preferred width obtained from the listView field.

/** {@inheritDoc} */
@Override protected double computePrefWidth(double height, double topInset, double rightInset, double bottomInset, double leftInset) {
    double superPrefWidth = super.computePrefWidth(height, topInset, rightInset, bottomInset, leftInset);
    double listViewWidth = listView.prefWidth(height);
    double pw = Math.max(superPrefWidth, listViewWidth);

    reconfigurePopup();

    return pw;
}

Interestingly, the listView field actually represents an Anonymous Classes instance that extends ListView, adding specific functionality for ComboBox. One overridden method within this anonymous class,

protected double computePrefWidth(double height)
, contains a line responsible for the unwanted additional whitespace.

pw = Math.max(comboBox.getWidth(), skin.getMaxCellWidth(rowsToMeasure) + 30);

The addition of 30 to the widest cell's width is hardcoded, making it challenging to modify easily. This detail initially escaped my notice, leading to confusion during the debugging process. Although one option would be to extend the ComboBoxListViewSkin class and override the computePrefWidth method, it seems more fitting for the default implementation of ComboBoxListViewSkin to offer a straightforward way to adjust this extra whitespace. As a result, I've submitted an issue on GitHub addressing this concern.

Answer №2

Have you considered adjusting the padding for .combox-box > .text-input?
The Oracle documentation on ComboBox CSS suggests that this could be a factor in the padding issue.
For further CSS development, using the CSS inspector in SceneBuilder2 or tools like ScenicView can be helpful. ScenicView offers real-time CSS modifications, enhancing the debugging process significantly.

Answer №3

Make sure to review the Hgrow property. It needs to be properly configured in the layout manager for the combo box.

Create a ComboBox field and then set the Hgrow property using HBox.setHgrow(field, Priority.NEVER);

Additionally, don't forget to check the preferred and maximum width settings. These should be adjusted to USE_COMPUTED_SIZE (if using SceneBuilder) or consult documentation for code implementation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The requested style from ' was denied due to its MIME type ('text/html') not being compatible with supported stylesheet MIME types, and strict MIME checking is enforced

It's strange because my style.css file in the public folder works on one page but gives me an error on another. I'm not sure why it would work on one page and not on the other. The CSS is imported in index.html so it should work on all pages of t ...

Having trouble accurately referencing the domain across various servers

I have set up two servers for production - one for php files and the other for static (css, js) files. Within my config.php file: $path ="https://mystaticdomain.com/"; To simplify access to paths, I created a variable to store the path for css and js fi ...

What is the best way to emphasize the current page within my Bootstrap <nav> menu?

Below is the Bootstrap code that defines our main menu navigation: <div class="col-xl-9 col-lg-9"> <div class="main-menu d-none d-lg-block"> <nav> ...

Crafting numerous CSS templates

I am currently working on creating multiple boxes or templates (5 on each row) from a movie API. I have successfully retrieved all the necessary data and do not require a responsive design. The issue arises when I attempt to apply my CSS class to my secti ...

Creating a responsive layout for displaying products using CSS and HTML

I have a project that requires me to showcase products in a specific manner while being responsive. Here's what I want to accomplish: Based on your opinion and experience, what method do you recommend using to achieve this? Should I use divs, tables, ...

Tally up the values of selected checkboxes

  I'm in search of a method to tally up data-values associated with checkboxes. In the example provided below, selecting locations from the checkboxes results in the calculation of primary values, which are displayed in the green box. I also need to ...

CSS prefers to remain within its original controller and does not want to be uploaded from any other source

My webpage includes headers and footers with CSS in them. Strangely, when I load the view using one controller, the CSS displays correctly. But when I try to load the same view using a different controller, the CSS doesn't appear at all. What could b ...

Tips for making content vanish or remain concealed behind a see-through header during page scrolling

I made a JavaScript fiddle http://jsfiddle.net/claireC/8SUmn/ showcasing a fixed transparent header. As I scroll, the text scrolls up behind it. How can I make the text disappear or be hidden behind the transparent div when scrolling? Edit: I should also ...

How can I add text to a bar or table using CSS/HTML?

I am trying to create a design similar to this: http://img291.imageshack.us/img291/5571/bartablestyling.png Currently, I only have the top bar in place. When I attempt to add text, it ends up below the profile picture. I want to avoid using float:left ...

What are the steps to ensure that this iframe adjusts perfectly to the page in terms of both vertical and horizontal dimensions

I have a sandbox from Material UI that you can view at this link: https://codesandbox.io/s/material-demo-forked-c8e39?file=/demo.js Upon loading the page, an iframe displays some HTML content. Although the width fits perfectly, there are two vertical scro ...

What happens with the styling in this project when the CSS file is blank?

As a first-year CS student in university, I have been diving into the world of React.js. Currently, I am exploring a resume project and noticed that both app.js and index.js files are empty. I am curious to know how the styling is achieved in this project. ...

Achieve hidden and visible elements using CSS without redundancy

Is there a way to hide a div on specific devices and show it on others without resorting to duplicating the code or using CSS hacks? This is my current approach: <div class="container"> <div class="row"> <div class="col-md-8 d-none d- ...

Ways to create gaps between rows of a table

I have been attempting to replicate the layout of this table: However, I am running into an issue with the spacing between the rows (border-spacing: 0 2px), and I'm not sure why. Can anyone provide any guidance on this? This is the code I am using: ...

What is the best way to display two items from a list while hiding the rest?

I received a list generated from the backend that looks like this: <ul> {% for item in items %} <li>{{item }}</li> {% endfor %} </ul> My goal is to display only the first two items and collapse the rest, possibly with a 's ...

I seem to be struggling with hiding/showing a div element. Can you figure

I am in the process of creating a gallery that will display a div with images when a button is clicked. The issue I am facing is that when I have two buttons, only the last images are clickable. It's a bit difficult to explain, but you can see it in ...

What is the best way to eliminate the left margin entirely in CSS?

I am attempting to create an image view that fully covers the window, without any margins. I have tried various solutions such as setting the body margin and padding to 0, but they do not seem to work. body { margin: 0px; padding: 0px; } or *, html { ...

What is the best way to modify a newly added element using jQuery?

When a user clicks a button on my screen, a new template is loaded dynamically using jQuery's .load() method. This transition adds new HTML to the page that was not present when the script initially loaded: (function($) { $('.go').on("c ...

What is preventing Facebook from merging its CSS/JS files together?

I wonder about the reasoning behind Facebook developers' decision not to consolidate their scripts and stylesheets into single files, opting instead to load them on demand through their CDN. Considering the complexity of Facebook as an application, I ...

Apple's iPhone does not adhere to media query specifications

My responsive website was functioning perfectly on desktop, Android, and Windows Phone devices. However, when I asked my friends to check it on their iPhones running iOS 10, they informed me that the media queries were being ignored on iPhone models 5, 5s, ...

Tips for customization: Altering HTML table borders and column widths

I am looking to update the appearance of an HTML table. Currently, it looks like this: Here is the code snippet: <div className="student-schedule"> <table className="student-calendar-table"> [...] </table&g ...