Mistake in labeling a checkboxgroup in ExtJs4.2 by wrapping a boxLabel incorrectly

I am encountering an issue where the box labels of the checkboxes are wrapping under the checkbox:

http://jsfiddle.net/6pYWh/

        {
            xtype: 'checkboxgroup',
            columns: 1,
            vertical: true,
            items: [{
                boxLabel: 'Item 1',
                name: 'rb',
                inputValue: '1'
            }, {
                boxLabel: 'Item 2 with a long label that is not wrapping properly',
                name: 'rb',
                inputValue: '2',
                checked: true
            }]
        }

To resolve this, I need the wrap to be inline-block so that both blocks are in the same line. However, I have had to manually set the width of the second block to achieve this:

http://jsfiddle.net/595Md/

The challenge lies in dynamically recalculating and updating the box label width as the west panel is resized, ensuring that it utilizes all available space while maintaining the proper alignment with the checkbox.

Any suggestions?

javascriptcssextjs

Answer №1

Make changes to the CSS selector below.

.hello-world {
    white-space: normal;
    text-align: justify;
    margin: -10px 0 0 10px;
}

Next, give this a try.

Ext.require(['*']);

Ext.onReady(function () {

var viewport = Ext.create('Ext.Viewport', {
    layout: {
        type: 'border',
        padding: 5
    },
    defaults: {
        split: true
    },
    items: [{
        region: 'west',
        collapsible: true,
        header: false,
        split: true,
        width: 200,
        items: [{
            xtype: 'checkboxgroup',
            columns: 1,
            vertical: true,
            id: 'cb-group',
            items: [{
                boxLabel: 'Item 1',
                name: 'rb',
                inputValue: '1'
            }, {
                boxLabel: 'Item 2 with large box label does not wrap properly',
                name: 'rb',
                inputValue: '2',
                checked: true
            }, {
                boxLabel: 'Item 3',
                name: 'rb',
                inputValue: '3'
            }, {
                boxLabel: 'Item 4',
                name: 'rb',
                inputValue: '4'
            }, {
                boxLabel: 'Item 5',
                name: 'rb',
                inputValue: '5'
            }, {
                boxLabel: 'Item 6',
                name: 'rb',
                inputValue: '6'
            }],
            listeners: {
                beforerender: function() {
                    for (var i = 1; i < Ext.getCmp('cb-group').items.length; i++) {
                        if (Ext.getCmp('cb-group').items.items[i].boxLabel.length > 24 ) {
                            Ext.getCmp('cb-group').items.items[i].boxLabelCls = "hello-world";
                        }
                    }
                }
            }
        }]
    }, {
        region: 'center',
        html: 'center',
        title: 'Center'
    }, {
        region: 'south',
        title: 'South',
        height: 100,
        split: true,
        collapsible: true,
        html: 'south'
    }]
});
});

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

Deciphering key-value pairs that are separated by commas

