Applying CSS "display: none" causes higher elements to drop - javascript

I am working on a custom navigation bar class and this bug involves the mechanism which handles drop-down menus and such. Below is an example and explanation of the relevant test code.
HTML:
<div class="nav-bar" id="main">
<div class="menu-container" id="menu1">
<div class="menu-label"> Menu Head 1 </div>
<div class="menu-list-container">
<div class="menu-item"> Item 1 </div>
<div class="menu-item"> Item 2 </div>
<div class="menu-item"> Item 3 </div>
</div>
</div>
<div class="menu-container" id="menu2">
<div class="menu-label"> Menu Head 2 </div>
<div class="menu-list-container">
<div class="menu-item"> Item 1 </div>
<div class="menu-item"> Item 2 </div>
<div class="menu-item"> Item 3 </div>
</div>
</div>
</div>
CSS:
.nav-menu-container {
display: inline-block;
}
This is the only CSS that needed to not be default. I.e. every div except the nav-menu-container elements is set to display: block;.
From here, the one other CSS change comes from JS setting the height of the nav-bar element to whatever the height of a menu-label element (in screenshots I highlight the nav-bar element to show this).
Next, I have screenshots of the test page showing first the unaltered page, and then the page with one of the menu-list-container elements set to display: none; and shows the bug I am referring to.
So my question is why does the menu-label element drop down rather than just staying at the top? I did notice that it's just aligning its bottom edge with the bottom edge of the other menu-container, because if I set the other menu-list to display: none; each of the labels return to the top of the screen. Does anyone know what causes this? Or a clean way to make this not happen?

That's because inline-block elements are aligned along their baseline, which is the last line of visible text (if there is text in there, which is the case here).
So you just have to add vertical-align: top; to the CSS rule for .nav-menu-container and they will align as desired.

Related

CSS styles do not apply consistently on Android devices

I have some sort of a accordion menu
<div class="grid-item-1">
<div class="title">Category title 1</div>
<a class="option1">Item 1</a>
<a class="option2">Item 2</a>
</div>
<div class="grid-item-2">
<div class="title">Category title 2</div>
<a class="option1">Item 1</a>
<a class="option2">Item 2</a>
</div>
So basically how this works is that both Category title 1 and Category title 2 are visible and Item 1 and Item 2 both have style
display: none
applied. When I click on Category title 1 js applies .active on
<div class="title">Category title 1</div>
which applies display:none on it. I also have a style
.grid-item-1.title.active a{
display: block;
}
and the problem is that on an emulator everything works fine, but on an actual Android device this options do not appear consistently, sometimes the style is applied and sometimes it don't and I can't find the source of this problem. Has anyone experienced the same problems and is there any solution to it?

Unexpected behavior of JS Affix - how to force div column to stay fixed width?

I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.
Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.
I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.
Here is the relevant code:
<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
<a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<img class = "img-responsive" src="/img/img.png" alt="...">
<div class="caption">
<h5 class="text-center">Some Caption</h5>
</div>
</a>
</div>
</div>
You can see what I am talking about here:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
There it might be easier to follow the CSS as well.
Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.
I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!
Thanks!
Brian

Bootstrap 3 Allow Column to Overflow container

I have a two column bootstrap layout and I would like for the right column to be able to overflow the container. The right column contains lists of potentially long strings, this isn't a problem when the only element within the li is the text, but if I want to do perhaps a button and the text within the li this causes the line to wrap and show the button on one line and the text on another.
Is there a way to allow the column to extend past the container even with multiple elements?
JSFiddle Example
<div class="container">
<div class="col-lg-6">
This is the left column!
</div>
<div class="col-lg-6">
<ul class="list-unstyled">
<li>
<ul>
<li>List 1!</li>
</ul>
</li>
<li>
<ul>
<li>List items may be reeeeeeeeeeeeeeeeeeealllly long, but that's ok!</li>
<li>
<span class="glyphicon glyphicon-refresh"></span> But when there are two elements it is a problem ..................................................... I don't want this wrap :(
</li>
</ul>
</li>
</ul>
</div>
</div>
Setting the number of Bootstrap columns will determine the width of your container, as well as any nested elements. Therefore, by default, the text is going to wrap.
You could try adding a CSS class that prevents word wrapping, like so:
<div class="nowrap">Don't wrap this text.</div>
The CSS:
.nowrap: {
white-space: nowrap;
}
However, this may cause layout or overlapping issues as your container widths expand with longer content.
UPDATE
Your later JSFiddle from the comments below did not have the same markup as your example HTML in the original post. You neglected to mention that you were using <button> tags, which in the current CSS are not inline elements. Given markup like this:
<div class="btn-group">
<button class="glyphicon glyphicon-refresh"></button>
<button>Reeeeeeeeeeeeaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallllllllllyyyyyyyyyy</button>
</div>
I believe the following CSS will give you the desired effect:
.btn-group {
white-space: nowrap;
}
.btn-group button: {
display: inline;
}
See this JSFiddle, forked from yours.

