Bootstrap 3 Allow Column to Overflow container - javascript

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.

Related

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

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.

jQuery: Simple way to slideToggle multiply elements independently (and similar questions)

Firstly, I need to say that I'm pretty new to jQuery.
I have this situation: http://jsfiddle.net/dVf8m/
I've been wondering if there is a way to do the slideToggle simplier. Now I have two ids on menu elements (#trigger1 and #trigger2) and two ids on the hidden divs (#one and #two). This also results in double jQuery. Is it possible to avoid all the ids and make it simpler?
Another thing is that if I click on both menu elements (First and Second) both divs appear. I want only one of the hidden divs to be visible at one time? How can I force the first div to disappear when the other one is appearing?
Also, if I'd want to use fadeIn/fadeOut in this situation, how to do it when both of them use the .click event?
Change your code to something like below. Have a class for the div and add click listener to it. add any attribute to the div and give the id of the div to be toggled.
<div id="top">
<ul>
<li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
<li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
<li>Third</li>
</ul>
</div>
<div class="hidden" id="item1">
<ul>
<li>Smthn</li>
<li>Smthn2</li>
<li>Smthn3</li>
</ul>
</div>
<div class="hidden" id="item2">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>...</li>
</ul>
</div>
$(document).ready(function() {
$('.toggler').click(function(e) {
$("#"+$(this).attr("data-item")).slideToggle(500);
});
});
JSFIDDLE

Scroll in a navbar (Bootstrap 3), but keep the rest of the page still

I have a question regarding scrolling in a divider, but keeping the rest of the page still. Imagine this (since I just made this account and can't post any pictures.): The post is built out of 3 components:
The navbar: Don't worry about this.
The side menu: This is the part I want to scroll through, because it contains 40 elements that don't fit onto one single page.
The content: I want this one to scroll as well, but I don't want it scroll at the same time as the side menu does.
Here is the code for the part I am talking about:
<div class="panel panel-primary fullheight" ng-controller="NavCtrl">
<div class="panel-heading">All branches</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><input ng-model="search" class="centerhorizontal fullwidth" placeholder="Filter"></li>
<hr>
<li ng-repeat="branch in branches | filter: search">{{branch}}</li>
</ul>
</div>
</div>
Any suggestions whatsoever would be very useful!
set a css rule of overflow-y: scroll on the div that you want to be scrollable
eg
#scrollable-area{
overflow-y: scroll;
height: 300px;
}
Heres a JSFiddle demonstrating this.

Change multiples div class from another div

I'm trying to change (better would be to add) a class name to multiple divs using an onmouseover function in another element. The two elements are not nested to each other so I can't (or at least don't) think I can use plain CSS to do so.
I'm simplifying the following code to make it easier to read. The actual html for the "items" is a little bit more nested. Hope this won't be an issue.
<ul id="buttons">
<li class="a">button a</li>
<li class="b">button b</li>
</ul>
<div id="items">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-b"></div>
<div class="item-a"></div>
<div class="item-b"></div>
</div>
So basically what I want to do is when I hover the "li" elements with the mouse the corresponding class in div "items" gets a class added to itself (so class "a" in buttons would add a class 'hover' to all the "item-a" classes, and so on).
I'm fairly new to JavaScript/jQuery. So far I managed to get it done using Id instead of class, but since ID must be unique it's not what I need. The code was:
onmouseover="document.getElementById('item-a').className = 'hover';"
This worked. Only one div (the first with that ID) but it worked, so I tried to change it from Id to ClassName but it didn't work.
onmouseover="document.getElementsByClassName('item-a').className = 'hover';"
and also, if the above code would work, it would change the class, while I'd prefer to add it (and then remove it with a onmouseout function)
for reference, among the lot of searching i did i also tried this link
Trigger the css:hover event with js
trying to adapt it to my situation:
$(window).load(function() {
$('.a').hover(function(){
$('.item-a').addClass('hover');
});
}
with no results.
I'd suggest:
$('#buttons li').hover(function(){
$('.item-' + this.className).addClass('hover');
},
function(){
$('.item-' + this.className).removeClass('hover');
});
JS Fiddle demo.
References:
addClass().
hover().
removeClass().
Finagle your markup a little bit and you can do it with plain CSS:
<ul id="buttons">
<li class="a">button a</li>
<li class="b">button b</li>
<li class="items">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-b"></div>
<div class="item-a"></div>
<div class="item-b"></div>
</li>
</ul>​​​​​
.a:hover ~ li .item-a {
background: red;
}
.b:hover ~ li .item-b {
background: blue;
}
Demo

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