The input box should automatically adjust its size when the div shrinks

I've run into a little issue that I could use some help with.

So, here's the situation:

I've created a contact form with several input fields. The problem is that these input fields are taking up about half of their containing div on a regular-sized page. However, when I view the webpage in a browser and resize it, the page can become smaller than the input fields.

Here's what I'm hoping to achieve:

I'd like the input fields to be able to resize themselves so they fit nicely inside the div without overflowing or overlapping outside of it.

I've tried looking for solutions on both Stack Overflow and Google, but I haven't had much luck finding exactly what I need.

Below is the HTML for my contact form:

<div id="contact-formulier">
    <form method="post" action="contact.php">
        <label>Naam*</label>
        <input name="naam" placeholder="Graham Neal" required>
    </form>
</div>

And here's the CSS styling for the form:

input, textarea {
   width:439px;
   height:27px;
   background:#efefef;
   border:1px solid #dedede;
   padding:10px;
   margin-top:3px;
   font-size:0.9em;
   color:#3a3a3a;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
}

textarea {
   height:213px;
}

input:focus, textarea:focus {
   border:1px solid #97d6eb;
}

Answer №1

Adjust the form width to 100% and set the input and textarea widths to approximately 90%. This should give you the desired outcome. Here's how you can do it:

form {
    width: 100%;
    float: left;
}
/* Customize the text boxes */
input, textarea {
    width: 90%;
    height: 27px;
    background: #efefef;
    border: 1px solid #dedede;
    padding: 10px;
    ...
}

Answer №2

When the width is fixed in the CSS as you have it, achieving dynamic resizing becomes a challenge.

Using percentages may be an option, but they are not always reliable, especially for more complex scenarios or when including the example within other elements.

An effective method is utilizing jQuery to manipulate the width:

$(document).ready(function() {
    $(window).resize(function() {
        $('input').width( $('#contact-formulier').width() - 22);
    });
});

Check out the updated code here: http://jsfiddle.net/Lnnxsrwj/2/

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

Looking for PHP function recommendations!

I need some help with creating a function in my PHP page. I want to create a function that can transfer a value from Field A to Field B. Here is my current code: <table class="table table-hover table-bordered"> <thead> <tr> <th ...

Choosing the Font-Family for Your Django Website with Bootstrap

Here is the CSS stylesheet that should apply Courier New to various elements like a, p, h1, h2, etc... a, p, h1, h2, h3, h4, h5, h6 { font-family: "Courier New"; color: #54627B; } While my a tags are displayed in Courier New font, unfortunat ...

Creating an HTML hyperlink that does not navigate to the linked page

Imagine those webcams accessible over the internet where you can move them left and right with a click of a button. I want to create something similar but for controlling lights in my house. Currently, when I click a button to control the light, it loads ...

Notify when a variable matches the value of a div

I am attempting to display an alert message when my JavaScript var is equal to the value of a div. Here is the code I'm using: function checkMyDiv() { var elementCssClass = document.getElementById("Target"); if (elementCssClass == "hello") ...

Mobile Navigation Bar Reaches Beyond Its Limits

Having some trouble with the mobile view of a website I'm working on. The navbar width seems to be too wide, causing issues with the overall layout. Here's the link to the site - <body data-spy="scroll" data-target="#landingkit-navbar" data- ...

When viewing my website on a mobile device in landscape mode, the CSS divs sized at 20% do not match the size of the div set at

Currently, I am working on a mobile application that is HTML5 cross-platform compatible. To design the app, I am utilizing Bootstrap 3, although it seems unrelated to the specific issue I am facing. Here's the problem at hand: Within my application, ...

Is it possible to showcase HTML content within a C# string in a straightforward manner?

I am attempting to achieve a specific format, similar to the following: string html = @"Hello <b> World ! </b>"; The intended result should look like this: Hello World ! The string html can be utilized on various elements such as label, t ...

Is there a WebKit equivalent to the MDC (Mozilla Documentation Center)?

Experimenting with the newest HTML5 features is rewarding, yet challenging as standards and browser-specific implementations constantly evolve. While Mozilla provides a valuable resource with their MDN Doc Center documenting Gecko changes, I'm curious ...

Attempting to customize the appearance of a submit button independently from other input elements

Hey there, I have a question that might sound silly, but bear with me as I'm still learning CSS. I've been experimenting with CakePHP and its form helper to create a form. Here's a snippet of the code I'm working with: <p><?ph ...

How can PHP be utilized to dynamically add classes to <li> elements and alternate them after every third item

I'm trying to find a way to add a class to an unordered list and alternate that class after every third item. Here's the code I have so far: <?php $i=1; foreach($this->items as $item) : ?> <li class="<?php if ($i % 3 == 0) : ...

Scrubbing the htaccess file for custom redirect rules in cPanel

I am looking to optimize my .htaccess file for the following purposes: Removing the .html extension Redirecting non-www URLs to www Forcing HTTP to HTTPS Changing .com/index.html to .com/ Implementing all redirects through cPanel's 'Redirects&a ...

A guide on implementing a .click function with jQuery

I have a code snippet that is supposed to add 100 to a number in a MySQL table when a button is clicked. However, the code does not work as expected. When I click the button, nothing happens, but if I refresh the page, it adds 100 to the number. Can some ...

What is the best way to position an element on the left side of the navbar without having it animated?

Could someone assist me in placing the Life's Good logo on the left side of the nav bar without applying the animation from the "btn" class? Below is a snippet of my code with an example where I want the logo highlighted in Yellow: * { padding:0; m ...

Firebase has flagged the Google Authentication process with a message stating: Entry denied: The request made by this application

I have connected my domain to Firebase authentication and granted authorization for authentication access. If you want to test it out, feel free to visit this link signInWithPopup(auth, provider) .then((result) => { // This provides a Google Acc ...

Utilizing NSURL to insert HTML credentials into the <input> tag

Trying to send a request from my iOS app to the Mistar website through NSURLSession. The goal is to load the website in the background, provide username and password strings into the input fields, and gain access to the logged-in page. This is the relevan ...

What steps can I take to prevent my website from getting distorted when I zoom in or out?

I have a website in progress and I'm facing an issue with my navbar distorting when I zoom in. As I increase the page's zoom, the navigation buttons start moving apart and eventually overlap each other. How can I prevent this from happening? Belo ...

JQuery and CSS can be used to create a div overlay without impacting the positions of other divs on the

Is there a way to make a div overlay other divs (like a dropdown list) without affecting the positions of other divs? I have a #hidden div that appears when you hover over a #HoverMe div, but it moves the position of other divs when hovered. How can I ...

Modify the parent div's background color on mouseover of the child li

I want to update the background image of a parent div that contains a series of ul li elements. Here is the HTML code I am working with: <section class="list" id="services"> <div class="row"> <ul> <li>& ...

Unable to update the list's text color to a white hue

I have a list with glyphicons that turn black when I hover over them, but I want them to appear white instead. My list is using bootstrap. Here is the list: <ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;fon ...

Scroll the second div to align with the first div

I am in need of a scrolling set of divs that functions like a slide show. I have been searching for a solution but haven't found one yet. Is there a way to make the commented-out div scrollable by clicking somewhere on the page or an arrow image? I wa ...