Question

58

Difference between source code and inspect element

rated 0 times [ 59] [ 1] / answers: 1 / hits: 43715 / 11 Years ago, mon, september 23, 2013, 12:00:00

I can't find a specific style element in my code which I've been able to edit by using the code editor in both Chrome and Firefox (firebug). Which brings me to my question, why is the view source so different from the actual code? I know JQuery and Javascript are doing something to it (adding classes and junk...) because I'm using the modal from the JQuery UI, but why can't I find the style elements??? Where are they???

Source Code:

<div id=modalEmail-ESI title=Email - ESI class=infoModal>

From Code Editor:

<div class=ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable tabindex=-1 role=dialog aria-labelledby=ui-dialog-title-modalEmail-ESI style=display: block; z-index: 1004; outline: 0px; position: absolute; height: auto; width: 800px; top: 205px; left: 577px;><div class=ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix><span class=ui-dialog-title id=ui-dialog-title-modalEmail-ESI>Email - ESI</span><a href=# class=ui-dialog-titlebar-close ui-corner-all role=button><span class=ui-icon ui-icon-closethick>close</span></a></div><div id=modalEmail-ESI class=infoModal ui-dialog-content ui-widget-content style=width: auto; min-height: 0px; height: 282px; scrolltop=0 scrollleft=0>

In the inspect element code, there is a style attribute width:800px; that I want to change, but I've searched for it in the code and it's apparently non-existent.

Is that style attribute dynamically generated?

UPDATE: Based on your feedback, how can I update the width of the email modal when the style attribute is dynamic?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

madelyn

Add To Favorites

Follow

Total Points: 449

Total Questions: 100

Total Answers: 100

Location: Seychelles

Member since Fri, May 7, 2021

3 Years ago

madelyn questions

1 Select value doesnt change the first time I trigger onChange event when using setSate React

Tue, Jan 11, 22, 00:00, 2 Years ago

1 React Native performance slow

Wed, Jul 28, 21, 00:00, 3 Years ago

1 MUI Datatable custom toolbar

Wed, Jul 14, 21, 00:00, 3 Years ago

1 Multi row swiper not working in react from swiper.js

Sat, Nov 7, 20, 00:00, 4 Years ago

1 How to make step wizard form in ReactJs?

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 11 Years ago cody · Accepted Answer

When you say view source, I'm assuming you're talking about the editor, not the actual View Source. When you view source from the browser, you get the HTML as it was delivered by the server, not after javascript does its thing.

When you're in the editor in your dev tools, you're looking at the DOM as it exists at the moment, which includes inline styles, parsing corrections, and other things that are the result of javascript running.