Tips for customizing the appearance of a Horizontal Splitter panel in GWT version 1.5

I need to customize the style of the right side of a horizontal splitter panel. While GWT 1.7 offers support for individual panel styles, our project is currently on GWT 1.5.

Here is the GWT code snippet:

HTML div1 = new HTML("Div 1");
div1.setWidth("200px");
div1.setHeight("200px");
HTML div2 = new HTML("Div 2");
div2.setWidth("400px");
div2.setHeight("500px");

HorizontalSplitPanel horizontalSPanel = new HorizontalSplitPanel();
horizontalSPanel.setLeftWidget(div1);
horizontalSPanel.setRightWidget(div2);

RootPanel.get().add(horizontalSPanel);

The corresponding output:

<div class="gwt-HorizontalSplitPanel" style="position: relative; height: 100%;">
    <div style="border: medium none ; margin: 0pt; padding: 0pt; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;">
        <div style="border: medium none ; margin: 0pt; padding: 0pt; overflow: auto; position: absolute; top: 0px; bottom: 0px; width: 511px;">
            <div class="gwt-HTML" style="width: 200px; height: 200px;">Div 1</div>
        </div>
        <div style="position: absolute; top: 0px; bottom: 0px; left: 511px;">
            <table height="100%" cellspacing="0" cellpadding="0" class="hsplitter">
            <tbody>
                <tr><td valign="middle" align="center">
                    <img border="0" style="background: transparent url(http://localhost:8888/com.xyzpackage.MyEntryPoint/4BF90CCB5E6B04D22EF1776E8EBF09F8.cache.png) no-repeat scroll 0px 0px; width: 7px; height: 7px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" src="http://localhost:8888/com.xyzpackage.MyEntryPoint/clear.cache.gif"/>
                </td></tr>
            </tbody>
            </table>
        </div>
        <div style="border: medium none ; margin: 0pt; padding: 0pt; overflow: auto; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 518px;">
            <div class="gwt-HTML" style="width: 400px; height: 500px;">Div 2</div>
        </div>
    </div>
</div>

Is there a way to apply a specific style only to the right-hand side (RHS) div?

My requirement mandates that the RHS view cannot have a vertical scrollbar.

Answer №1

To avoid traversing the DOM tree, consider enclosing Div 2 within another Div and applying the overflowY:hidden attribute.

A similar technique is employed in ScrollPanel, but for the opposite purpose.

Answer №2

Decided to utilize the DOM method:

                Node node = horizontalSPanel.getElement().getFirstChildElement().getChildNodes().getItem(2);
                // Applying overflow y as hidden, due to limitations in GWT's current version 
                // preventing users from setting style to right or left containers.
                DOM.setStyleAttribute((Element) node, "overflowY", "hidden");

This approach seems inefficient and relies on hard coding.

Does anyone have a more effective solution?

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

Draggable element with a centered margin of 0 auto

Encountering an issue with jQuery UI sortable/draggable where the element being dragged, when centered using margin:0 auto, starts dragging from the left side of the container instead of the center where it is positioned. Check out this demo to see the pr ...

Having trouble loading an image from an external website onto the page

I'm currently utilizing an API to retrieve an image and attempting to display it on my webpage. Although the API source works, the image is not appearing when displayed on the page. <img class="avi" src="' + data.data[0].musicbrainz_image_url ...

How can I incorporate a transition into my modal with JavaScript in CSS?

I've recently started learning CSS and while I've come across similar topics, none have provided the solution to my specific problem. After spending 2 hours experimenting with various CSS properties like hidden, transition, and display, I am now ...

Handling onMouseLeave event for Popover component in material ui library with hiderBackdrop parameter specified

