Any tips or hacks for successfully implementing vw resizing on the :before pseudo-element in webkit browsers?

When using vw sizes on webkit browsers, a well-known bug can occur where they do not update when the window is resized. The typical workaround for this issue has been to employ javascript to force a redraw of the element by reassigning the z-index upon resize. For example:

CSS:

#siteSearch input { font-size:10vw;}

Javascript/jQuery:

function resizing()  { $("#siteSearch *").css("z-index", 1) }
window.onresize=resizing;

However, this solution does not seem to work with :before content. I have created a demonstration on JSFiddle to showcase this issue. When you resize the window, the search box/text adjusts its size correctly, but the magnifying glass icon (which is an icon font character generated by :before content) does not. To see updates for the icon, you need to refresh the page or rerun the JSFiddle. In Firefox, the icon may also display improperly due to cross-site issues, though that is unrelated - sizing works fine there.

javascriptjqueryhtmlcsswebkit

Answer №1

Working with pseudo elements using JavaScript can be quite challenging. I attempted to figure it out, but unfortunately, I couldn't make it work that way. My recommendation is to place everything within a label element, insert the glyphicon there, and then style the label accordingly.

Here is an example of how you could structure the HTML:

<div id="siteSearch">
    <label>&#xf002;<input type="text" placeholder="Search" /></label>
</div>

For the CSS styling:

#siteSearch input {
    // Your styles here
}

#siteSearch label {
    // Your styles here
}

I have also created a fiddle for you to experiment with.

I hope this solution proves helpful to you in some way. Best of luck!

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

remain on the multi drop down page for a specified duration

I have created a dropdown menu with a second level drop-down page that is a form. Now, I want the second level drop-down page to stay open longer, so I have used the following JavaScript code: <script> var timer; $(".parent").on("mouseover", functio ...

javascriptphphtml

Utilizing Firebase messaging onMessage function is exclusively enabled within a window environment

Incorporating Firebase Cloud Messaging into my project allowed me to send and receive push notifications successfully. While I can receive the push notifications, unfortunately, I am encountering issues with getting the notification events to function prop ...

javascriptfirebasevue.jsvuejs2firebase-cloud-messaging

What steps do I need to follow to create a controller component for a Form Element

I am trying to create a dynamic controller component in React Native, but I am facing issues with accessing errors. I am using "react-hook-form" for form elements. Here is my component: const { control, handleSubmit, formState: {errors}, ...

javascriptandroidreactjsreact-native

Variation in `th` & `td` Width in Table

Is it possible to have different widths for th and td, such as 50px for th and 500px for td? To address this issue, I am utilizing datatable. To enable others to help me, here is a simple code snippet: .abc { width: 500px; } .def { width: 50px; } ...

htmlcss

Add Content to Textbox by Clicking

In my current setup, I have a variety of buttons that, when clicked, should add the text from the button to a text box. Each time a button is clicked, I want the text to be appended to whatever is already in the input field. Current Approach $('#js- ...

javascriptjqueryjquery-ui

Using Tailwind CSS's width property w-11/12 actually returns a full 100% width instead of the expected 91.66

It seems that the w-11/12 class is not behaving as expected. According to the documentation, it should give a width of 91.666% but instead, it's filling up 100%. This issue only occurs with the value 11, while other values work fine. Has anyone else e ...

cssreactjstailwind-css

The image disappears when I click on a link and then return to the main page, but this only happens in Mozilla Firefox

Upon opening the main page, everything functions flawlessly. However, if I navigate to another page through one of my href links and then return to the main page, my div with the class "bild" disappears. Oddly enough, this issue only occurs in Mozilla Fire ...

htmlcss

JavaScript: Only a single function call is successful

Recently, I encountered an issue with my registration form. Everything was working smoothly until I attempted to add a new onblur() event to a different text field within the same form. Surprisingly, this caused the original ajax call to stop functioning, ...

javascriptajax

Sorting and Filtering JSON Data by Value in JavaScript: A Comprehensive Guide

After successfully integrating the Star Wars API to show character names from the "people" object in this JSON array retrieved from , I now need to filter the results based on a specific value which corresponds to . The current code displays all species of ...

javascriptarraysjsonsorting

Updating a property of a JavaScript class using a callback function inside the class method after an AJAX request

Here is the code snippet from my JavaScript file: var myApp = myApp || {}; myApp.TestClass = function () { this.testProperty = null; } myApp.TestClass.prototype = { constructor: this, testMethod: function () { var testClass = this; ...

javascriptjqueryajaxoop

The outcome is not displayed in the appropriate section of the text

There seems to be an issue as the console is not displaying the response to the input, such as "the answer is correct" or "the answer is either empty or incorrect". <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</ ...

javascripthtml

It is not possible to include a new property to an object while inside a function

Looking to add a property to an object? Check out the code below: import React from 'react'; import { Link } from 'react-router-dom'; const Question = () => { let active; const handleClick = (iconName) => { active = {}; ...

javascriptreactjsfunctionobject

Navigating a Bootstrap carousel with buttons: A step-by-step guide

Here is the code snippet I am currently working with: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <link href="https://code.jquery.com/ui/1.11.4/them ...

jqueryhtmlcsstwitter-bootstrap

AngularJS toaster doesn't seem to be appearing

I have integrated the angularjs toaster library into my project. Here are the necessary references: https://github.com/jirikavi/AngularJS-Toaster Added the following references for the library: <link rel="stylesheet" href="bower_components/Angu ...

javascriptangularjs

The loading indicator fails to show up when users navigate between pages that have already been loaded in NextJS and ReactJS

What do I need: I am seeking a way to show a loading indicator whenever a user switches between pages on my website. After discovering an effective example at https://github.com/zeit/next.js/tree/canary/examples/with-loading, I implemented a similar appro ...

javascriptreactjsnext.js

Trouble with Add To Cart feature in React app due to issues with Context API

I have been following a tutorial located here. I followed the steps exactly and even checked the code on the related github repository, which matches. However, when I try to add a product to the cart by clicking the button, the state does not update. In Re ...

javascriptreactjsstate-managementreact-state-managementreact-context

A guide to exporting a PDF in A4 size landscape mode with jspdf

As a novice in UI development, I am currently trying to export HTML content to PDF using the JSPDF library. However, I have encountered difficulties in generating the PDF in A4 size landscape mode. The HTML code includes data with charts (canvasjs/chartjs) ...

javascripthtmlcssjspdf

Check if a given string conforms to the JSONATA expression format

Here's the scenario: A user inputs a JSONATA expression into a form field. The form should show an error message if the entered JSONATA expression is invalid. Is there a regular expression or pattern that can determine the validity of a string as a ...

javascriptnpmjsonata

Executing a javascript function from PHP when a form is submitted: a comprehensive guide

I am looking to trigger a javascript function from PHP when the form is submitted. This function will have access to PHP variables and will use AJAX to send them to a PHP script on another website. The code below serves as an example: <?php .... ..... ...

phpjavascriptajax

Transferring PHP data to AJAX variable

Once a calculation form is completed and the total is generated through PHP, we are left with 4 pieces of data (variables) in PHP: $totalprice; $totalduration; $totaldives; $totalhire; Currently, PHP ends with an echo for each of these variables. T ...

phpjqueryajaxformsvariables