Text input field unresponsive on specific device

My two text fields are displaying correctly on most devices, but for some reason they drop down to the next line when viewed on an iPhone 5s/5.

https://i.sstatic.net/2xIPQ.png

Here is how I want them to look:

https://i.sstatic.net/mq013.png

add .code {
  display: inline-block;
  width: 100px;
  max-width: 300px;
}
<div class="add-content">
  <div>
    <ion-item class="code">
      <ion-input type="text" maxlength="4"></ion-input>
    </ion-item>a
    <span class="dash">-</span>
    <ion-item class="code">
      <ion-input type="text" maxlength="4"></ion-input>
    </ion-item>
    <input hidden #loseFocus>
  </div>
</div>
<div class="card">
</div>
htmlcss

Answer №1

For a responsive design, consider using em, % or VW instead of px for width measurements.

Here's an example:

.code {               
  display: inline-block;                   
  width: 10%;                      
  max-width: 30%;                     
}

When using px, the width of the element is fixed which can cause shifting in the layout.

Answer №2

By utilizing flex properties, you can design your text field.

* {
     box-sizing: border-box;
}
.flex-container {
  display: flex;
  margin-bottom: 10px;
}

.flex-container .code {
   flex: 1 0 auto;
   max-width: 300px;
}

.flex-container .code input {
  width: 100%;
  display: block;
}


.add-content {
  display: flex;
  align-items:center;
  justify-content: center;
  flex-direction: column;
}
<div class="add-content">
  <div class="flex-container">
    <div class="code">
      <input type="text" maxlength="4" />
    </div>
    <span class="dash">-</span>
    <div class="code">
      <input type="text" maxlength="4" />
    </div>
    <input hidden #loseFocus>
  </div>
  <button>button</button>
</div>

It's worth noting that in this instance I've replaced ion-item with div

Answer №3

One potential solution is to experiment with the CSS fixed-width attribute

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

Resize an image to automatically adjust and fit within a designated container

Is there a way to resize an image automatically to fit inside a container with a blank background? Currently, the structure looks like this: <div class="row"> <div class="col-md-3"> <div class="panel panel-primary"> ...

jqueryhtmlcsstwitter-bootstrap

Running system commands using javascript/jquery

I have been running NodeJS files in the terminal using node filename.js, but now I am wondering if it is possible to execute this command directly from a JavaScript/jQuery script within an HTML page. If so, how can I achieve this? ...

javascriptjqueryhtml

How to efficiently display information from a MySQL database onto textboxes using AJAX, and successfully repeat the process within the same PHP webpage

How can I retrieve and display data in textboxes from a MySQL database using Ajax, specifically when needing to do so twice within the same form in PHP? The first database table, names, includes: guid id name 1 101 ...

phphtmlmysqljson

CSS - Resizing Images

I am experiencing an issue with the width of an image on my website. I want it to span 100% of the browser frame, but it is currently limited to only 1000px wide. Please take a look at: The image in question is located at the top of the page. Is there a ...

cssimagewidth

What is the process for extracting both HTML and CSS code from an entire webpage using snappysnippet?

When using snappysnippet, we have the ability to extract only the CSS and HTML of a selected element. But is there a way to extract the entire CSS and HTML of a webpage? ...

csscss-selectors

Include a blank area on the right side and a duplicated image on the bottom right using Bootstrap

Let's set the scene: This screenshot showcases www.dreamstreetentertainment.com, a site that is still a work in progress but is already live. Don't inquire about it. The client insists on this setup. Essentially, I have an empty space to the rig ...

htmltwitter-bootstrapcssflexbox

When attempting to upload image data from the canvas, a blank image is generated

