The size of the search input and textarea in HTML decreases when viewed on an iPad device

Currently utilizing Bootstrap 3 and AngularJs for this project. Implementing the following markup for the input field with type 'search': 

<input type="search" class="form-control" id='roomSearch' placeholder="Search" ng-model='qText'>

As for the textarea:

<textarea name='question' id='question' rows='8' ng-model='q.text' class='form-control' ng-maxlength='{{$root.globals.maxLen.med}}' required></textarea>

Displayed properly in major browsers on iPhone and desktop, but experiencing rendering issues on iPad:

Further details here

UPDATE! CSS styling for the search box:

#roomSearch {
   margin-top: 8px;
   float: right;
}

CSS styling for the text area:

.question-form textarea {
   width: 100%;
}
htmlcssangularjstwitter-bootstrap

Answer №1

Although there was no visible answer and the information is outdated, it seems like the original poster managed to solve their issue. Here's a solution that worked for me:

textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
 }

Implementing this code caused both the textarea and input elements to expand to the full width of the browser window.

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

My ability to click() a button is working fine, but I am unable to view the innerHTML/length. What could be the issue? (NodeJS

Initially, my goal is to verify the existence of the modal and then proceed by clicking "continue". However, I am facing an issue where I can click continue without successfully determining if the modal exists in the first place. This occurs because when I ...

javascripthtmlnode.jsseleniumwebdriver

What is the best way to showcase navigation and footer on every page using AngularJS?

I'm in the process of building a Single Page Application. I've decided to create separate components for Navigation, Section, and Footer. The Navigation and Footer should be displayed on every page, while only the Section content changes when nav ...

javascriptangularjsangular-ui-routerangular-ui-bootstrapangular-ui

How come ng-repeat isn't recognizing the function in the parent scope?

What is the reason for needing to use e in $parent.parentScopeFunc() rather than just e in parentScopeFunc() when {{ parentScopeValue }} works perfectly fine for showing parent scope members in a template? ...

angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

Tips for choosing elements in JavaScript using querySelector even after they've been included in the code using innerHTML

Within the scenario below, a parent element is present in the HTML code and the span element with a class of 'child' is nested within the parent element using the createChild function. Subsequently, the content of the child element is modified el ...

javascripthtmldomqueryselector

Issue with jQuery draggable appendTo functionality not functioning as expected

Below is the code snippet: JavaScript jQuery $('.dragBox').draggable({ axis: 'y', appendTo: 'parent', containment: [0,0,0,150], start: function() { $(this).addClass('grab ...

jqueryhtmlcssdraggable

Are you experiencing issues with Font Awesome Fonts failing to load?

I am currently using a rails app with bower to manage my assets, avoiding gems for JS and CSS. In the directory vender/assets/stylesheets, I have "font-awesome" containing both scss and fonts. In app/assets/stylesheets/application.scss, I have included va ...

htmlcssruby-on-railsfontsfont-awesome

variable containing a combination of left-to-right and right-to-left characters

I am working on a piece of text which contains Hebrew (rtl) and English (ltr) letters. It is a song with chords placed above the words. The issue I am facing has to do with the chords - because the site is rtl, the chords appear messy. Is there a way to h ...

phphtml

Is it possible to globally delay the execution of WebElement.sendKeys() in Protractor's onPrepare function?

While running protractor on a sluggish machine, I am in need of slowing down each key press and action performed. The action part has been successfully implemented, but how can I achieve the same for key presses? I have come up with a local solution which ...

javascriptangularjsseleniumprotractorautomated-tests

Update the content retrieved through ajax periodically

Looking to set up a periodic update for this ajax fetch function, say every 10 seconds. I've tried a few approaches but none seem to work as expected. That's why I'm reaching out here for help. So, any idea how I can refresh the content ev ...

phpjqueryhtmlajax

Setting the select option in AngularJS with predefined options can be easily achieved with

I am encountering an issue with a select element that has predefined options. Even though the select element is using ng-model, when the model is set to one of the option values, it fails to be selected. Below is the snippet of HTML code: <select clas ...

javascriptangularjs

get direct access to the children of a specific div element

Here is the code snippet in HTML format. <div id="this"> <a href="xxx"> xx</a> <a href="yy"> yy</a> <a href="zzz"> zzz</a> aaa <a href="bbb"> bbb</a> ccc </div> I am look ...

jqueryhtmlnode.jsdomcheerio

A Guide on Modifying a Pseudo Element When Clicked

How can I create a click handler in jQuery to change the color of an 'eyebrow' element above a Heading element? The eyebrow element is set up with a pseudo element in my project, and I'm struggling to make it change color when the heading is ...

jquerycsspseudo-element

New to AngularJS: Issues with ng-controller implementation

I am currently delving into the fundamentals of AngularJS and attempting to grasp them. I recently attempted to create a basic MVC app, but encountered an issue with the controller not functioning properly. The file can locate the angular lib without any i ...

angularjsmodel-view-controllerng-controller

Miscalculation in PHP MySQL: Incorrect output when adding field 1 and multiplying field 2 by

In my MySQL table, there are 4 fields: product price cost, selling price, stock of products, and earnings per unit. For example: If the cost of our product is $100, we sell it for $120, and we have a stock of 10 units, the following code calculates the e ...

phpmysqldatabasehtml

How to make sure a bootstrap row fills the rest of the page without exceeding the height of the screen

In my Angular application, I am using bootstrap to create the following structure (simplified version). <div class="container"> <div class="header> <div class="mat-card> <!-- Header content --> < ...

cssangulartwitter-bootstrap

A guide to accessing files and displaying their content by utilizing button clicks in PHP

Is it possible to navigate through the files in a folder by using buttons like Next and Previous, and then display the file contents within a table cell? Below is my attempted output, which unfortunately isn't functioning as expected: View Sample Ou ...

phparrayshtmlcsslaravel-5.3

Enhancing the alignment of div elements

Our objective is to have two divs aligned next to each other. Here is the HTML code: <div class="test1>Text 1</div> <div class="test2>Text 2</div> And here is the CSS code: .test1 { float: left; } .test2 { float: left; } ...

csshtmlalignment

Is it possible to execute a controller function only when the textarea has completely loaded?

My current setup includes a textarea as shown below: <textarea rows="3" maxlength="144" ng-maxlength="144" type="text" name="testPost" id="testPost_{{item.id}}" ng-init="focusText('testPost', item.id)" ng-model=" ...

javascriptangularjs

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

cssreactjsreact-select

What is the most effective way to create a live preview using AngularJS and CSS?

Is there a way to dynamically change the background color of the body based on the hexadecimal value entered in a textfield, without using jQuery? I want the change to happen live as the user types. The current code works but it doesn't feel right. I ...

javascriptjqueryhtmlcssangularjs