The margins within the div of the new tab are not applying as expected

Greetings! Currently, I am in the process of generating a dynamic form within a new tab using JavaScript. For some reason, the margin effects on the div element are not being applied correctly. Despite my attempts to set the margins using both classes and IDs in CSS as well as through div.setAttribute, they do not seem to take effect as expected. Here is the snippet of code that I am working with: 

var openWindow = window.open('dynForm.html','_blank','');
    var windoc=openWindow.document;
    windoc.write("This is dynamic form ");
    var div=document.createElement("div");
    div.setAttribute("style","border:solid; margin-left:1cm; margin-right:1cm; margin-bottom:1cm; margin-top:1cm; background-color:lightblue;");

Right now, only the background color appears to be applying correctly in the new tab. Regardless of the specified margin values, the layout looks consistent. You can view how it appears by following this link to the screenshot provided:

Question 2: Interestingly, even though I have defined classes and IDs in my CSS file, they do not seem to be properly applied to the div element.

#myDIV2{
    background-color:lightblue;
}

I attempted setting an ID using div.id="myDIV2";

Additionally, I also tried div.setAttribute("id","myDIV2"), but unfortunately, the outcome remains the same. The classes applied did not yield any noticeable changes in the display. I'm not quite sure what could be causing this issue or where I may have gone wrong. Any assistance would be greatly appreciated.

javascripthtmlcss

Answer №1

Make sure to combine your styles before setting the style attribute in order to avoid overriding them every time you call setAttribute:

var openWindow = window.open('dynForm.html','_blank','');
    var styles= [
      "border:solid;",
      "margin: 1cm;",
      "background-color:lightblue;"
    ];
    var windoc=openWindow.document;
    windoc.write("This is dynamic form ");
    var end_styles = "";
    for (var i=0; i<styles.length;i++) {
        end_styles += styles[i];
    }
    var div=document.createElement("div");
    div.setAttribute("style", end_styles);

Note: the fiddle won't work on stackoverflow, I used it because it's easier to format code

Answer №2

The reason for this occurrence is that your style attributes are being overridden by the previous use of div.setAttribute, and only the last attribute 

div.setAttribute("style","background-color:lightblue");
is being applied. To avoid this, consider applying all styles at once using 
div.setAttribute("style","style1:value1;style2:value2;style3:value3;");

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

Adaptable CSS triangle design

Hello I'm looking to create a responsive CSS triangle similar to the image linked below. I attempted using percentages with border width, but didn't achieve the desired outcome. Can anyone suggest a simple solution? https://i.stack.imgur.com/Yah ...

htmlcsstwitter-bootstrap

The item is not functioning properly as intended

After delving into the concepts of prototype and proto, I believed that I had grasped the concept. However, something doesn't seem to add up. Can someone shed light on why directly accessing an Object like this does not yield the desired outcome? fun ...

javascriptobjectprototypeproto

"Utilizing Typescript and React to set a property's value based on another prop: A step-by

