What steps can be taken to avoid an input with a width of 100% from overflowing?

I'm facing an issue that needs to be resolved.

Currently, I have a group of div elements arranged in a table-like structure with a row and three columns.

When these divs reach a maximum width of 768px, the first column is hidden, leaving only the second and third columns visible with an input text field. The input text should also include a label displayed inline.

The problem arises when the input's text extends outside the confines of the table, despite having a CSS width of 100%.

Below is the snippet of code:

/* DivTable.com */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}

.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

 
@media (max-width: 768px) {
      .hide1 {
        display:none;
      }
      
      .force-display {
        display:block;
      }
      
      .forcew {
        white-space:nowrap;
      }

For the full code and demonstration, please refer to this fiddle link: https://jsfiddle.net/bt6hrc4h/

htmltwitter-bootstrapcssflexbox

Answer №1

If you are considering using flexbox, a straightforward solution would be to set your forcew element as a flexbox - include this in your styles:

.forcew {
  display: flex;
  align-items: center;
}

Check out the demo below:

/* DivTable.com */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.divTable {
  display: table;
  width: 100%;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}
.form-control {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.forcew {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .hide1 {
    display: none;
  }
  .force-display {
    display: block;
  }
  .forcew {
    white-space: nowrap;
  }
}
<div class="divTable" style="width: 100%;border: 1px solid #000;">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell hide1">
        <p class="f-bold override" style="">First Name:</p>
      </div>
      <div class="divTableCell force-display">
        <div class="forcew">
          <label>First Name:</label>
          <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
        </div>

      </div>
      <div class="divTableCell force-display">
        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
      </div>
    </div>
  </div>
</div>

Answer №2

You need to determine the width of the first input text by using the calc() function;

.forcew input {
    width: calc(100% - 80px);
} 


/* DivTable.com */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}

.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.forcew input {
    width: calc(100% - 80px);
}


@media (max-width: 768px) {
      .hide1 {
        display:none;
      }
      
      .force-display {
        display:block;
      }
      
      .forcew {
        white-space:nowrap;
      }
  }
<div class="divTable" style="width: 100%;border: 1px solid #000;" >
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell hide1"><p class="f-bold override" style="">First Name:</p></div>
  <div class="divTableCell force-display">  
    <div class="forcew">
          <label>First Name:</label>
         <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
    </div>

  </div>
  <div class="divTableCell force-display">  
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
    </div>
</div>
</div>
</div>

Answer №3

Combine these numbers

.control {
    justify-content: space-evenly;
    align-items: baseline;
}

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

Uncovering specific content within an html document with the help of BeautifulSoup

I am currently working with a code that involves using BeautifulSoup to scrape text from elements with the class 'product'. However, I am only interested in extracting the 2nd and 4th values ('Product 2' and 'Product 4') to be ...

pythonhtmlbeautifulsoup

Header Menu Click Causes Blurring of Website Background

I need help adding a blur effect to my site background only when the header menu is clicked and active. Once the menu is activated, the .ct-active class is added to it. The CSS code below works for styling individual items - the menu turns red when activ ...

cssmenuheaderblur

Tips for inserting a php variable into an html document

I am trying to figure out how to export a variable from a php file into an html file. The php file I'm working with is example.php and it contains the following code: <?php $array= ['one','two']; ?> The html file is named ...

javascriptphphtml

Verify whether the element within an iFrame contains any content

After conducting extensive research, I have been unable to find a satisfactory answer to my question. Therefore, I am reaching out to see if anyone has the knowledge I seek. The Goal: I aim to check the contents within an iFrame and determine whether it ...

javascripthtmljquery

Targeting elements using CSS3 animations

http://codepen.io/janesmith/pen/dqweasd Need some help with this issue. I am trying to have the div start with a scale of 0 and then scale in when clicked. However, my attempt was unsuccessful. CSS /* Styling for Content Area */ .content div { width ...

htmlcss

Ways to conceal a text-filled div behind an image using 3D transformation

I've been working on creating three images with a fun 'flipcard' effect for the past day and a half, and I believe I'm getting closer to achieving my goal. However, there is one issue remaining, as you can see in the codepen. When the ...

htmlcsscss-transitions

Custom Pug design without any CSS files added

I am having trouble with my .pug template in my express project as it is not including its stylesheets. I have referred to the pug documentation but still can't figure out the issue. Any help would be appreciated! FILE TREE: views `-- index.pug `-- ...

cssexpresspug

Tips for adjusting an @media css for a material-ui react component

After posting this inquiry about overriding a CSS property in a material-ui component, I received a helpful example. However, I encountered difficulty when attempting to set the height of the Toolbar component due to an overarching @media specification. My ...

cssreactjsmaterial-ui

How can I ensure my md-sidenav takes up the entire height when using ui-router?

Currently, I am utilizing the most recent version of Angular Material (1.0.0) library and I am attempting to ensure that my <md-sidebar> panel occupies the entire height of the available space on the webpage. While it functions correctly on a regul ...

htmlcssangularjsangular-material

Guide on hosting two html pages on a NodeJS server

Currently, I am in the process of learning NodeJS and Javascript with a goal to construct a basic server that can host 2 HTML pages. One page should be accessible via localhost:3000/index, while the other can be reached through localhost:3000/about. While ...

javascripthtmlnode.jsserver

Spin a three-dimensional picture

Looking for some assistance! I have an image on my website that is rotated and needs to be turned back to face us correctly. I've tried using the code snippets below but they don't seem to be working: transform: rotateY(10deg); transform: rotate ...

htmlcss

When a base html tag is dynamically added, the browser mistakenly loads assets twice

When managing relative paths on a website, I utilize the <base> tag within the <head> section of each page. Although all resources loaded via relative-like paths in the documents are displayed correctly, my observations show that browsers such ...

javascriptjqueryhtmloffline-browsing

What is the reason for Internet Explorer making a POST request upon clicking <a><button/></a>?

Here's the structure of my form: <form method="post"> {% csrf_token %} <table> {% for field in form %} {% partial "partials/field.html" field=field %} {% endfor %} <tr> <td& ...

htmlinternet-explorerhttp

Which file is the optimal placement for the Bootstrap directory: 'header.php' or 'function.php'?

Having dabbled in WordPress Theme templates for a while, I've decided to try my hand at creating a theme from scratch. After uploading the Bootstrap features onto my server, I'm pondering whether it's better to call the Bootstrap.css files ...

phphtmlcsswordpresstwitter-bootstrap

Hover effect triggered upon mouse exit

As I delve into learning the basics of HTML and CSS, I came across the :hover property in CSS. This unique feature allows for a specific action to occur when the cursor hovers over an element, based on the code provided. Additionally, I discovered the tran ...

htmlcsshover

Updating the CSS link href in ASP.NET using code behind

I'm struggling with changing the CSS href in the code-behind of my .ASPX page. I've tried various methods but haven't found a solution that works as intended. HTML Markup: <link id="linkCSS" runat="server" href='/css/1.css' re ...

c#htmlcssasp.net

Aligning the Twitter and Facebook buttons

Issue with Social Media Button Alignment I'm encountering a problem with aligning Twitter and Facebook buttons on my website. The alignment seems to be off and I need some help fixing it. Code Snippet html: <span id="social"> ...

htmlcssbuttonalignmentsocial-networking

Develop a custom dropdown menu using JavaScript

I've been working on creating a dropdown menu that appears after selecting an option from another dropdown menu. Here's the HTML code I'm using: <br> <select id ="select-container" onchange="addSelect('select-container') ...

javascripthtml

What is the best way to place a JavaScript or jQuery variable within an HTML tag?

Suppose we have a variable called var sticky_element = ".menu"; and then there's this line of code: jQuery(sticky_element).wrapInner('<div class="menu-inner"></div>'); How do we replace the menu in class="menu-inner" with the ...

javascriptjqueryhtmltagsvar

What is the process to create text in bold format in an HTML document?

I'm having difficulty making certain text bold with HTML. Unfortunately, I can't seem to figure out the correct method. Here is my attempted code snippet: Some <bold>text</bold> that I'm trying to highlight. Could someone prov ...

csshtml