Column layout woes arise from buttons with multiline labels

I am in the process of designing a dynamic panel that contains buttons with both images and labels. When the labels are long, I would like them to be displayed on multiple lines. By using CSS, you can achieve this by setting white-space: normal. However, one issue is that the button on the next line tends to snap to the end of the line.

I have created two jsfiddles for demonstration:

One with the .launchpad-button .x-btn-inner white-space comment removed.

View JSFiddle 1

Although it looks good, I want the full text to display (even if it spans multiple lines).

View JSFiddle 2

In contrast, this doesn't look as good. How can I resolve this?

Edit:

Update! ScottS' solution works perfectly, but I encountered an issue when resizing the window or having limited space available: The new line (clear: left) appears in the incorrect position.

javascriptcssextjs4extjs

Answer №1

Suppose each column is only three columns wide. In that case, you can resolve the issue by applying a cls: 'new-row' to every 4th item in your xtype: 'container' using the following CSS:

.new-row {
    clear: left;
}

This simple solution can be found at this link. For more modern browsers that support pure CSS3, you may not need to add the additional class new-row to the script. Instead, just use this CSS to target every 4th element:

.x-container:nth-of-type(4n) {
    clear: left;
}

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

What is the best way to use CSS to hyphenate a capitalized word?

I have a single word that needs to be hyphenated, but the lang=en hyphenate: auto property does not work on capitalized words. To address this, I utilized the slice function in JavaScript to split the word in half so that the second half, which requires h ...

htmlcssreactjsfirefoxcss-hyphens

My navigation bar links seem to only be functioning on the homepage - any idea why?

I'm experiencing an issue with my navbar where the links only work on the homepage of my website. When I try to navigate to other pages through the navbar, I receive a 404 error. The navbar was created using a template from w3 school's. Does anyo ...

htmlcssuinavigationbar

Scrolling to the bottom with React-Window is an efficient

I am currently utilizing react-window to efficiently render a long list for displaying messages. However, I am facing an issue on how to automatically scroll to the bottom each time a new message is added. While I have successfully achieved this functiona ...

javascriptreactjsreact-window

Disabling the current date on date pickers in material ui: A step-by-step guide

In my current React project, I am utilizing material-ui-date-pickers and need to prevent users from selecting today's date. This is important in the context of manufacturing products, managing expiration dates, and handling billing processes. Since a ...

javascriptreactjsdatepickermaterial-ui

React - 'classProperties' is not currently activated in this setting

Recently, I incorporated Truncate-react into my project. Subsequently, React prompted me to install @babel/plugin-proposal-class-properties, which I promptly added to the package.json file as follows: "babel": { "presets": ...

javascriptreactjsbabeljs

The Bootstrap navigation bar drop-down feature is not displaying the menu

After skimming through various threads on stackoverflow regarding the dropdown box in the navigation bar, none of the solutions seem to address my issue. Utilizing bootstrap version 3, I've implemented the provided navbar example from the official si ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for monitoring a JavaScript callback within an Angular 16 application

I'm currently working on integrating my Angular 16 application with a third-party website using an iFrame. My main concern is how to capture the callback response from their site. The recommended approach to integrate with their API from an HTML page ...

javascriptangular

Rotating display for showcasing various portfolios

I'm facing an issue with my portfolio images carousel using a map in Bootstrap. When I navigate from one portfolio (e.g. image 4) to another (which has only one image), the carousel shows up blank because the active carousel-item is at index 3 (image ...

javascriptreactjstypescriptbootstrap-5

What is the best way to dynamically change the JSON-LD Script for the Schema?

Below is the script in question. Please read through it carefully. <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Product", "name": "Bat, &q ...

javascriptphphtmljqueryajax

The term 'JsonTable' has not been defined in react/jsx-no-undef

When trying to input a JSON value into the JSON table in React, I encountered an error stating "'JsonTable' is not defined react/jsx-no-undef". What steps should I take to resolve this issue? Do I need to import a specific file? import React, ...

javascriptjsonreactjs

Mobile device not providing proper CSS padding and border-radius styling

I'm currently facing an issue with my email contact form. The submit button is styled perfectly on desktop, but on mobile, the padding and border-radius are not being applied. I attempted to switch to EM units from pixels, but still no luck. You can v ...

cssmobilepadding

What is the best way to spin an element around its center?

I'm faced with a challenge where I have an element that needs to be rotated using JavaScript. The rotation is currently functional, but it's rotating around points other than its center. My goal is to rotate the element around its own center. ...

javascriptjqueryhtmlcss

Vue and Axios encountered a CORS error stating that the 'Access-Control-Allow-Origin' header is missing on the requested resource

I've encountered the error above while using Axios for a GET request to an external API. Despite consulting the Mozilla documentation, conducting thorough research, and experimenting with different approaches, I haven't made any progress. I&apos ...

javascriptgetcorsvue.jsaxios

Is it necessary to use asynchronous actions in Node.js only when developing server applications?

In the Node.js application I'm developing, there is a piece of code similar to this within an async function: await a(param1); await b(param2); await c(param3); await d(param4); From my understanding, this setup works well for a server-based app. Fo ...

javascriptnode.jsasynchronousasync-await

When I engage with the input field, it ceases to be in focus

Here is the code I've been working on: https://github.com/Michael-Liendo/url-shortener/blob/main/src/pages/index.js If you want to see the issue for yourself, check it out at: ...

javascripthtmlreactjsnext.js

Generating buttons automatically and transforming them into an accordion

My code consists of a function that generates buttons based on the current month, creating 28 buttons for February, 31 buttons for March, and so on. Additionally, I have implemented an accordion function. However, I am facing difficulty in integrating both ...

javascripthtml

`Is there a way to adjust the column height in bootstrap?`

Hi there! I'm a beginner in AngularJS and Bootstrap. I've been using col-md-4 and repeating this div until I retrieve the data from JSON. My issue arises when I use the accordion with headings and drop-down lists. Everything works fine if the num ...

javascriptcssangularjstwitter-bootstrapangularjs-ng-repeat

Adjust the initial scroll position to - apply overflow-x: scroll - on the specified element

I have an image that can be scrolled to the right on screens that do not fit the full width, but I want the center of the image to be displayed first instead of the left side. Below is my React code: import React, { useEffect, useRef, useState } from &qu ...

javascripthtmlcssreactjs

How can I customize the color of the Bootstrap range slider using a Hex code?

Is it possible to change the default blue color of a Bootstrap range slider? I have tried modifying it in this Fiddle, but I would prefer to change it to a Hex color like red. Can CSS be used to achieve this? Below is my HTML code: <link href="https ...

htmlcssbootstrap-4

Initiate modal from sub-component

Right now, I am developing a vue application with a structure that closely resembles the following: <div class="characters"> <Character v-for="character in this.charactersToSearch" :key="character.id" :name="cha ...

javascriptvue.jseventsevent-bubbling