Do the elements only find their rightful position when the window is interacted with?

I've encountered a strange issue with a button in my code that inserts HTML textareas onto the page. Initially, when the button is clicked, everything appears as expected. However, upon subsequent clicks, the textareas start to appear in random places - overlapping each other and not adjusting properly. Interestingly, the textareas snap back to their correct positions when the browser window is resized or affected in any way, suggesting a need for content redraw.

It seems that my HTML and CSS are correct, and the problem lies in the browser's rendering. Can someone explain why this is happening and suggest a solution to ensure the textareas always appear in the right place whenever the button is clicked?

If there are any improvements to be made to this question, please provide feedback rather than simply downvoting, and I'll gladly make the necessary adjustments. I'm open to criticism and willing to clarify any points!

EDIT: Here is a JSFiddle link with the code that is causing the issue.

htmlcssdynamic

Answer №1

It's unclear what caused the page to fail to reload in its previous state, but making the adjustment of changing the inline spans to divs with display: inline-block (among other modifications) successfully resolved the issue. Check out this snippet for a demonstration:

$(document).ready(function() {
  var textArea = $("#TextArea1");
  var dateSpan = $("#DateSpan0");
  var theCounter = 1;

  $("#plus").click(function() {
    var theLocation =
      "<div class='formRow'><input class='inp' type='text' name='Loc" +
      theCounter +
      "'></div>";
    var theDate =
      "<div class='formRow'><input class='inp' type='text' name='Date" +
      theCounter +
      "'> <b>in</b></div>";

    $(textArea).append(theLocation);
    $(dateSpan).append(theDate);

    theCounter++;
  });
});
/* CSS styles here */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="addP">
  <div class="wrap">
    <fieldset>
      <legend class="heading"><span class="heading">Location:</span></legend>
      <div id="TextArea1" class="formGroup">
        <div class="formRow">
          <input class="inp" type="text" name="Loc0">
          <button title="Add field" type="button" id="plus"><span>+</span></button>
        </div>
      </div>
    </fieldset>
  </div>
  <div class="wrap">
    <fieldset>
      <legend class="heading"><span class="heading date">Date:</span></legend>
      <div id="DateSpan0" class="formGroup">
        <div class="formRow">
          <input class="inp" type="text" name="Date0">
          <b>in</b></div>
      </div>
    </fieldset>
  </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

Is there a way to preserve the original color format without converting it to RGB

When applying a hsl color in JavaScript, it ends up being converted to RGB instead of staying as an HSL color. document.body.style.backgroundColor = "hsl(0,100%,50%)" document.body.style.backgroundColor; // "rgb(255, 0, 0)" I wanted to set an HSL color a ...

javascriptcsscolorsrgbhsl

What prevents me from displaying the image in the Bootstrap tooltip?

I am currently utilizing the Bootstrap framework v3.3.0 for my website. I'm trying to implement an image as a tool-tip when the user hovers their mouse pointer over an icon. Here is the HTML code I have: <div class="col-sm-5"> <div class= ...

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3

What could be causing my page div to continuously expand on ios devices only?

I'm facing a strange issue where the div element in my document keeps growing endlessly. This problem has been observed on iPhone with iOS 5.1 and 6. It's fascinating to watch the height and min-height values of the page increase continuously, ca ...

jqueryioshtmljquery-mobilemobile-safari

Using Selenium with Python to extract text from an element excluding any text within its nested tags

There is a specific element in question '<div class="ProductVariants__PriceContainer-sc-1unev4j-9 jjiIua">₹199 <span class="ProductVariants__MRPText-sc-1unev4j-10 jEinXG">₹690</span></div>' The goa ...

pythonhtmlpython-3.xxmlselenium

Unique Custom Resources like CSS and JavaScript are used to ensure a consistent appearance across all applications

We have identified a challenge where we aim to develop custom CSS, Javascripts and other resources to maintain consistent look and feel across all our applications. These applications could be built using GWT, Thingworx, JSP, etc., and may differ in natur ...

javascriptcssgwtframeworks

Creating a WordPress widget that links to a local file

