Element not staying within a DIV - html

I am using Smart Report Maker (www.mysqlreports.com) to create some basic reporting for a web app - when I include the reports into my template the menu for the report behaves very oddly and will not stay within the enclosing DIV. The odd thing is that the table itself does but the menu does not so I suspect it is a styling issue applied in Javascript to the menu.
Code is linked below to a text file as it is over 42000 characters so won't allow me to paste here.
Any ideas what is causing this to happen or how I can fix?
http://www.dowzell.com/stack/repaudit.txt
This shows how the menu should look above the table when outside the templateoutside the template http://www.dowzell.com/stack/img1.jpg
This shows how it actually looks when embedded
inside the template http://www.dowzell.com/stack/img2.jpg
This shows the outputted code on screen which shows the menu has moved outside all the divs despite being placed inside the div in the above code.
firebug http://www.dowzell.com/stack/img3.jpg
Thanks
Jason

Related

Writing out CSS menus on fly as I process an FireFox export html file. Post 60329925 seems to answer my issue but has a problem

I am reading a FireFox exported HTML data file and from it creating a HTML file that I can use to access my FF links. I will then use existing FF data structure (minus links) in the toolbar to place new links which will be programmaticly added to my HTML file
As i read the FF file I am writing out pure CSS HTML menus with links as items in a list.
I have everything working, but with sub-menus expanding to right and I quickly run out of screen room once I am deeper than two levels deep.
I had decided I needed expand vertically and in searching for a solution I found post below that does exactly what I want to accomplish and wanted to use as bases for a re-write of my code.
CSS vertical multi level dropdown menu issue
This answer has one problem. Dropdown1 has 4 associated items and a sub-menu but only the sub-menu and its contents are accessible, I can not access Items 1 through 4 associated with it. Can not move mouse directly (sub-menu expands) to them and can not mouse downward past Submenu1.
Not sure if I am missing something being unable to access those or if this is how the code was written and this was missed. Hoping someone could help me out with this.

Why would bootstrap dropdown nav button work in all screen sizes except for one?

I have this site here (using bootstrap 4.1.2):
https://secure2.convio.net/cco/site/SPageServer/?pagename=RFL_NW_QC_Impact
And for some reason the dropdown button in the top right works on mobile, and on most of desktop but screen sizes between 786px to 991px won't work, any smaller or larger and it works perfectly.
Someone else created this page so I'm trying to help fix the issue but I can't pinpoint what's causing it. Doesn't seem like a situation where z-index would need to be used because it can still be clicked it just doesn't expand.
I checked the console and fixed the errors that came up but that still didn't solve the issue. Normally it's on mobile where I have this problem because something is overlapping the button but it doesn't seem to be the problem this time.
any help would be greatly appreciated.
thanks!
Opening/closing the menu is done by two custom functions contained in a <script> tag placed in <head>, on lines 187 and 195, respectively.
Each of them has the entire body of code wrapped in a condition:
if ($(document).width() <= 768) {
...
}
Change both conditions to if ($(document).width() <= 992).
You also have another, potentially bigger problem:
On line 391, you have …</script>, ending the current script abruptly, which is a sign that code was copy/pasted from a browser source code, without properly viewing the entire source code (when viewing large chunks of code, Chrome shows the first n lines and hides the rest under …, which acts as a link to the rest of the code). I'm surprised your console isn't bleeding heavily.
The proper way to retrieve the source of a particular tag is to right-click on it in dev-tools and select "Edit as html". In the opening editor window, you can Ctrl+A, Ctrl+C to copy the entire contents of that tag.

Accessing the CSS and HTML on wordpress version 4.8.1

I'm having a hard time trying to access my CSS & HTML files on my WordPress blog.
I posted a screenshot of what I CAN access, but it's not super straight forward,
However, I need to get into these settings so that I can change the display settings or screen dimensions?
My issue is that whenever someone goes onto my webpage: RobertNolfiRoofing.com
and they resize the window- it moves my content all around. What I want is a fixed setting so that if someone were to resize the browser window it would have a scroll bar, rather than moving content around.
Thanks!
screenshot
In Wordpress 4.8.1, you can use (in almost any theme) the "Customizer" to add your own CSS: In the backend dashboard, choose menu Design > Customizer, which opens the customizer in a column at the left side. There, the last line is "custom CSS", where you can add CSS rules which either are additional or can overwrite existing CSS.

properly format HTML inside UILabel

I am fetching HTML content from online web service, I am using UILabel and rendering the HTML inside.
The issue that I am having is that sometimes the images/videos inside are being cut at the end of the screen(because there isn't enough room to display it all), because I am not using scrolling I am flipping into a new element, how can I make sure that images/videos are being cut, meaning I am displaying content properly. If I reached the end of the screen and I have no enough space to add an image I would like the image to go on the other page. Do I solve this programmatically using code? any existing sdk to help, or should I have the server respond with multiple objects each one for 1 element.

Refresh page directing it to a particular div using HTML5/CSS3?

I am making a simple website and I am encountering a problem whenever I reload it.
I placed my menu at the middle of the screen and when you clicked it, it needs to go down to the content. My problem is, whenever I reload it, it would still go up and show the upper picture. What I want is that after one of the menu is pressed, the menu should now stay on the upper corner of the screen without showing the upper picture (Sample website -> http://ec2-54-84-168-45.compute-1.amazonaws.com/Teapop/)
It seems like my url code that directs it on a particular div (e.g menu#teapop_nav)` doesn't work as I expected after I deployed it on the hosting site even though it works well on my local build.
Without using any javascript code, is there a fix for this using html5/css3?
Thank you.
i just tested it on my computer (chrome & firefox) and it seems to work. And also on page refresh. The picture is always on the top.