I am looking to convert the following format: realm="https://api.digitalocean.com/v2/registry/auth",service="registry.digitalocean.com",scope="registry:catalog:*" Into this JSON object: { realm: "https://api.digitaloce ...

javascriptnode.jstypescript

Wordpress is having issues running jQuery

I've developed a function inside js/custom.js. The purpose of this function is to arrange posts in my Wordpress site by applying a class called articleAlign. This class will enhance the spacing between the article title and its excerpt, but only when ...

javascriptphpjquerycsswordpress

Is it possible to implement the SCSS CSS preprocessor in Angular 1.6.6, even though it is already utilizing LESS as the current CSS preprocessor?

Is it necessary to compile SCSS and Stylus files into CSS before importing them into my Angular version 1 app? Are there any other alternatives available? Context: I have two applications, one using Angular 4 with SCSS and the other using Angular 1 with L ...

cssangularjssassless

Inquiries regarding the distinctive key and component framework of Ant Design

Currently, I am in the midst of a project utilizing react, next.js, and antd. However, an error message has popped up stating: Warning: Each child in a list should have a unique "key" prop. This issue precisely stems from the absence of a uniqu ...

javascriptreactjsreduxnext.jsantd

Building a dynamic search feature using Ajax and PHP to transfer search results to a PHP variable or display as plain text

I designed a form that allows users to input orders with various details into the database. One of the fields in this form is labeled Client, where users have the option to either create a new client or select an existing one. To facilitate the selection ...

javascriptphpjqueryhtmlmysql

What is the best way to have my items fill the entire column space using flexbox?

Having 2 containers and wanting them to have the same height has been a challenge. I've been experimenting with flexbox and the flex-direction: column (flex-column) property, but I can't seem to get each element to divide the available container ...

css

Tips for changing the size of a div using an absolute div position

Is it possible for the #parent div to resize based on the dimensions of the #child div (if the #child div is using position:absolute;)? Similar to how the #t_parent table resizes according to the size of the #t_child table. <div id="parent" style="pos ...

htmlcss

Why isn't this setState function activating?

I am working on creating a versatile notification React component for my application that can be accessed from any part of the code. I have written the following code, where I am attempting to find a workaround for exporting the showNotif function: func ...

javascriptreactjsreact-hooksnext.js

Ways to fix the TypeError that occurs when attempting to convert undefined or null to an object by using Function.keys

I am attempting to conceal the field. When the user clicks on glyphicon-eye-open, I will display glyphicon-eye-close and set the condition to true. If the condition is true, then I push that value into an array. Here is the function I am using, I have two ...

javascriptangularjs

Include a Custom Button with an Optional Event Handler

I've created a customized material-ui button component: type ButtonProps = { disabled: boolean; text: string }; export function CustomButton({ disabled, text }: ButtonProps) { return ( <Button type="submit" disabled={disabled} ...

javascriptreactjstypescriptmaterial-ui

When attempting to integrate Bootstrap 5 with Laravel, you may encounter an issue where the "bootstrap is

I've come across a common issue where none of the solutions seem to work for me. Currently, I am working with Laravel 10 and Vite, and have successfully installed Bootstrap using NPM. Although the configuration was correct for using Bootstrap CSS and ...

javascriptlaravelnpmbootstrap-5vite

Oops! Looks like there was an issue: TypeError - 'app.use() function needs a middleware'

Recently delving into Node Js, I embarked on a learning journey and attempted the following code. However, it seems to be throwing an error that has left me stumped. Despite searching for solutions, I can't seem to pinpoint what's causing the iss ...

javascriptnode.jsexpressmonodeveloprouter

Is there a way to activate Toast notification before the window's onbeforeunload event?

Here's a snippet of JavaScript that I have been working on. It currently pops up an alert when someone tries to leave a form without completing it. However, my goal is to display a Toast notification first with some additional information informing th ...

javascriptbootstrap-5toast

SimpleModal Jquery experiencing intermittent flashing in Firefox

While utilizing the SimpleModal plugin for jQuery, I've encountered an unusual issue specific to Firefox (other browsers such as Chrome, Safari, Opera, and IE are working perfectly). The problem arises when I click on the button that triggers the mod ...

javascriptjqueryfirefoxsimplemodal

The delay in updating after a redirect in the Next.js router push operation is causing a minor delay

I am facing an issue in my NextJS application where there is a delay of about 3 seconds when redirecting the user back to the listing page after submitting a form that saves data to the database using react-hook-form and an API call. This delay is causing ...

javascriptreactjsnext.jsreact-hook-form

Unique styling for underlines in pop-up with custom CSS

When exploring my codesandbox project, I encountered 2 questions: How can I create a custom underline CSS similar to the UI image below the file name and trash icon? I tried using text-decoration:none, but it doesn't match the UI. How do I center a U ...

htmlcssvuetify.js

What is the best way to search through directories for JSON files in JavaScript?

I am looking to navigate through directories to find json files and combine them all into a single json file for each directory. I consider myself a beginner in javascript. The javascript code should be executed by calling it in the Terminal, instead o ...

javascriptjsonfiledirectory

Image in the background not showing up on Chrome or Internet Explorer

The issue I'm facing is that the background-image displays correctly in Firefox, but not in Chrome or IE. Despite trying various solutions found on Stackoverflow, such as disabling my ad-blocker, placing the code in the head of the file: <head> ...

cssasp.netgoogle-chromeinternet-explorerfirefox

Model is disregarding media queries

Using LESS for CSS compilation, I have encountered an issue with the media query in my code. Specifically, I am attempting to apply different styles for mobile devices but they are not being rendered as expected. #main-wrap header #hdr-nav nav { width: ...

cssresponsive-designmedia-queries

Storing raw HTML in a Mysql database, then fetching and displaying it on a webpage

I'm having an issue with my application. It's a form builder that allows users to create their own forms and then save them for later use. The HTML code generated by the form builder is stored in a MySQL database. However, when I try to retrieve ...

javascriptphpjqueryhtmlmysql