Javascript code has been implemented to save changes and address resizing problems

Code Snippet:

<script>
function showMe(){
  document.querySelector('#change').style.display = '';
  document.querySelector('#keep').style.display = 'none'
  document.querySelector('#change1').style.display = '';
  document.querySelector('#keep1').style.display = 'none'
  document.querySelector('#change2').style.display = '';
  document.querySelector('#keep2').style.display = 'none'
  document.querySelector('#change3').style.display = '';
  document.querySelector('#keep3').style.display = 'none'
  document.querySelector('#change4').style.display = '';
  document.querySelector('#keep4').style.display = 'none'
}
</script>

HTML Code:

<table class="table table-user-information">
<tbody>
<tr>
<td>Name:</td>
<td><span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></td> 
</tr>
<tr>
<td>Date of Birth</td>
<td><span id= "keep1">01/24/1988</span><input id= "change1" value= "11/14/2016" style= "display:none;"></td>
</tr>
<tr>
<tr>
<td>Gender</td>
<td><span id= "keep2">Female/Male</span><input id= "change2" value= "Female" style= "display:none;"></td>
</tr>
<tr>
<td>Country</td>
<td><span id= "keep3">US</span><input id= "change3" value= "US" style= "display:none;"></td>
</tr>
<tr>
<td>Email</td>
<td><span id= "keep4"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="741d1a121b34070104041b06005a171b19">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae3e4ece5caf9fffafae5f8fea4e9e5e7">[email protected]</a></a></span><input id= "change4" value= "Email" style= "display:none;"></td>
</tr>

</tbody>
</table>
</div>
</div>
</div>
<div class="panel-footer">
<a data-original-title="Broadcast Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a>
<span class="pull-right">
<a href="#" data-original-title="Edit this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning" onclick = 'showMe()'><i class="glyphicon glyphicon-edit"></i></a>
<a data-original-title="Save this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-success"><i class="glyphicon glyphicon-saved"></i></a>
</span>
</div>

I want the changes made during editing to be saved permanently when I click on the save button. Also, when I click edit, the table expands slightly. I attempted to adjust the font size to remain constant pre and post edit but it was ineffective. What could be causing this issue?

javascripthtmlcss

Answer №1

The reason for the off-center appearance is due to the 250px padding applied to the left of the <div id="icons">. To center them instead, you can utilize margin: 0 auto;. Additionally, you have the option to incorporate CSS specifically for mobile devices using @media queries (more information available at this link).

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

Exploring the application of URL parameters in HTML code

How can I use URL parameters retrieved with Javascript in my HTML? <script> var url_string = window.location.href; //window.location.href var url = new URL(url_string); var c = url.searchParams.get("name"); console.log(c); </script> I am tryi ...

javascripthtmlurlweb

The card-group is off-center within the column

I am facing a challenge with the alignment of 3 cards within a card-group that are contained in a div with the col class, which is wrapped by a div with the row class, all within a div with the container class. Currently, the cards are not centered. I hav ...

htmlcssbootstrap-4

"Adjusting Material UI Select Size - A Guide to Resizing Your

Struggling with getting Material UI selects to work properly with height and width using 'vh' and 'vw', as well as adjusting text size with 'vh'. The boxes have the correct size, but the label text is no longer centered due t ...

javascriptreactjsmaterial-ui

Displaying the active navigation element in ApyCom JavaScript jQuery menu: tips and tricks

Currently, I am utilizing the jQuery navigation menu from ApyCom. Everything seems to be functioning properly except for one issue. Whenever I click on a different navigation element, I expect that element to remain highlighted in order to indicate to the ...

javascriptjqueryhtmlnavigation

Retrieving the inner content of several paragraph elements, all consolidated into a single string

I'm trying to extract the inner HTML of multiple paragraph elements from a string and I need some help. Here's an example input: let HTML = "<p class="Paragraph" >Hello, World 1!</p><p class="Paragraph" >Hell ...

javascriptnode.jsstringalgorithm

Ways to fix the TypeError that occurs when attempting to convert undefined or null to an object by using Function.keys

I am attempting to conceal the field. When the user clicks on glyphicon-eye-open, I will display glyphicon-eye-close and set the condition to true. If the condition is true, then I push that value into an array. Here is the function I am using, I have two ...

javascriptangularjs

