When the input element's visibility is toggled, the text elements wiggle slightly

I have created a layout that looks like this:

<ul id="playlists" class="ui-sortable">
    <li data-id="b69c8348-f47c-4156-a975-a2f1009610a8" data-type="3" class="listItem playlist active"><i class="fa fa-list fa-fw"></i>
        <span class="title" title="">
            Playlist 0000
        </span>
        <input type="text" value="Playlist 0000" class="editableTitle hidden" maxlength="255" />

        <span class="count">0</span>
    </li>
</ul>

$('.title').click(function(){
    $('.title').hide();
    $('.hidden').show();
});

$('.hidden').blur(function(){
    $('.title').show();
    $('.hidden').hide();
});

For a demonstration of the issue I'm facing, check out this JS Fiddle link (tested in latest version of Chrome):

http://jsfiddle.net/3WEHJ/14/

Whenever I toggle the visibility of the hidden input, the font-awesome icon moves up and down. I have tried using vertical-align tricks to align it, but it becomes misaligned when the input is hidden again. Is there a straightforward CSS solution to handle both scenarios?

javascripthtmlcss

Answer №1

To eliminate any flickering, it is important to match the line-height of the input element with that of its neighboring text elements. The font-awesome icon has a line-height of 14px while the input element's line-height was previously unspecified, leading to an assumed value of 16px. By adjusting it to 14px and ensuring alignment, the issue of flickering has been resolved.

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

Align the active li vertically within the ul

Looking to create a layout similar to musixmatch where the active verse is displayed at the center of the ul. https://i.sstatic.net/X7RV1.png I have experience doing this with JavaScript, but I'm curious if it's achievable using only CSS. < ...

css

What is the best method for importing multiple meta tags into an HTML document?

I am looking for a way to streamline the use of meta tags on my website. Currently, I have identical meta tags on all pages and three different layouts, each with its own <head> tag. Instead of manually copying and pasting the meta tags into each la ...

phphtmlimport

What is the best way to divide a list in a Django template?

Currently, I am working on pagination in Django and looking to display the page numbers that come after the current page. The code snippet I am using is as follows: {% for page in blogs_page.paginator.page_range|slice:"0:{{ blogs_page.number }}" %} Howev ...

pythonhtmldjango

Is your toggle() function failing to work on dynamically loaded ajax content?

$('.slideArrow').toggle(function (event) { //some code }, function (event) { //some code }); This code functions correctly for content loaded during the page load process. However, it fails to work for content loaded via ajax requests. The ...

javascriptjqueryajaxtoggle

When I click on the md-select element, a superfluous "overflow-y: scroll;" gets added to the <body> of my webpage

Typically, I have the following styles on my body: element.style { -webkit-app-region: drag; } However, when I interact with a md-select element (you can observe this behavior on the provided link), additional styles are applied. element.style { -w ...

javascripthtmlcssangularjsangular-material

Obtain saved browsing history in HTML5 with the use of JavaScript

I'm currently utilizing the History.js library found at https://github.com/browserstate/History.js/ to create an AJAX-based application that leverages the HTML5 History API for dynamically changing the URL and title of the browser. Does anyone have s ...

javascripthtml

How to set the initial speed of a jQuery fadein animation

I'm looking to optimize the loading process of this div on page load so that it displays instantly and then refreshes automatically every 10 seconds. Currently, it refreshes every 10 seconds but I would like it to load instantly as well. Is there a ...

javascriptjquery

Is there a way to have this <a> link trigger a postback to my ASP.NET method when clicked?

Is there a way for me to trigger a postback to my method when I click on a specific link? <li runat="server" onclick="log_out" > <a onclick="log_out" runat="server" href="LogIn.aspx" ><i class="icon_key_alt"></i> Log Out</a& ...

javascriptjqueryhtmlasp.net

Include an image in a Material-UI card without specifying a file path

I'm looking to include an image in a CardMedia component, but the image is currently stored as a base64 string like this: iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABg99fBOxrQANHibkS1KoplYAFHgUGz85g6Ggnn2ysaMXSlccHislKRm7uI10eB9piJYuPjE3epRveUuwrTNidn9ad2 ...

javascriptmaterial-ui

Neither removing nor adding any classes

I'm working on implementing a star rating system and I've successfully made the stars turn yellow. However, I'm struggling with making them toggle back to white when clicked again. As a beginner in HTML, I'm not sure what's causing ...

htmljquery

Strange image movement occurs when utilizing jQuery slideDown and slideUp

My HTML structure is as follows: <div class ='profileName'> <hr> <span class='name'>Content</span> </div> <div class ='profile'> <div class='floatRightImg padded'> < ...

jqueryhtml

Is there a way to position the Bootstrap navbar menu items in the center specifically for mobile devices?

I have a navbar that I want to center the menu li items when it collapses. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c978b978b">[ema ...

csstwitter-bootstrapflexboxbootstrap-5

Creating borders around Material UI grid items can be achieved by applying a border style to the

import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; const useStyles = makeStyles((theme) => ({ ...

cssreactjsmaterial-ui

Stopping Form Submission with MUI TextField

I am currently creating a form using React along with MUI. I'm trying to figure out how to prevent the form from being submitted when the user hits the enter key. Usually, I would use e.preventDefault(), but for some reason it's not working in th ...

javascriptreactjsformsmaterial-ui

Eslint React Hooks Issue: receiving a warning from eslint-plugin-react-hooks about missing dependencies in useEffect for a function dependency

import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import Actions from '../actions'; export const UserComponent = ({ foo, baz, bar, user, fetchUser }) => { use ...

javascriptreactjseslintreact-hooks

Monitor the onBlur event exclusively on the Parent Div

Currently, I am in the process of developing a customized dropdown control for my application, and I have specific requirements to meet. Primary Action: When the user clicks on the textbox, a div opens up with a list of items that they can select from. Th ...

javascriptjquery

What is the best way to limit the width of a Template Field in a GridView?

Can anyone assist me in managing the width of the 'Link target' column within this gridview? When a long URL string is inputted, it causes the page to extend beyond the panel and creates an awkward appearance. I've tried adjusting the colum ...

htmlasp.netvb.netgridviewwidth

What is the best way to iterate through the components object within a template?

In a usual Nuxt.js component definition, it is common to see the structure like below: <script> export default { components: { // components } data() { return { // key/value data } }, methods: { // method definitions } } &l ...

javascriptvue.jsnuxt.js

Using PHP to generate a single random number that is shared among all connected clients

Hello friends, I find myself faced with a challenge at the moment. I'm brainstorming an effective method to show a random number that will be synchronized across all connected clients every 120 seconds. Currently, I've set up a system to calcula ...

javascriptphphtmlcsstimer

What values can be used for the CSS Property "padding-right-ltr-source"?

Currently, I am facing an issue with box padding specifically in Firefox. Upon inspecting the affected span element, I noticed a property called "padding-right-ltr-source" with the value "physical". Here is the snippet of code: >padding: 0px 15px; ...

cssfirefoxpadding