Conceal flexbox item depending on neighboring element dimensions or content

I've encountered an issue while using a flexbox to display two elements side by side. The left element contains text, while the right one holds a number.

When the value in the right element has at least 7 digits ( > 999,999 or < -999,999), I need to hide the left element text to accommodate the larger number.

Does anyone have any suggestions on how to address this challenge? Should I base the logic on the size of the right element or its actual value? Hopefully, there's a solution that doesn't require the use of a watcher.

javascriptcssangularjsflexbox

Answer №1

To monitor changes in the input field, you can utilize the "keyup" event listener:

document.getElementById("right").addEventListener("keyup", checkInput);

This method works effectively in this scenario:

Check out an example on jsFiddle

The choice between using keyup or onchange depends on whether the element is a textbox or not. For textboxes, keyup is preferable, while for other elements like divs, onchange may be more appropriate.

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

Storing a JSON as a cookie in a Django response

Is there a way to store a dictionary/json object in a client-side cookie from Django and retrieve it as a JavaScript object? response = HttpResponseRedirect(reverse('app:home')) response.set_cookie('cookiekey', 'value') retu ...

javascriptpythondjangocookies

To create a complete layout without relying on fixed positioning, ensure that the header, container, and footer collectively

Is there a method to ensure the header, container, and footer encompass the entire layout without using fixed positioning in CSS? Check out this HTML fiddle for reference. <div class="wrapper"> <header> <img src="https://www.ecobin.co ...

jqueryhtmlcss

Detecting collisions between two squares in an HTML5 canvas

class Snake { constructor() { this.x = 400; this.y = 400; this.width = 25; this.height = 25; } draw() { ctx.fillRect(this.x, this.y, this.width, this.height); } } let snake = new Snake(); class ...

javascripthtml5-canvas

Utilizing the Vuetify pagination feature in your project

I am in need of some guidance regarding the configuration of vuetify pagination. I have a card component that I loop through, but I also want to implement pagination around it. Any insights on where to start would be greatly appreciated? <v-pagination ...

javascriptvue.jsvuetify.js

Sequelize Error: Object A is not linked to Object B in Node.js

Two models exist: Question and Answer. Each answer has a question_id, and a question can have multiple answers. I am trying to include all the answers for each question in my JSON response but keep encountering an error: "message": "answe ...

javascriptmysqlnode.jsexpresssequelize.js

What is the best way to utilize a For each loop with a controller object?

I am struggling with a problem in my Angular foreach loop where I keep getting an Undefined value when trying to access it. Can someone advise me on how to modify the code below so that I can successfully access the value and store it in $rootScope? patie ...

angularjsangularjs-scopeangularjs-ng-repeatangularjs-service

Please provide either a string or an object containing the proper key for TypeScript

Within my project, the languageSchema variable can either be a string or an object containing the 'Etc' key. The corresponding interface is defined as follows: let getLanguageSchema = (language: string): string => languagesSchemas[language]; ...

javascriptreactjstypescriptreact-typescript

What sets these async method declarations apart?

What goes on behind the scenes? const facade = { // A: doSomething: async () => await delegatedFunction(), // B: doSomething: async () => delegatedFunction(), // C: doSomething: () => delegatedFunction(), // D: do ...

javascriptasync-await

Learn the art of closing an AngularJS accordion automatically when another accordion is opened within an AngularJS application

I have encountered an issue with the AngularJS accordion functionality. It seems that when I have multiple accordions, such as accordion-1, accordion-2, and accordion-3, they all open simultaneously if clicked on individually. My main concern is: How can ...

javascriptcssangularjstwitter-bootstrap

Ways to prioritize HTML5/CSS3 navigation menu above the content

I am attempting to position my navigation menu on top of the content. Despite using z-index and overflow = visible, the desired effect is not achieved. I want to avoid setting the position relative as it will push the content downwards. Simply put, I want ...

htmlangularjscss

Additional GET request made after update request

After the user updates their contact information in the frontend application, the state is updated and a PUT API request is made to update the current information. When updating user contact details with a PUT call, should another GET call be made to retr ...

javascriptangularjsreactjsrest

Experiencing difficulties with loading Facebook wall feed JSON data

Struggling to integrate a Facebook wall feed using jQuery on my website's client side. Utilizing this URL for the Facebook request: Attempted approaches so far: 1. $.getJSON('http://www.facebook.com/feeds/page.php?format=json&id=407963083 ...

javascriptfacebookjsonjquery

The Stencil EventEmitter fails to send data to the Vue instance

Attempting to develop a custom component using Stencil with an input feature. The goal is to create a component with an input field that, upon value change, emits the input to the Vue instance and logs this event to the console (later updating the value in ...

javascriptvue.jsvuejs2stenciljs

Tips for connecting a Django API project with a nodejs and react frontend

I'm currently working on a Django API project and I am considering incorporating Node.js into the mix. Additionally, I am interested in using React for the frontend of the application. Is this combination of technologies feasible? Would it be advisabl ...

javascriptpythonnode.jsdjangoreactjs

Ways to ensure your Javascript code only runs based on the specific browser

I need a Javascript code to run depending on the browser version. Specifically, if the browser is not IE or is IE 9+, one piece of Javascript should be executed. If the browser is IE8 or lower, another piece of Javascript should be executed. My attempt to ...

javascripthtmlinternet-explorer

Ways to refresh the count of newly added div elements

Currently, I am working on a socket chat program that requires a badge to display the number of users in the chat room every time a new user joins. The code snippet provided below shows a function that adds the name of the new user to the list. The added n ...

javascriptjquerynode.jssockets

Summon the keyboard to appear

How do I make the keyboard appear on my website? I have a javascript function that recognizes keyboard input, but I am struggling to display the keyboard on my mobile device. Is there a way to simulate traditional input and generate key events? I should ...

javascripthtmlmobile

The fixed table header is covering the navigation bar

Currently, I am building a website using Bootstrap and the DataTables library. The problem I am encountering is that the sticky table header is working fine, but it overlaps with the sticky nav bar. Is there a way to make the navbar "push down" the table h ...

htmlcssdatatablesbootstrap-5

Count of elements in one flexbox row

Having a flexbox container with multiple items in row-wrap format, is there a way to use JavaScript to determine the number of items in each row? Essentially, finding out at what point they wrap. For instance- <div class="container"> <div clas ...

javascriptcssflexbox

Tips for bringing in an npm package in JavaScript stimulus

Looking to utilize the imageToZ64() function within the zpl-image module. After installing it with: npm install zpl-image I attempted importing it using: import './../../../node_modules/zpl-image'; However, when trying to use the function like ...

javascriptnpm-install