I have implemented an ajax query to send canvas image data, along with additional variables. Below is the snippet of code on the client side: front_content = document.getElementById("front_paint_canvas").toDataURL("image/png"); ajaxHandler.open("POST", " ...

phpjavascripthtmlimagecanvas

I am facing issues with the CSS in my EJS file when it is being rendered within an if statement

Having trouble applying CSS to this EJS file, no matter what styling I use. Here's the code snippet: itemEdit.ejs <%- include("partials/header.ejs", {title: ` - Items`, body_id: `items`} )%> <%- include("partials/navbar.ejs&qu ...

htmlcssnode.jsejs

Using Bootstrap4 to merge rows into a single column or apply rowspan in Bootstrap

Hey there, I have a specific requirement that I need help with. Check out the image here. I want to enable the LCM information box when the LCM checkbox is checked. Below is my code: <div class="panel-body "> <div class="c ...

javascriptcssbootstrap-4

Is there a valid substitute for using hot links with images?

Currently, I am instructing a group of individuals on the intricacies of web development with a specific focus on AngularJS. As part of an exercise that I designed for them, they are required to fetch data from the freely accessible pokeapi.co. One interes ...

htmlangularjsimageapihttp-status-code-403

The 'each' method in Jquery cannot be used on a DOM that has been dynamically loaded using Ajax

Trying to refresh a Google advertisement located within divs that all share a common CSS class called 'adslot'. Some of these divs are loaded via ajax. However, upon document ready, using the jQuery each function only applies to the divs that wer ...

javascriptjqueryhtmlcssajax

The preferred size variable for the allocation allotment is malfunctioning

I am working on creating a draggable split panel for an editor, similar to the behavior of the Console panel in CodeSandbox: Clicking on Console expands the panel and changes the arrow to ArrowDown to close it. The border of the panel is draggable. If you ...

cssreactjspanel

How can I adjust the padding and width attributes of the mat-menu in Angular 5

Today, I am struggling with a piece of code. Whenever I click on the Details button, it is supposed to open a mat-menu. However, for some reason, I cannot seem to adjust the padding or width of the menu: <div id="box-upload" [hidden]="hiddenBoxUpload" ...

htmlcssangulartypescriptangular-material

CSS: positioning controls at opposite ends of a table cell

I need help with styling a button and textbox inside a table cell. Currently, the button is stuck to the textbox, but I want them positioned at opposite ends of the cell. How can I achieve this? <td style= "width:300px"> <asp:TextBox ID="Tex ...

htmlcss

What is the proper way to implement SSE/EventSource in your project?

After watching tutorials online, it seems common practice for authors to use SSE/EventSource in setting up a connection where the server-side PHP script echoes data and then uses ob_flush() and flush() to send the information back to the client's brow ...

javascripthtmlserver-sent-events

Revolutionary CSS and jQuery for an Exceptional Top Navigation Experience

I would like to create a top navigation similar to the one on Facebook, using CSS and jQuery. Here is an example: Additionally: Notice how the arrow in the popbox always remains beneath the selected navigation item, and all popboxes have the same width. ...

jqueryfacebookcssfacebook-like

Required file missing in React application unable to locate

I have a project organized in the following way: - my-app - src - some files - public - index.html - ... When I run npm start, the application functions as expected. Now, I am looking to rename src to application! After renami ...

htmlreactjstypescriptnpm

CSS First Element

"When an element with a specific id has a first-child descendant that is any of the heading tags (h1, h2, h3, h4, h5, or h6), apply the following CSS styles:" I have come up with the following selector: #content:first-child h1, #content:first-child h2, ...

csscss-selectors

Tips for causing text to wrap to a new line when reaching the end of a div element

I am struggling with keeping a text inside a div from overflowing when it reaches the border of the div. I have tried various CSS properties like "word-break" and overflow, but haven't been able to find a solution. <div class="col-lg ...

htmlcsstextbootstrap-4

Graphic background integrated into form input

Is it advisable to create colored shapes in Illustrator, export them as SVG files, and then embed input tags or textareas within these shapes to allow users to enter text? Are there alternative methods we could use for this functionality? https://i.sstat ...

htmlcsssvg