I have a table class that I use to vertically centralise text in a span or div. I am using Handlebars in Node to render several templates server side, I have used this method on several partials in my web project, with no problems.
However in one particular partial / area of markup, either the browser or Handlebars is ignoring or removing the table, tr and td tags, showing only the text that is inside the tags.
In the past when this has happened it was because my tags were incorrect. However I have cross checked this code with my other markup where the table tags do show (in other partials), so I can't see where the problem is, and I can't find any suitable online topic about this (it is probably something really obvious that will make me look like a dummy).
I have tried in Chrome and Edge. I have also tried saving the markup snippet in a .html file (as opposed to a .hbs file) and opening that in the browser, and by doing this it does show the table tags. The consequence of this error is that I am unable to vertically align the text in the span. I am not sure if the markup is invalid according to the browser or Handlebars, but I am not using any {{Handlebars}} tags here so it shouldn't warrant the table tags to be invalid.
Markup:
<div class="lp-menuselector" title="View summary of Individual Learning Plan and evidence pack">
<div class="lp-menuselector-iconholder">
<img src="icons/icon_lp-overview.svg"/>
</div>
<span class="lp-menuselector-textholder">
<table class="tablecellleftalign">
<tr>
<td>
ILP Overview
</td>
</tr>
</table>
</span>
</div>
Output markup shown in Chrome Developer Tools / Elements:
<span class="lp-menuselector-textholder">
ILP Overview
</span>
Topic Closed:
After I restarted my computer and restarted the Node application, this error no longer occurs. Glitches in the matrix.
Related
<div id="container">
<div class="image">< img height="500px"src="./images/image-product-desktop.jpg" alt="">
<p>PERFUMES</p>
</div>
when I add a paragraph the div breaks into two parts, please help.enter image description here
You have to properly write the html markup by opening and closing the tags. The markup you shared has 2 <div> but you only closed one of them, when that happens the html parser of the browser will automatically try to close it for you which may end up doing unexpected results.
I suggest you to use an IDE like vscode and install extensions that will help you properly format your code and identify markup errors.
My web application has started creating nodes for all the whitespace in my html file.
This code:
<td hidden>
<input type="text" hidden name="lines[{{$i}}][id]" id="lines[{{$i}}][id]"
value="{{$line->id}}">
</td>
is resulting in the td node having 3 children, two texts and the input.
Please see this image:
There I have console.log'd the element. I am not aware of how I have caused this to happen? I am using the PhpStorm IDE. I do not know what terms I would search in google to find an answer either.
edit: it seems to be the indenting. Is the web browser supposed to render indenting?
Thank you,
I am working on an IoT project that uses an ESP8266 WIFI module. For those unfamiliar, suffice to say it's an SOC with wifi capabilities that can be used in station or AP mode. There are several ways to upload programs to this little marvel, I am using a NodeMCU platform with Lua.
Now the meat of the issue is trying to upload through the Lua interpreter an HTML string to be displayed as a web page for IoT control. I had this working, but had to do some rebuilding of the system to add more control points. Aside from issues with the uploading (issues with the Lua interpreter), which needs no attention, I am having issues with the String built to send to a browser when accessed.
I basically have 2 buttons side by side and wanted separation using  . That originally worked, but now it produces a blue dash in all the browsers I've tried.The string to be sent is as follows:
<p style= "font-size:90px;">
Rear Left <button style= \"width:150px;height:150px;font-size:90px;background:green;\">On</button> <button style= \"width:150px;height:150px;font-size:90px;background-color:red;">Off</button>
</p>"
Oddly when a snippet of the program containing the HTML code string is saved to a file and opened with a browser it looks fine?! Any insight?
Oddly when a snippet of the program containing the HTML code string is
saved to a file and opened with a browser it looks fine?!
No, once you clean-up all the syntax problems it doesn't look fine anymore:
Your problem has nothing to do with NodeMCU, ESPlorer et.al. Your code simply isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
You can't nest <button> in <a>. Instead wrap that button inside a <form> tag as such:
<p style="font-size:90px; display: inline">
Rear Left
<form href="?pin=ON1" style="display: inline" method="get">
<button style="width:150px;height:150px;font-size:90px;background:green;">On</button>
</form>
<form href="?pin=OFF1" style="display: inline" method="get">
<button style="width:150px;height:150px;font-size:90px;background-color:red;">Off</button>
</form>
</p>
However, what you should IMO really do is using plain HTML anchors
<p style="font-size:90px;">
Rear Left
On
Off
</p>
and style those two links like buttons (e.g. https://designshack.net/?p=25423 or How to make <a href=""> link look like a button?).
I am using Expression Engine to develop a site. I have created the page I want in a template file and now I am making use of EE's tags to make the content dynamic.
{exp:channel:entries channel="test123"}
{test123}
<div class="panel" style="margin-bottom:10px;">
<div class="paneldiv" style="background-color: red;">
hello there
</div>
</div>
{/test123}
{/exp:channel:entries}
The above code makes my DIV disappear. But if I remove the tags, the DIV shows up.
Its also worth noting that when the tags are in and I click "view rendered template" the DIV shows up.
Very strange! I've been bashing my head all day!
I believe you are using the {test123} tag incorrectly. First, I'm assuming that {test123} refers to a Channel Field within the 'test123' Channel. If so, then you simply need to remove the {/test123} ending tag, as data field tags are usually single-variable tags.
The reason your div content is disappearing is that EE is failing to process {test123} as a variable pair, and therefore it doesn't show the content within.
I have a form within a table which is within another form. My problem is that the embedded form tag is not appearing - the input and iframe appears, but the form tags do not appear. The table and outer form appear. What's wrong?
<form>
<table id=\"mytableid\">
<tr class=\"form_row\">
<td align=\"right\">
Upload Photo:
</td>
<td align=\"left\">
<form action=\"/myuploadpath\" method=\"post\" enctype=\"multipart/form-data\" target=\"upload_target\" id=\"photo_url_upload_form\" name=\"venue_photo_url_upload_form\">
<input type=\"file\" name=\"photo_url\" id=\"photo_url\" size=\"40\" />
<iframe id=\"upload_target\" name=\"upload_target\" src=\"#\" style=\"width:0;height:0;border:0px solid #fff;\"></iframe>
</form>
</td>
</tr>
</table>
</form>
Putting a form inside another form is not valid HTML. When this happens each browser will do different things with the markup. Some ignore parts, some break, etc. Either way you shouldn't do this.
Edit
If you are using tables for layout purposes, you technically shouldn't be. They are only meant for tabular data. You should use divs/spans and CSS to create the look you want on your site. A great place to learn about this stuff is W3C Schools.
I assume you're using something like Firebug or the Chrome DOM Inspector to look at your DOM tree and you can't see the inner <form>. These tools inspect the DOM itself, not the HTML source. That is, they show you what the browser has interpreted from your HTML. The problem in this case is that nesting a <form> within another <form> is invalid, and hence the browser has ignored it and continued parsing the rest of the document.
Obviously, the fix is to ditch that outer form since it's not doing anything. If you have it there for styling purposes, perhaps use a <div> with a class.