How to make my div count as a background slider and dont make big horizontal scroll bar

my problem is this:
I am having a div which is 1500px, and div is making a horizontal scroll bar. Well as you can see my header size is 960px. How can i apply things to have that div like a background, i mean when i open up the page to don't have scrolling bar (like when my page is 960px, and div is on it,too).
Div code is this:
<div id="amazingslider-wrapper-1" style="display:block;position:static;width:1047px;margin:0px auto 0px;">
<div id="amazingslider-1" style="display:block;position:static;margin:0 auto;">
<ul class="amazingslider-slides" style="display:none;">
<li>
<img src="images/SrbimationProlece.png" alt="Prolece na Srbimationu!" data-description="Ne propustite ni jedan sou!" />
<button class="as-btn-white-large">Saznaj vise!</button>
</li>
<li>
<img src="images/Pozadina.png" alt="Pozadina" />
</li>
</ul>
<ul class="amazingslider-thumbnails" style="display:none;">
<li>
<img src="images/SrbimationProlece-tn.png" alt="Prolece na Srbimationu!" />
</li>
<li>
<img src="images/Pozadina-tn.png" alt="Pozadina" />
</li>
</ul>
</div>
</div>
Now it is 1047px but when i put it to 1.5k or 2k it makes a big scroll bar.
Div is a slider made in jquery.
It should be something like this http://www.funimation.com that (slider at background of the page)
The slider code is working perfect that isn't the problem.
Thanks in advance.
Based on your post's comments I think you're confusing display: none with overflow: hidden. overflow: hidden will hide whatever overflows outside your container div while display: none will hide the div and its contents entirely.
#amazingslider-wrapper-1 {
overflow: hidden;
}
This is shorthand for setting overflow-x and overflow-y to hidden.

Display div only as per selection from menu list n hide rest of them

i have a Menu in which when user selects from menu list it displays that div and rest are hidden i have a huge menu list is there any function such that it displays only that div Can Anyone help please....
HTML:
<ul>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
<div id="one"> Div one </div>
<div id="two"> Div two </div>
<div id="three"> Div three</div>
CSS:
div {
display:none;
}
li {
cursor:pointer;
}
JQuery:
$('li').click(function(){
$('div#' + $(this).attr('class')).show().siblings().hide();
});
This isn't a particularly well phrased question, but i'm thinking you want to give all your divs that can be shown a particular class, and give each ond an id:
<div class="revealPanel" id="panel1">
<!-- Content -->
</div>
<div class="revealPanel" id="panel2">
<!-- Content -->
</div>
<div class="revealPanel" id="panel3">
<!-- Content -->
</div>
<!-- etc. ... -->
You've tagged this query with jquery-ajax so I'm going to assume you know how to include jQuery in your page etc.. Define a javascript function to hide all divs and show a specified one:
function ShowPanel(panelId)
{
jQuery('.revealPanel').hide();
if (panelId != null)
{
jQuery(panelId).show();
}
}
And now just call that function from each of your menu links with the correct id, for instance:
<a href="javascript:ShowPanel('panel1');>Show Panel 1</a>
Of course I may have misinterpreted your question, and even if I haven't I encourage you to provide more detail in your questions — use code snippets to show how you've designed your menu etc.
Good luck!

Categories

Resources