Is there a way to create a dynamic prop type in React? I have an Alert component with various actions, such as clicking on different components like Button or Link. I am looking for a solution like this: <Alert actions={[{ component: Link, props: { /* ...

javascriptreactjstypescript

Utilize the "incorporate" feature to include any string within an array

I am currently working on improving the search function in my application. This particular search function takes input from a search bar and is designed to handle multiple search terms. For example, it should be able to handle queries like "javascript reac ...

javascriptreactjs

Words program with the header feature incorporated

Hello, I am currently working with Laravel to build an HTML page and have successfully converted it to MS Word. However, I am now trying to add a header inside. Can anyone help me achieve this? Here is a snippet of my code: <body> <a class= ...

javascriptphpjqueryms-word

Utilizing Jquery's fadeIn() function to make elements appear gradually on the webpage, whether

New Question: Is there a way to smoothly transition the visibility of a div element without using display:none or CSS, as these methods remove the div from view rather than simply hiding it, causing elements below to shift? If I try setting opacity:0 or v ...

jqueryhtmlcss

Encountering a problem with the JavaScript promise syntax

Using pdfjs to extract pages as images from a PDF file and then making an AJAX call to send and receive data from the server is proving to be challenging. The implementation for iterating through the pages in the PDF was sourced from: The issue lies in pr ...

javascriptpdf.js

Altering the appearance of an input field upon submission

https://jsfiddle.net/3vz45os8/7/ I'm working on a JSFiddle where I am trying to change the background color of input text based on whether the word is typed correctly or incorrectly. Currently, it's not functioning as expected and there are no e ...

javascripthtmlcssonclickjsfiddle

Deciphering JSON data in an Express.js application

In a Node.js/Express.js application, an API call is made to another server which responds with JSON data. However, the received JSON response is not being properly parsed into new variables. What specific modifications should be applied to the code below i ...

javascriptjsonnode.jsexpress

Adjusting the opacity of a div while scrolling

I've searched multiple pages, but haven't found a solution that works for me. I'm trying to make the text in my div gradually become more transparent as I scroll. Can anyone help with this? Here's my code: <script src = "/js/titleSc ...

javascripthtmlcss

Display the div if the input field is left blank

Is there a way to display the div element with id="showDiv" only if the input field with id="textfield" is empty? <form action=""> <fieldset> <input type="text" id="textfield" value=""> </fieldset> </form> <div id="sh ...

javascripthtmlinputshow

Using an Image to Directly Link to Your Own Video Hosting Site

I'm encountering an issue where clicking on an image link to a hosted video results in the browser prompting to download the video instead of playing it directly. I've tried adjusting between absolute and relative paths in my code, but it hasn&ap ...

htmlvideomp4

Fade the current Div out and fade in the following Div while also animating its child element

Looking to achieve a fade in and out effect for 3 divs, with the child element animating its way up from the bottom right once the divs have faded in. I've been working on it but haven't made much progress, does anyone have any ideas? Check out ...

javascriptjquery

Improprove Google PageSpeed score - must resolve

My mobile website is loading incredibly slow, despite my attempts to improve the speed using Google PageSpeed insights. Unfortunately, I'm having trouble interpreting the screenshot and identifying what changes need to be made. Is there anyone who c ...

jqueryhtmlcsspagespeedgoogle-pagespeed

How can I retrieve the element that the user is currently typing in within a designMode iframe?

I have a situation where I have an iframe that allows users to type and edit various divs within it. However, there is one specific div that should not be editable by the user. I have tried to prevent users from clicking on the div using JavaScript: docum ...

javascriptiframedom-eventsaddeventlistener

Just starting out with Boostrap; looking for ways to tidy up this code and achieve the intended effect

UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code! After experimenting with HTML/CSS for some time, I'm now working on my first l ...

htmlcsstwitter-bootstrap

I am experiencing an issue where components are constantly re-rendering whenever I type something. However, I would like them to

Currently, I am in the process of developing a REACT application that takes two names, calculates a percentage and then generates a poem based on that percentage. The issue I am facing is that whenever I start typing in the input fields, the LovePercentCon ...

javascriptreactjsreact-hookscomponentssingle-page-application

Add text to the forefront of video content while in fullscreen mode

Currently, I am facing an issue while trying to embed a video from YouTube. I am unable to draw anything (text, image, etc.) when the video is in fullscreen mode. Despite my attempts to use z-index, it has not been successful. My goal is to create a n ...

htmlcssweb

What is the process for using JQuery to switch the class of an element to 'nested-class'?

Styling with CSS: #logo-container { position: fixed; right:5px; .home-page { /* homepage styling */ } .content-page { /* Modify the $element's class to this class */ margin-top: 78px; } } Using JQuery to change the class of #lo ...

jquerycssclassgroupingnested

Searching with Sequelize for an indirect relationship: How can it be done?

Within my database, there exists a relationship between Users and Roles. A User can have multiple Roles assigned to them. These Roles are connected to Activities in such a way that they can be associated with many different activities. This association all ...

javascriptsequelize.js