troubleshooting scrollbar html - html

Since I can't really figure out where the problem is the cite is here
I'm sure most people know ctrl-u will allow you to see the coding.
The scroll bar should move the content in the box.
Any suggestions are helpful but please don't be rude
The scrollbar is transparent but it should wok like the one on this page

Based on what I'm currently seeing - your problem is that you have two separate <div id="entries"> divs. The second one (line 1060 of your compiled source, as I'm seeing it in Firefox) is blank - it contains an empty <div id="post"> and nothing else.
id properties have to be unique - because this one is repeated, the style attributes aren't being applied to it correctly. Simply delete the second <div id="entries">, and your scrollbar will work.

Related

How to implement margin changes from Chrome DevTool

I made this website for my dad's business and you can see a contact form if you scroll a bit down. I'd like us to go to the Mobile View of the page through Google's DevTool (F12 and then Ctrl+Shift+M; or left besides "Elements"). I will show you what's wrong.
If you go to where it says "Treibstoff", try selecting the 4 different options. You will notice that you can't select the bottom two, "Diesel" and "Elektro".
Well, you can actually. If you press slightly above of the end of the word, but you can't select it like one usually does.
If we inspect the elements (Ctrl+Shift+C), we see that the box of "Typenscheinnr." is overlapping "Diesel" and "Elektro" (Inspect a bit above "Typenscheinnr.", not directly on it). A fix I found for this is: Inspect click the big overlapping box of "Typenscheinnr.", scroll down under Styles until you see that multilayered box, set upper margin to 45 with doubleclick.
This should fix it, but I don't know how to make this change go live. I did some research and all I got were solutions similar to "do !important" and then some code. Those were also for the whole site or something like that ...
Anyway, any help would be appreciated and I'm again sorry if this question is stupid. If there's more information you'd like to know, by all means just ask me.
Thanks for reading!
Just use clear: both
If you place a <div style="clear: both"></div> right before the end of the Treibstoff: <p> tag, the behavior will be the expected one.
This happens because you are using float

How can I trick bootstrap rows?

I wish to trick bootstrap rows somehow. I need to put many col-..-.. items in only one row (there are about 8 really complicated .js files that I'm afraid of altering - and it points to children of the div that I additionally used as a bootstrap row). No way to trick the HTML, I have tried many-many ways. In case you don't believe me, check out the specific problem.
Image here
*The red boxes are the images that I'm using and the striped space is left blank. If I align the element that is on the blank row, the next one goes there and the problem is still unsolved.
What's quite interesting that Firefox and IE show everything the way I them to
but Chrome and Edge do not.
Can anyone help me on this? I'm sure there must be some easy way that I missed out, like altering some of the default bootstrap row class properties, but I just couldn't get it. Any suggestions are appreciated.
Solved using CSS Grid layout.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

How to add an invisible entry to a Wiki TOC?

I would like to add an entry to the table of contents of a wiki page that links to an arbitrary point inside the article. In my use case, I want to link to multiple 'header rows' inside a long table.
I tried both
<h4 style="display: none;">My invisible TOC entry</h4>
as well as
<div style="display: none;">My invisible TOC entry</h4>
However, it seems that the element does not get rendered at all. How do I add such an invisible entry?
I'll reply to your use case directly: «I want to link to multiple 'header rows' inside a long table».
I usually recommend to use normal headers in such cases. You will even be able to do section editing of the sub-table (or row) without breaking the general table. An example of sections which reuse existing cells/headers is the Feature map on mediawiki.org.
Alternatively, to have really invisible anchors, you can just add a <span id=linkme></span> or similar, often done via an {{anchor}} template.
Middle ways, i.e. anchors which are actually sections and display in the TOC, but are hacked and made inservible for viewing and section editing, don't really look like "solutions" to me.

Foundation Section (Tabs) not reflowing properly

I have two Tab Sections on my site that are being added after page load. I am "reflowing" them through backbone.js like this:
this.$el.foundation('section', 'reflow');
One of them shows up as expected. The HTML generated is:
<div class="section-container auto" data-section="" data-section-resized="true" style="min-height: 48px;">
The other one gets different data-sections applied to it, and does not display properly.
<div class="section-container auto" data-section="" data-section-small-style="true">
Here is a screenshot of the incorrect behaviour: http://imgur.com/9ozNvNC
All of the tabs have width: 100% applied to them and overlap (hence why you can only see the 'Help' tab there) and the top of the 'Preview' image is covered by the tabs.
The strange thing is, the HTML is exactly the same, in a Reveal Modal in both cases. The same JS is being applied to each. Does anyone know why one of my sections would get data-section-resized while the other gets data-section-small-size?
Edit: Two things.
I forgot to mention, this is Zurb Foundation 4.3.2
If I resize the window, it automatically shows up correctly... So I guess if I can run the 'window resize' Zurb code, that would solve my issue.
I was able to solve my problem. After pouring through the issues in Zurb's Github, I found a semi-related issue that was fixed in a recent pull request.
On a whim I merged it into my code, and it fixed the issue.
See here: https://github.com/seantimm/foundation/commit/7af78ddbcc5a516eafed588e7c17d90bee115567

Need help pinpointing the CSS causing this alignment issue

I'm having a problem with this new theme I tried out with OpenCart. I've tried my best to diagnose the issue using Firebug in Firefox, but I cannot pinpoint whats the culprit here.
The problem can be seen here:
http://bit.ly/13KG6dz
(Using bit.ly because IP address are not allowed - don't worry its not a virus)
Basically in OpenCart, you can add 'Options' to your Products. OpenCart comes with some sample dummy Products. One of these Products has 9 different Options, and all of them display fine. But when I define a new Option in OpenCart, and add it to this Product, there are alignment issues, which can be seen below:
Pictured Example:
1) Initial Status:
Default Options only. Everything is fine, no alignment issues.
2) After adding a new Option:
Now I define a new Option and add it to this Product, and the alignment issues are visible:
Note that is ONLY happens when I add a new Option to an existing sample product. However, this also ONLY happens on the particular theme being used on this OpenCart installation.
If anyone can get to the bottom of this, I'll be extremely grateful!
YES, as I guessed it, it was an issue of floats, add this line here
<input type="radio" id="option-value-20" value="20" name="option[228]">
<label for="option-value-20">No</label>
<br>
</div>
<div style="clear: both"></div>
<!-- ^This will clear your floats, alternatively you can use
overflow: hidden; on container element -->
Right after this <div id="option-228" class="option boss_radio"> ends
You have float defined in your css rule boss_radio. If you remove this class your elements are aligned fine! The problem is, that this rule makes the element float with a width of just around 30%, which will let other elements stay on the same line.