text overflow in stacked bootstrap nav-tabs - html

I'm trying to create a list of horizontal tabs that can be selected and the tab content has an additional list of tabs (stacked) that shows the content of those tabs next to them.
I created a bootply here so you can see what I mean.
Whenever resizing down to xs sizes the text in the tabs will overflow for the stacked tabs and for tabs with a dropdown the dropdown options will be disproportional to the size of the tab
Haven't really found a decent way to get around it. What's a way to fix this? Thought about doing media queries but not sure that's the best route to go.


In my bootply I was giving the nested nav stacked tabs (in the tab content) section the class of nav-stacked with a class of col-xs-3. This was causing problems for whatever reason at these smaller screen sizes.
Removing the nav-stacked class and leaving it to be just the regular nav nav-pills class worked and correctly shows since each tab is pushed to be stacked anyways due to the small column size. No text overflow.
What about larger screen sizes if you still want them stacked? I just did a hackish solution and set col-xs-3 col-sm-2 col-md-1 so it still forces the tabs to be stacked.
Updated bootply
There's one spot switching from md-sm (I think) could be xs-sm sizes that the tabs display horizontally again. Easily fixed with a media query.

Related

Make navbar collapse menu appear on all screen sizes

I have a question concerning bootstrap navbar. I want the collapse menu that appears on mobile, to also appear on larger devices. Since the code is rather large, I will have to share the codepen:
code link http://codepen.io/diazabdulm/pen/KMaREN
http://codepen.io/diazabdulm/pen/KMaREN

Bootstrap panels won't align horizontally in tablet view

I'm working on a small project (http://laurensvandijk.com/as/diensten.html) and I'm trying to get the pricing panels to align horizontally in tablet portrait view. Currently they are stacked on top of each other). I'd like to see them next to each other in tablet view. In mobile view however, I would like them to be stacked on top of each other as it is.
I'm probably missing something in the media queries of my css file, but can't seem to figure out what's making them stack on top of each other when there is clearly enough space available to align them horizontally.

The class you have applied to those blocks is col-lg-4 col-md-4 sm-6. Note that the last one is missing the col- prefix.

Can the CSS text-overflow property ellipsis be applied for vertical scrolling text?

Here's my problem. I am using Bootstrap 3. I need an element to remain 'absolute positioned' within a two column layout. My layout works great but on a tablet or mobile the design means that text scrolls underneath the 'absolute fixed element'.
If you resize the browser on a live demo you will see what I mean here: http://www.concise-courses.com/test-yourself/y/a.php
What is the work around to prevent the text scrolling underneath the clock? I was thinking a background image (didnt work) or a fading technique (didnt really work) or just text-overflow for vertical scrolling....
Any ideas? Thanks as ever!

If you want to hide column A when mobile, just add hidden-xs as a class to that column. It will hide the specified column when the screen is smaller than 768px (e.g. Bootstraps' "xs" setting, see Bootstraps' grid system for more information).
An example: JSFiddle
<div class="row">
<div class="hidden-xs col-sm-6"></div>
<div class="col-sm-6"></div>
</div>

How you want it to look when its on mobile? static? or just hiding the text that behind it?

Bootstrap responsive panel with a wide dropdown in it, breaking mobile

I have a responsive Panel that in Mobile becomes scrollable because the dropdown text content is too long.
Mobile dropdown (at least in iOS) only displays a portion of the selection anyways when you select the dropdown.
What's the best way to handle this?
Sample Bootply Here

This is more of a styling issue for IOS rather than Bootstrap, but it looks as though you just need to add an optgroup tag after your last option:
http://www.bootply.com/Xw8pzjoACx
Set the dropdown width in CSS to 100% to stop it overlapping the container.

Responsive Bootsrap Design: Priority of stacked Divs?

I trying the CSS-Framework Bootstrap and I have a question.
Here is the Fiddle: http://jsfiddle.net/hzAUz/
Let's say I have a div, with 3 equal divs inside of it:
<div id="main" class="row">
<div id="columnleft" class="span4">LEFT</div>
<div id="MainContent" class="span4">Content</div>
<div id="columnrigh" class="span4">Right</div>
</div>
So what happens, when you use Bootstrap, is that as soon as the windows get smaller, the Divs are stacked in this priority:
1. Left
2. Content
3. Right
But it makes sense, to put the content first.
Does anyone know how can insert priorities when using the bootstrap-responsive.css?
Thank you very much in advance.
KG,
George

There's a few ways you can do this.
One would be:
Start at the mobile size, and design "mobile first". That would make your small screen stuff easy, and then you could add additional classes to those containers to accommodate the larger screen sizes.
Another option:
Plan for mobile, and see if you can't either hide/convert your elements in smaller screen sizes to something more mobile friendly. ie...your left stack of nav links become a select menu in mobile; thus, only taking up a single line of real estate.
My preference is to use javascript, and convert left, and top navigation into a show/hide element (button) in mobile size. That way, I've just a logo and button in the top of my UI, and content immediately following.

I do not believe there is a way in Bootstrap 2, but if you were to move to Bootstrap 3, you can control column ordering. See http://getbootstrap.com/css/#grid-column-ordering for details.

Definitively upgrade to bootstrap 3 if you can, as #Sean suggested, but if you can't right now, some of these answers may help:
In Twitter Bootstrap 2, how can I get right columns to move to the top when shrinking the screen?