How can we adjust the flex values to ensure the label displays properly on a narrow container width?

The labels in the left column of the form are initially sized correctly, but shrink when there is not enough room. However, there's a discrepancy in label size between rows with 2 items and rows with 3 items.

body {
  font-family: Arial;
  font-size: 12px;
}

.input1 {
  flex: 1;
}
.row {
  flex-direction: row;
  display: flex;
  flex: 1;
  align-items: center;
}
span {
  width: 120px;
}
.main {
  width: 200px;
}
.group {
  border: 1px solid rgba(0,0,0,.25);
}

.shrinkSameAmount {
  width: 52px;
  min-width: 52px;
}
<p>Full Size:</p>

<div class="group">
  <div class="row"><span>ID</span><input class="input1"/></div>
  <div class="row"><span>ID</span><input class="input1"/><button>X</button></div>
</div>

<p>Reduced Size:</p>

<div class="main group">
  <div class="row"><span>ID</span><input class="input1"/></div>
  <div class="row"><span>ID</span><input class="input1"/><button>X</button></div>
</div>


<p>What I want when reduced:</p>

<div class="main group">
  <div class="row"><span class="shrinkSameAmount">ID</span><input class="input1"/></div>
  <div class="row"><span class="shrinkSameAmount">ID</span><input class="input1"/><button>X</button></div>
</div>

Is it possible to maintain consistent label widths regardless of viewport size?

htmlcssflexbox

Answer №1

To start, include the CSS property min-width:0 in both the input and button elements to allow them to shrink accordingly. Subsequently, you can modify the flex-basis attribute to ensure that either the input alone or both the button and input share the same value.

In this given scenario, the defined value is 300px. If the input stands alone, it will occupy this value as its flex-basis. When combined with the button, the specified value will be divided between the two elements.

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  font-size: 12px;
}

.input1 {
  min-width: 0;
  flex-basis: 210px;
  flex-grow: 1;
}

.input1:last-child {
  flex-basis: 300px;
}

button:last-child {
  flex-basis: 90px;
  max-width: 90px;
  min-width: 0;
  padding: 1px 0;
  flex-grow: 1;
}

.row {
  flex-direction: row;
  display: flex;
  flex: 1;
  align-items: center;
}

span {
  flex-basis: 120px;
}

.group {
  border: 1px solid rgba(0, 0, 0, .25);
  width: 100%;
  animation: change 5s linear infinite alternate;
}

@keyframes change {
  to {
    width: 18%;
  }
}
<p>Full Size:</p>

<div class="group">
  <div class="row"><span>ID</span><input class="input1" /></div>
  <div class="row"><span>ID</span><input class="input1" /><button>X</button></div>
</div>

There seems to be a slight misalignment at narrower widths, which I intend to rectify soon.

Answer №2

Flexbox provides the necessary flexibility for you to manipulate in this situation. I made a modification by replacing your <span> elements with <label> elements and included this CSS:

label {
  flex: 0 0 120px;
}

The value of flex here is a shorthand for setting flex-grow: 0, flex-shrink: 0, flex-basis: 120px. The flex-basis property determines the initial width, so you can adjust it to your desired width for that "column" of labels.

To ensure that the fields adhere to the width of the container, I adjusted the rule for the inputs as follows:

.input1 {
  width: 100%;
  flex-shrink: 1;
}

This adjustment allows the inputs to utilize all available space.

body {
  font-family: Arial;
  font-size: 12px;
}
label {
  flex: 0 0 120px;
}
.input1 {
  width: 100%;
  flex-shrink: 1;
}
.row {
  flex-direction: row;
  display: flex;
  align-items: center;
}
.main {
  width: 200px;
}
.group {
  border: 1px solid rgba(0,0,0,.25);
}
<p>Full Size:</p>

<div class="group">
  <div class="row"><label>ID</label><input class="input1"/></div>
  <div class="row"><label>ID</label><input class="input1"/><button>X</button></div>
</div>

<p>Reduced Size:</p>

<div class="main group">
  <div class="row"><label>ID</label><input class="input1"/></div>
  <div class="row"><label>ID</label><input class="input1"/><button>X</button></div>
</div>

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 causes the offsetWidth attribute to be zero in an array of elements within the DOM?

I am encountering an issue with a script that sets widths for certain elements in the Dom. Specifically, when I use the code var elements = document.querySelectorAll("p.caption"), the first 12 elements display the correct offsetWidth, but the remaining hal ...

javascriptjqueryhtmldom

Guide to redirecting on click when utilizing an iframe

I needed to prevent the page from reloading before the action was complete by using an iframe. However, I encountered an issue where I needed the page to refresh after the action took place. I attempted two methods to achieve this - refreshing the page and ...

phphtmliframe

Can the parent's :active pseudo class be overridden?

I'm struggling with changing the color of a div when clicked while preventing its parent's pseudo-class from triggering. Here is the markup I have: <div class="parent"> I should change my color to green when clicked <div class="elem ...

jqueryhtmlcss

Ways to initiate a transition upon clicking a button, causing it to switch from being hidden (`display: none`) to visible (`display: block`)

