Databases
StackOverflow2013
Postsdbo
POinnerHTML doesn't hold width - Javascript/CSS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POinnerHTML doesn't hold width - Javascript/CSS
    primarykey
    data
    text
    <p>I am using innerHTML to print out some divs with some text boxes based on a selected option.</p> <p>When the html prints out the divs do not hold their width despite me coding it in the css externally, internally OR inline. In firebug the width is shown to be set at 200px, yet visually you can clearly see that the width is not applying. Tested in both Firefox &amp; Chrome...</p> <p>Can anyone help me? Here is a JSFiddle:</p> <p><a href="http://jsfiddle.net/HhJhK/" rel="nofollow">http://jsfiddle.net/HhJhK/</a></p> <p>Javascript:</p> <pre><code>window.getTickets = function () { $amountId = document.getElementById('event_tt').value; $x = document.getElementById($amountId).value; var div = document.getElementById('booking_area'); div.innerHTML = '&lt;div style="width:750px;clear:both;"&gt;&lt;div class="cell" style="width:30%;"&gt;First Name&lt;/div&gt;&lt;div class="cell" style="width:30%;"&gt;Last Name&lt;/div&gt;&lt;div class="cell" style="width:30%;"&gt;Email&lt;/div&gt;&lt;/div&gt;'; for (var i = 1; i &lt;= $x; i++) { div.innerHTML = div.innerHTML + '&lt;div style="width:750px;clear:both;"&gt;&lt;div class="cell" style="width:30%;"&gt;&lt;input type="text" name="par_fname" id="par_fname"&gt;&lt;/div&gt;&lt;div class="cell" style="width:30%;"&gt;&lt;input type="text" name="par_lname" id="par_lname"&gt;&lt;/div&gt;&lt;div class="cell" style="width:30%;"&gt;&lt;input type="text" name="par_email" id="par_email"&gt;&lt;/div&gt;&lt;/div&gt;'; } } </code></pre> <p>CSS:</p> <pre><code>.cell { width:200px; display: inline; overflow:hidden; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdc5
    1. USDavid Dawson
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POinnerHTML doesn't hold width - Javascript/CSS
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COUse a table, it would make your life much easier
      singulars
      1. POinnerHTML doesn't hold width - Javascript/CSS
      1. USama2
    2. CO@ama2 thanks for the speedy reply but tables are incredibly poor to work with and I don't want to take the easy way out. Surely there is a way to resolve this. I try to avoid tables at all costs...
      singulars
      1. POinnerHTML doesn't hold width - Javascript/CSS
      1. USDavid Dawson
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload