An alternative method for adjusting the width of text input fields in CSS without using

Is there a CSS alternative to the calc function that can be used for older browsers (such as the default Android browser) in order to dynamically set the width of input text fields while leaving space on the right for a submit button?

This is my current CSS code:

div .feedburner form input[type=text] {
    width: calc(100% - 76px);
}

I attempted an alternative method, inspired by this solution, but it did not work as expected:

div .feedburner form input[type=text] {
    /** width: calc(100% - 76px); */
    padding-right: 76px;
    width: 100%;
}

Answer №1

There are clever ways to create visual effects using an invisible border and the border-box sizing model.

.calc .content {
    background: red;
    height: 250px;
}
.noCalc .content {
    background: green;
    height: 250px;
}
.calc {  
    width: calc(100% - 100px);
}
.noCalc {
    box-sizing: border-box;
    width: 100%;
    border-right: 100px solid transparent;
}
<div class="calc">
  <div  class="content">CALC</div>
</div>
<div class="noCalc">
  <div  class="content>NO CALC</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

Tips for clearing floated images when the sidebar is also floated

Can someone assist me with this code snippet? I am trying to figure out a way to clear the nearest floated block. It seems that whenever I use the clear property, it clears any floated blocks on the page, even if they are in a different div. Here is the ...

Pause Vimeo Video while another video is playing

I have a specific requirement for a webpage where two videos are present. The scenario is that when one video is being played and I decide to start playing the second video, the first video should automatically stop. Essentially, only one video can be play ...

Disabling the hover effect of a material-ui button within a styled component

I tried adding the css hover property to disable the button's hover effect, but it doesn't seem to be working for my situation. How can I go about resolving this issue? import Button from 'material-ui/Button' import styled from 's ...

The responsiveness of the container in Bootstrap 4 is not optimized for mobile devices

In one of my school projects, I decided to incorporate Bootstrap 4. The layout I created consists of a carousel positioned alongside some text. However, the issue lies in the fact that the carousel on the right is responsive across various device widths ex ...

The web typography appears fuzzy or has incorrect thickness, lacks consistency across pages and even within a single page

The font (ProggyCleanSZBP.ttf from 1.1.5 release) appears to be intermittently thick and blurry. If you compare with , you'll notice that the latter displays as desired in most cases, but there are instances where the issue occurs, such as the first ...

retrieve the image name of the background using jQuery

How can I use jQuery to extract only the background image name from a div with a background image? I currently get 'http://localhost/xampp/uconnect/images/tour-networks-ss.png' but I only want 'tour-networks-ss.png' Any assistance wi ...

Conceal the navigation bar when scrolling to the top of the

Hey there! I'm looking for a way to hide my navigation bar when not scrolling, and then display it again once I start scrolling. Currently, I have two menus on this website: one with a white background and the other with a blue background. You can fi ...

Struggling with aligning items vertically in Bootstrap 4?

Despite my experience in programming, I am struggling with CSS and HTML. I am attempting to create a simple "Login Page" for my personal web application. GitHub: https://github.com/n-winspear/cashflow-webapp After trying various solutions suggested in ot ...

necessitated in specified input with assigned value

Here is some code I have: <!DOCTYPE html> <html> <body> <form action="/action_page.php"> <select required> <option value=1>Volvo</option> <option value=2>Saab</option> <option value=3>Merc ...

The Twitter Bootstrap navbar dropdown is hidden behind the slider image

I am having an issue with my navbar built using Twitter Bootstrap 3.1.1. On iPhones and iPads, the dropdown menu is hiding behind the slider image. It is set to position absolute and has a z-index of 1000. Strangely, on desktop screens, everything works f ...

Guide on designing a form for generating custom URLs

I have a form on my website that generates a URL, but it requires the user to wait until the entire page is loaded in order to function properly. I believe this is because I am using window.onload and should switch to using $(document).ready instead. How ...

Initiate an animation in Wordpress once the entire page has finished loading

Recently, I incorporated some "raw html" elements with animations into my WordPress site. However, the issue I'm facing is that these animations kick off as soon as the page loads, without waiting for the preloader to complete and display the actual c ...

Retrieve the <style> tag response and inject it into the head section of the HTML using React

Although I am aware that this may not be the best practice, it seems to be the most suitable solution for this particular case. The server response contains something like this: <style id="styles">.color_txt{color:green;}</style> I am attempt ...

Utilize API or alternative methods for analyzing Instagram data

My master's thesis requires me to dissect multiple Instagram profiles, each containing over 1000 posts. I am in need of a comprehensive list including the following details: Type of Post (Image, Multi Image, Video) Description Likes Comments (total c ...

jQuery UI Tabs - The initial slide is not being displayed automatically

My default setting for the first tab is .ui-tabs-hide, causing it to be hidden along with all other tabs. Here's my code snippet: <script> $(document).ready(function(){ $("#slide-container").tabs({ fx: { opacity: 'toggle' ...

"Enhancement in Chrome: Inclusion of Origin header in same-origin requests

When we POST an AJAX request to a server running locally, the code looks like this: xhr.open("POST", "http://localhost:9000/context/request"); xhr.addHeader(someCustomHeaders); xhr.send(someData); The webpage where this javascript is executed is also on ...

What is the best way to transfer an array made in JavaScript to a different JSP and subsequently utilize that array in a Java function within that JSP?

I have a script that needs to pass an array called "playernames" to a Java function on another .jsp. I'm looking for guidance on how to send this array to the other page and then retrieve it for my Java function. <script> function getPlayerName ...

What is the method for retrieving the value of a checkbox when clicked?

Managing a dynamically created HTML table with checkbox values can be tricky, especially when the value needs to reflect changes in real-time. If you are struggling to update the status of the checkboxes based on database values and pass that information t ...

Reduce the spacing between div elements to eliminate any gap between the rows

I'm trying to keep the divs close together, but the second row isn't lining up properly and the divs don't have any margin. My CSS for the div is as follows: .post { box-sizing: border-box; display: block; float: left; font ...

Is there a way to have line breaks done automatically within the <pre> tag?

Struggling to insert a code snippet into my React application, it's odd that no matter what I try, the format doesn't include line breaks. Below is the code snippet: import React from 'react'; import './Hello.scss'; const ...