How to show full content of <style> element in devTools? - google-chrome-devtools

When I am inspecting elements there are styles applied which are generated by webpack dev server and pasted in <style> elements. But when I try to inspect how those styles look like I am getting just partial content of that element.
How could I see the whole content?
I tried to find it in "view page source", but those style elements are added dynamically so they are not present in page source.

Only option I found so far is to click on style element, so it is selected. In console, let print content to console $0.innerHTML. $0 is reference to latest marked html element in Elements tab.

Store style element as a global variable, then assign it innerHTML to a variable and show it in console. I was able to copy full 25kB contents of style tag
image to help

Related

Magento 2 remove the unwanted sidebar div displaying something I don't know where come from

the image attached shows the sidebar in a category page that lists all its products with this sidebar that shows search block and compare block then this div that shows that error. I don't know how this been generated but I want to remove this error info div
additional sidebar div
Turn on path hints
Get file template
Copy template to your theme and remove your div.

Zend Framework 1.10: disableLayout and form tags

I'm working on an action that displays a form in the view page. This is the content of the view (let's call it form.phtm):
<?php echo $this->form; ?>
This view is used both to show a complete page with its header, content and footer, or just the content, to be displayed in a reveal panel.
Header and footer are provided by the layout files, and the content is the line of code above. So, when it is meant to be displayed in the reveal panel, I specify it to the action by passing an 'ajax = true' parameter, and the action disables the layout so that only the content is output.
All of that looks fine, but when trying to submit the form from the reveal panel, it doesn't work.
When inspecting the markup, I realize that the form open and close tags don't exist, though all the fields and buttons are displayed. This only happens after calling disableLayout() (i.e. in the full version of the page the full form is output).
I think my question can be summed up as "What is the diference between echo $this->form with the layout enabled and the same code with the layout disabled"?
P.S. I know I can manually echo the form tags and elements, I just want to know if there is an easier/more elegant way to display the whole form without having to worry about whether it is being called via ajax.
Edit 17/05/2015: I was using the word "label" but I meant "tag" (already corrected).
Ok, my bad.
Because of the way I was including the parts of my document, the mentioned form ended up being nested inside another form, and thus Chrome removed the inner form tags.
This post gave me the lead:
tag is not shown when created with php

How to erase the searchform, on the search results page, of indexed_search?

I tried to just erase the html markup from the indexed_search template file, this does work fine, until I found out that this causes a Javascript error where I can not use the numeric navigation. (Page 1 Page 2 Page 3 Next >).
So is there a typoscript command, or a other way, to erase the search form which is on the results page?
Unfortunately when you empty the search form you won't be able to use the page browser at all.
It is using the value from the search form and an offset (basically does a new search with your parameter)
Idea for a workaround: How about hiding the standard search form (that contains the search term) with display:none; and adding a second, empty search form to the template?

Use the sitemap content element to load content of the referenced pages

I use the sitemap content element so that the editor can explicitly reference to individual pages in my page tree. Of course those pages do contain content elements (Textpic, Media, all the good stuff...) in their "normal" section. I need advice on how to modify the sitemap content element that it will output the content of the referenced pages.
I know there is already a plugin called "kb_sitemap" which basicaley does this job... but it does not handle the output of images or media (flash-, quicktime movies..) elements which is absolute necessary. The rendering relevant stuff is handled by Css Styled Content (CSC) which is necassary for me because it renders the media content element.
Do you use templavoila ?
Ok, go to page properties -> General tab (bottom part of the tab) and then you'll find all containers that possibly contain CEs, click to the lil folder icon and you may select content elements from any other page.
EDIT: added screenshot, page properties...
Note, showcase, maincontent, right content are just my names for my TV elements, could of course be name differently.

How to force a node inside tiny mce?

I'm using tiny mce for my project and want to validate the node inside the tiny mce. On click of a text element, let's say a paragraph with some id, I load editor for the element. But, sometimes if user replaces the whole content, the node and its HTML is lost. I want to retain this node and only the content is removed. The node can be a paragraph or heading or ul or ol.
EDIT :
I'm providing dummy text such as "Lorem epsum .....". User will be removing this dummy text and add his content.
EDIT2
I want to allow the user to change the content only and the surrounding HTML and styles should remain intact.
How can I accomplish this ?
This would check if node content is in editor, and if not will add it at the bottom.
var nodecontent;
if (!tinyMCE.activeEditor.getContent().match(/nodecontent/) {
tinyMCE.activeEditor.setContent(tinyMCE.activeEditor.getContent()+nodecontent);
}
You could make a new button in tinymce which gives you a pop-up asking for the ID or the title of a node. This button then puts a small piece of "code" in the tinymce textfield.
for example: ((id:10))
When loading a node, you can search if the current node has that "code" in it by a regular expression. If it has, load the content from the node with that ID from the database.
Hmmm, it will be very tricky to keep the surrounding html while the user is able to delete html elements in the editor. You would need to intercept each attempt where a user could delete your surrounding html (Copy/paste, delete, backspace, usage of the code-plugin, and so on...) and then handle it case for case.
Suggestion:
In case the surrounding html will never change you could give the user total control over the editor content through adding the surrounding html after the user submits/saves the editor content. To keep the style even without the surrounding html it might be sufficient to create a css class and apply it to the body element of the editors iframe. The body element is not deletable. I do not know if this is acceptable in your use-case (let us know).