Hey there, I've been attempting to utilize the text widget in order to link to a local file, but unfortunately, it's not working as expected, and I'm unsure of the reason why: Here is what I am using: <a href="file:///D:/" target="_blan ...

htmlwordpress

Setting the title attribute for option elements in a select element that is bound to a model using AngularJs

I'm currently working on an HTML select element that is connected to an ng-model. Here's what the setup looks like: <select data-ng-model="accountType" data-ng-options="at.name for at in accountTypes"></select> This is how my accou ...

javascripthtmlangularjsangularjs-directive

Utilizing negative margins in Bootstrap for row positioning

The design of Bootstrap rows includes a margin (left and right) of -15px. This is primarily due to two factors: The .container has a padding (left and right) of 15px The col-* classes include a gutter of 15px. To prevent the empty space caused by the g ...

csstwitter-bootstrapbootstrap-4

Discover the method for measuring the size of a dynamically generated list

I'm currently working on a chat box that displays messages as a list. One issue I'm facing is that when I click on the start chat button, the chat box opens but the length of the list always remains zero. How can I resolve this problem? $(docu ...

javascriptphpjqueryhtml

The xpath identifier in Selenium Python 2.7 for Chrome is dynamically changing with each instance

I have encountered another issue. I previously asked a similar question and tried the suggested method, but it did not work for this specific problem. The HTML code for this element is related to Filters. The main issue is that there is a toggle button th ...

pythoncssseleniumselenium-webdriverui-automation

Show picture during the process of loading an external webpage

Utilizing a script to load an external page (external meaning a page within my website) inside a div. Loading the page takes time, so I want to display an image until the page is fully loaded. JAVASCRIPT function HideLoader() { $('#loader' ...

javascriptjqueryhtmlcss

Is CSS treated differently in a Rails application?

There's something peculiar happening with two sets of identical html and css files that I have. One set is being loaded through Rails' index.html.erb file via a controller, while the other is running through my public folder as a control. The pub ...

ruby-on-railsruby-on-rails-3css

Spinning a CSS object around an axis

Trying to add a unique touch to my image rotation with CSS. While familiar with rotating around x, y, and z axis, I want to achieve a diagonal rotation this time. Wondering if there's a way to tweak the y axis for a more slanted effect on my image? ...

javascripthtmlcss

Arranging expandable divs horizontally

Looking for a way to align these blocks so they can expand while remaining in line, I'm struggling with maintaining their individual spaces. The layout I have in mind is as follows: In this setup, box 2 and 3 should automatically adjust to fill the a ...

htmlcss

When adjusting window size, the input shifts towards the left

Is there a way to prevent my input and login button from moving to the left when resizing the window? I am new to HTML and CSS and would appreciate any tips on keeping them in place. Below is my CSS code: #absolute { position: absolute; top: 411px; le ...

htmlcssresize

Retain the spaces within a string in Java and JavaScript programming languages

My Java code sends data to the browser via an HTTP request, and the output looks something like this: JAVA CODE OUTPUT | Id | Operation | Name | Rows | Bytes | Cost (%CPU)| Time | | 0 | SELECT STATEMENT | | | | 3 ...

javascriptjavahtmlcssangularjs

Obtaining the scene's coordinates in Three.js

Struggling with a coding issue, I've scanned various discussions that don't quite address my specific problem. Any assistance would be greatly appreciated. In my HTML document, I am using the three.js library to create a scene titled scaledScene ...

javascripthtmlthree.jscoordinatesscene

Button with small width containing an icon and text

I am trying to create a simple HTML button that has an icon on top and a description below it. <div class="mybtn"> <div><img src="someimage.png"></div> <div>Button description</div> </div> My question is, ...

htmlcss

Having an iframe at the bottom of the page is causing unnecessary white space below the

I currently have an iframe placed in the footer of my website. When I try to set the height of the iframe to match the height of the footer, it results in unwanted white space appearing below the iframe. The issue can be seen here: JSFiddle To fix this p ...

htmlcssiframe

The arrangement of elements varies based on the type of display

I'm still learning HTML and CSS, and I've noticed that the layout of my elements changes depending on the screen size. Everything looks good on my 24" monitor, but some elements overlap on my 15" laptop screen. What could be causing this issue, ...

htmlcss