An error occurred while trying to import a module due to an unexpected token

Take a look at this codepen link I encountered an error (line 10 in index.vue) with the following import: import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"; Any idea what could be causing this issue? All other ...

javascriptvue.jsthree.jsnuxt.js

Increase the size of a button using CSS styling

Looking for guidance on extending the length of a button in HTML code? Take a look at this snippet: <span class="xp-b-submit xp-b-submit-btn xp-b-right"> <a href="#" class="xp-t-bold" id="PostSubmitLink">Post Search</a> </span> ...

htmlcssbackground

Implementing complex routing with Express.js on top of Node.js

Recently delving into the world of javascript, I have embarked on creating a RESTful API using Node.js and Express.js Here is the breakdown of my directory structure: /server.js /api/api.js /api/location/location.js My goal is to make the API modular, ...

javascriptnode.jsapiexpress

Updating Content in HTML Code Generated by JavaScript

My goal is to change the innerHTML of a div when it's clicked. I have an array of dynamically generated divs, and I want to target the specific table that the user clicks on. I attempted to set the IDs of the tables dynamically in my JavaScript code: ...

javascripthtmldom

The CSS method to conceal the initial list item is proving ineffective

I'm having an issue with my WordPress theme where I want to hide only the first li element but it's hiding all of them. Here is the HTML code I'm using: <div class="nav"> <ul class="nav-tabs nav-justified"> <li class="activ ...

csswordpresscss-selectors

What is the most effective way to extract data from HTML that contains mathematical notations and convert it into plain text format?

Using BeautifulSoup to extract text from HTML can be a bit tricky, especially when dealing with math tags. Below is the HTML code snippet that uses math tags to display text: <p> <span class="aps-inline-formula"> <math display="inline" x ...

pythonhtmlpython-3.xseleniumbeautifulsoup

PHP's json_encode function does not escape the single quote character

I am currently facing an issue with parsing a JSON encoded object in JavaScript. When I use JSON.parse(word_array);, it throws an error saying Uncaught SyntaxError: Unexpected identifier. Upon investigating, I discovered that the object word_array is miss ...

javascriptphpjson

Is it possible to obtain the output of a JavaScript file directly? (kind of like AJAX)

My previous experience with AJAX involved a server-side language like PHP generating xHTML with attached JS. The JS would then query another file using parameters set in either GET or POST. The output of the queried file would be returned to the JS, which ...

phpjavascriptajaxexcelurl

How can XPATH be written for an HTML tag that contains spaces before and after the text, such as <button>spaces text spaces</button>?

When developing a selenium-java script, I encountered an issue while trying to assert the text "Export All". The spaces between the HTML tags are causing difficulties in asserting it. I am seeking assistance in writing the xpath for this scenario. Can any ...

javahtmlxpathselenium-webdriver

What is the best way to send a parameter from jQuery to PHP?

I am trying to create a simple button that, when clicked, will pass a value from jQuery to a PHP file for execution. The idea is that when the button is clicked, it triggers an onclick event which sends the number "1" to the jQuery code. Then, jQuery shoul ...

phpjqueryhtml

javascript Arabic speech synthesis

Attempting to utilize SpeechSynthesisUtterance for Arabic language Successfully functioning with English content $(document).ready(function() { var u1 = new SpeechSynthesisUtterance('Hello world!'); u1.lang = 'en-US'; u1.pitch ...

javascriptjquerytext-to-speech

Unsuccessful outcome from using a basic Ajax call alongside a result handler

Here is the JavaScript code: <script> jQuery(document).ready(function(){ // ensure DOM is ready jQuery('#veranstort').change(function(){ // trigger when input changes origin = "55767 Schwollen"; destination = "13509 Be ...

javascriptphpajaxpostgoogle-distancematrix-api

Extract information from Firebase and display it in a React component

I am trying to extract and display data retrieved in componentDidMount. Here is the state setup: constructor(props) { super(props); this.state = { loading: true, data: [] } } and here is the componentDidMount function: compo ...

javascriptreactjs

Adding HTML elements to a button using an array: a step-by-step guide

In the process of developing a web application feature using JavaScript, I have come up with a simple plan: Place a button in the bottom left corner. The button should only become visible after scrolling begins. Upon clicking the button, a new window wil ...

javascriptjqueryhtmlcsstwitter-bootstrap