<Popover key={element.id} className={classes.popoverItem} classes={{ paper: classes.paperElement }} open={isOpen} anchorEl={this.myRef.current} anchorOrigin={{ vertical: 'bottom&apo ...

Adjustment to website design when decreasing browser size

As I decrease the size of the browser window, I notice that the top and bottom footers begin to shrink, causing the content within them (such as the navigation bars) to overlap with the main text. Can anyone explain why this happens? I apologize if my qu ...

Issue with IE11 when using Bootstrap 4 and Flexbox

In my design, I have two columns that need to have equal heights when displayed next to each other on a large screen. However, on mobile devices, they should stack on top of each other. I am currently using the old BS grid for this layout. The content wit ...

Adapt appearance according to the length of the text

Currently, I have an array that stores multiple strings based on displayed charts. My objective is to find the longest string within this array. So far, this task has been executed without any issues. The code snippet for this process is as follows: var ...

Having difficulty retrieving POST request information from an HTML form using Flask

I have been experimenting with building a website back-end using the Python library Flask. However, I keep encountering a 405 - Method not allowed error whenever I attempt to retrieve form data from a POST request in a secure manner. Right now, after a use ...

Ways to constrain checkbox choices to only one within an HTML file as the checklist with the checkboxes is being created by JavaScript

I am working on developing an HTML dialogue box to serve as a settings page for my program. Within this settings page, users can create a list of salespeople that can be later selected from a drop-down menu. My current objective is to incorporate a checkbo ...

How can I close the sidebar with a single tap anywhere outside of it?

Is there a way to hide the sidebar when clicking anywhere on the screen? Can I show text when hovering over an image instead of having it always visible? function openNav() { document.getElementById("mySidenav").style.width = "300px"; document.getE ...

As the Page Expands, Elements Shift into New Positions

I'm currently focused on enhancing the accessibility of my web pages. A challenge I've encountered is that when I expand the width of my page, the elements appear to shift further down the screen. It seems like this issue may be related to settin ...

What is the best way to expand the width of my Bootstrap 4 navbar dropdown menu?

Need help creating a full-width dropdown for a Bootstrap 4 navbar using the standard boot4 Navbar? Check out the navbar template I am currently working with. Here is an example of how I want it to look: Desired design image link <nav class="navbar fix ...

A new URL must be refreshed for the link to properly bind the data received from the API call with the subscribe method

In my Angular application, I have a URL link that fetches data from the backend API using the subscribe method in a component. The expected behavior is that when this URL is accessed in a browser, the data should be displayed in the corresponding HTML comp ...

Creating CSS Effects for Text Hover and Transition

Looking for help to implement the hover effect 4 on the following site: . I was able to create a test on JSFiddle, check it out here: https://jsfiddle.net/34aaqh70/ Struggling to make it auto-responsive, any tips would be appreciated. If there's a ...

Ways to showcase mysql results in distinct unordered list based on alphabets

My webpage currently displays a list of links to subpages that are divided by alphabet. Each letter has its own heading, and the subpages are formatted as dynamic nested unordered lists. Right now, I have it working with 26 separate queries, one for each l ...

What is the process for deleting an animation using JavaScript, and how can the background color be altered?

Two issues are currently troubling me. First off, I am facing a challenge with an animation feature that I need to modify within the "popup" class for a gallery section on a website. Currently, when users load the page, a square image and background start ...

Determine the length of the content within an HTML container that has

I am attempting to retrieve the length of the container's content in HTML dynamically. However, I am only receiving the object instead of the desired result. <script> $(document).ready(function (e) { var adsense_box_len = $(&apo ...

Can a React single-page site be exported to HTML format?

I am currently working on a one-page web application using React and materialize-css. My goal is to export it as static HTML and CSS, allowing for easy editing of the HTML for prototyping purposes. Is there a way to export at least a snapshot of the curren ...

CSS - Choosing between Background Size Contain or Default Size

Is there a solution to my dilemma regarding background images in a div? I need the image to be contained within the div if it's larger (background-size:contain;), but if the image is smaller, I want to keep it as is without stretching or blurring (bac ...

Trouble with Prefixfree-min.js when using external CSS files

Hi there, I recently encountered an issue while working on a webpage and using internal CSS. To organize my code better, I decided to move all the CSS code to an external file and linked it with my HTML document. However, after making this change, I notic ...