I'm attempting to create a smooth transition effect when a button is clicked, similar to a toggle function, where the content below it seamlessly shifts instead of abruptly moving. The classic example of this is the Bootstrap navbar hamburger menu, wh ...

javascripthtmlcss

How to retrieve a string from a regular expression in Javascript without [Object object] output

Within my code, there exists a parent form component and a child component used for auto-completing text input. The Parent component passes an array of objects named autoCompTxt, consisting of name and id fields, to the Child component. //Parent: const [ob ...

javascripthtmlreactjsreact-hooks

Utilizing WordPress to dynamically update the footer content on a targeted webpage by modifying the HTML/PHP/JS code

Let me provide some clarity. Details: - Website built on WordPress This website is bilingual with Hebrew and English languages. The issue is with the footer section. I have 4 lines that need to display: - Address: ........ - Phone: ....... - Fax: ...... - ...

javascriptphphtmlwordpress

Several A-frames with a variety of animations

Is there a way to apply multiple animations to one object in A-frame? My goal is to make a gltf model move 5 spaces backwards, and then five spaces to the left once the initial animation is finished. How can I accomplish this task? ...

htmlaframe

Is There a Workaround for XMLHttpRequest Cannot Load When Using jQuery .load() with Relative Path?

My current project is stored locally, with a specific directory structure that I've simplified for clarity. What I'm aiming to do is include an external HTML file as the contents of a <header> element in my index.html file without manually ...

javascriptjqueryhtmlload

What causes the <td> element to extend beyond the boundaries of the <table>?

I need to add next and previous buttons to a <td> that has an asp:DropDownList. However, when I do this, the <td> ends up overflowing the width of the table. Here is the edited code snippet with the entire table included: <table class=" ...

htmlcssasp.net

Vue.js displaying incorrectly on Windows Server 2019 IIS post deployment

Once I run npm serve, everything runs smoothly. However, when I deploy my app with an API in an ASP.NET application, it doesn't scale properly. I am using Router and History for navigation. Anonymous user authentication is enabled and static content h ...

cssvue.jsiiswindows-server-2019

Swift code in WKWebView shows increased word spacing in lengthy Arabic texts

Having long Arabic text within <p> tags in my HTML file (loaded by WKWebView) on my app results in unusually large word spacing and unreadable text. In Xcode, the letters in the HTML file appear disconnected. Is there a way to prevent this issue with ...

htmlwkwebview

What is causing the spinner with CSS rotation transform to bounce rhythmically?

In my design, I have created a simple Spinner icon in Figma. It's meant to be perfectly aligned at the center of an enclosing frame that has dimensions of 64x64. To achieve the rotating effect, I applied CSS rotation as shown below: let rotation = ...

cssanimationsvgrotationcss-transforms

Splitting up database results into groups of three rows and then organizing them into Bootstrap4 rows in Laravel 7

Is it feasible to utilize bootstrap rows when retrieving data from the database? I have designed a layout with 3 columns and my objective is to showcase the database outcomes in these rows. In order to display 3 rows, each containing 3 items on every page, ...

phphtmlcsslaravelbootstrap-4

Issue encountered during the execution of the project on wamp server

I am working on a PHP 5 website and have downloaded all the files from the server to my WAMP for editing some text. However, when I try to run localhost, I encounter an error: **Internal Server Error The server has encountered an internal error or miscon ...

phphtml

Is Jquery Mobile's Table lacking responsiveness?

I have implemented a basic table from the jQuery Mobile website on my page. Take a look at the HTML code below: <div data-role="page" id="mainPage"> <div data-role="content> <table data-role="table" id="my-table" da ...

javascriptjqueryhtmlcssjquery-mobile

Convert text into a clickable link

Creating a form with numerous text fields, some of which require numerical input. The main goal is to have users enter a tracking number, order number, or any other type of number that, when submitted, will open a new URL in a separate window with the spec ...

javascriptphpjqueryhtmlforms

Interactive Sidebar Navigation Content

On my website, I have a navigation sidebar that contains links to all of the main site pages. Each page has the same links, except the link to the current page is not included, making it easy to visually identify which page you are on. Currently, I manuall ...

javascripthtml

Manipulate audio files by utilizing the web audio API and wavesurfer.js to cut and paste audio

I am currently working on developing a web-based editor that allows users to customize basic settings for their audio files. To achieve this, I have integrated wavesurfer.js as a plugin due to its efficient and cross-browser waveform solution. After prior ...

javascriptruby-on-railshtmlaudioweb-audio-api

Separation between dropdown menu subcategories

I have searched through various discussions but haven't found a solution that addresses my specific issue, especially at a beginner level. I would really appreciate some guidance. The problem I'm facing involves my drop-down menu displaying gaps ...

htmlcssdrop-down-menu

Learn the process of flipping an element when a button is clicked!

I want to use the jquery flip.js library to flip an element. However, I only want the element to flip when I click on a specific flip button, and then flip back again when another button is clicked. Any suggestions on how to achieve this functionality? ...

javascriptjqueryhtml