I am using twitter bootstrap for a site and basically I have a order list within a div element. When the screen get resized to 768px, I want parent's div width, equally distributed among all child list.
Do I need use media queries and JavaScript? Can anyone help me getting started with this concept please? The code may look like followings--
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-7 col-lg-9 pull-right process-tab">
<ol class="investment-pagination c-white pull-right process-tab-bar">
<li data-tab-target="goalName" class="active">1</li>
<li data-tab-target="amountTerm">2</li>
<li data-tab-target="riskLevel">3</li>
<li data-tab-target="investment">4</li>
<li data-tab-target="accountType">5</li>
<li data-tab-target="fund">6</li>
</ol>
</div>
</div>
EDIT: bootply.com/ibnLAYxmbB
Your parent is not col-xs-12 it is col-xs-6. So, first fix that.
Add a media query for max-width: 768px
Make your ol as display: table
Make your li as display:table-cell and remove float and width
In effect, your CSS would look like this:
#media screen and (max-width: 768px) {
.investment-pagination { display: table; width: 100%; }
.investment-pagination li { display: table-cell; width: auto; float: none; }
}
Demo: http://bootply.com/CRMNgpsjMV
Related
the end goal is for my navigation to look just like this:
<div class="l-region l-region--navigation">
<div data-mediasize="959" class="responsive-menus responsive-menus-0-0 absolute"><span class="toggler">☰ Menu</span><div id="block-superfish-1" class="block block--superfish block--superfish-1 responsive-menus-simple">
<div class="block__content">
<ul id="superfish-1" class="menu sf-menu sf-main-menu sf-horizontal sf-style-none sf-total-items-8 sf-parent-items-6 sf-single-items-2 superfish-processed sf-js-enabled sf-shadow"><li id="menu-2237-1" class="first odd sf-item-1 sf-depth-1 sf-no-children">Events</li>
link to code: https://jsfiddle.net/4b17u2fs/1/
You have to use different #media queries for this.
With those media queries, you will be able to make your burger button visible or not. Then it's some javascript for the event when you click on the button.
You can do something like this :
#media screen and (max-width: 1100px) {
.burger-button {
display: inline-block;
}
}
.burger-button {
display: none;
}
This will only make your .burger-button visible on screens smaller than 1100px.
You just have to adjust things but this is the way of doing.
I am using bootstrap 3.3.7 and I want to change the text alignment to Left when col-sm-6 is reached. If this level is not reached yet then the text alignment is right. How can I do that?
Below is my div:
<div class="col-sm-6 text-right" style="padding-bottom:10px; padding-top:10px" >
<a class="BAN_ForgotPass" href="#">Forgot the password ?</a>
</div>
I have tried to add this in the script css in the header but didn't work:
<style type="text/css">
#media (max-width: 767px) {
footer .text-right { text-align:left }
}
</style>
Any suggestions?
Another question please: is there anyway to detect in javascript or jquery if col level was reached? I am asking this because sometimes we need to hide images or add somthing in some levels ...
For example: hide image x when col-sm-6 is reached. Is it possible?
Assuming you have the correct bootstrap HTML then this should work
#media (max-width:767px) {
.container .text-right {
text-align: left
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6 text-right">
<a class="BAN_ForgotPass" href="#">Forgot the password ?</a>
</div>
</div>
</div>
To answer your second question, about hiding elements you can use utility classes in this case hidden-sm and hidden-xs
try this below code
#media (max-width: 767px) {
.text-right { text-align:left; }
}
Try this into your page with inline CSS and if works fine make external CSS
.col-sm-6
{
text-align:left;
}
if this works make a Separate CSS for each changes you want
like for image hide add below line in above code
.col-sm-6
{
text-align:left;
diaplay : block;
}
I am creating an accordion using bootstrap 3. What I want is the accordion's height is always fixed no matter how its content is. If the content of an element is too large then a vertical scrollbar should appear inside that element. Also, when user click an element's header that element should take the rest of the height of the wrapper (and display scrollbar if the rest of height is not enough).
I change flex-grow:1 when user click on the panel-header. However, when clicking "Collection 2" the scrollbar didnt appear inside the content-body of "Collection 2" as I expected and the accordion is pushed outside of the wrapper div. Could you please help? I prefer a css only solution if possible. Thanks.
The template is:
<body ng-app="accordion" ng-controller="ctrler as ctrl">
<div id="wrapper" class="full-height wrapper">
<div class="panel-border panel-group column-flex full-height" id="accordion">
<div ng-repeat='key in [1,2,3]' class='panel panel-default'>
<div class="list-group-item">
<a class="panel-title" data-toggle="collapse" data-target="#{{key}}" data-parent="#accordion" ng-click='onClick($event)'>Collection {{key}}</a>
</div>
<div class="panel-collapse collapse content-body" id="{{key}}">
<div class="panel-body">
<ul class="list-unstyled">
<li ng-repeat="item in data1">
<div>{{item}}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
The styling is :
.column-flex{
display : flex;
flex-direction: column;
}
.wrapper {
height: 500px;
border-style: solid;
}
The code to add flex-grow is:
if($(e.target).parents('.panel').css('flex-grow')==1){
$element.find(".panel").css('flex-grow',0);
}else{
$element.find(".panel").css('flex-grow',0);
$(e.target).parents('.panel').css('flex-grow',1);
}
You can check the example here : https://plnkr.co/edit/iqrHG80GXj8teiRGeBU8?p=preview.
Add this to your code:
.panel {
display: flex;
flex-direction: column;
}
.collapse.in {
overflow-y: auto;
}
revised plunkr
If you want a scrollbar to appear when the height of .wrapper is exceeded, add overflow: scroll; to .wrapper. But that will show a scrollbar for .wrapper, not individual panels in the accordion. If you want a scrollbar to appear for the individual panel in the accordion, apply a height and overflow: scroll; to each .panel-collapse where you want the scrollbar to appear.
I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?
First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.
As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.
Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.
We are working with the framework of jQuery Mobile for the graphical interface of our iPad app, based on HTML5. Because we're creating an app for the iPad, we essentially need the typical split-screen like it is on ipad: A narrow sidebar on the left side and the main content on the right side:
Now my question: I'm searching for the code to create this splitted screen and I do not find anything for this in the jquerymobile documentation– Did I miss it or didn't I understand it? If the code for the splitscreen doesn't exist on this website, where can I find something related?
Because I didn't find anything related to what I need, I tried another way to get this splitscreen. So I was working with blocks in the css stylesheets:
for explanation: In jQuerymobile documentation, I found a category with the name "content formatting>layout grid (column)" ( http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-grids.html)
So I thought about creating two blocks for making the splitted screen. BUT I don't need a splitted screen with 50/50, but much more 20/80 or 30/70. I tried to change it into my stylesheet:
.ui-grid-x { overflow: hidden; }
.ui-block-x, .ui-block-y { margin: 0; padding: 0; border: 0; float: left; min-height:1px;}
/* grid a: 20/80 */
.ui-grid-x .ui-block-x { width: 20%; }
.ui-grid-x .ui-block-y { width: 80%; }
.ui-grid-x .ui-block-x { clear: left; }
the original was:
.ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; }
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;}
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; }
.ui-grid-a .ui-block-a { clear: left; }
Does anybody know what I did wrong? How to change the size of the blocks? Is it the right way to do it like this?
Thanks alot in advance.
Use JQuery Mobile's Grid Layout and just override "width" on "ui-block-a" and "ui-block-b" to split screen as per your need.
for sample demo page checkout this blog
http://mdshannan1.blogspot.com/2011/08/jquery-mobile-split-screen-20-80-hack.html
If you view the source on the jQM Demos page you can see they've added the div tags with the class="content-secondary". This is used for the side bar on a tablet layout. It will also stack if you view the same page on a mobile device with a smaller screen then a tablet.
HTML:
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
<div class="content-secondary">
<div id="jqm-homeheader">
<h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" /></h1>
<p>A Touch-Optimized Web Framework for Smartphones & Tablets</p>
<p id="jqm-version">Beta Release</p>
</div>
<p class="intro"><strong>Welcome.</strong> Browse the jQuery Mobile components and learn how to make rich, accessible, touch-friendly websites and apps.</p>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Overview</li>
<li>Intro to jQuery Mobile</li>
<li>Features</li>
<li>Accessibility</li>
<li>Supported platforms</li>
</ul>
</div><!--/content-primary-->
<div class="content-primary">
<nav>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Components</li>
<li>Pages & dialogs</li>
<li>Toolbars</li>
<li>Buttons</li>
<li>Content formatting</li>
<li>Form elements</li>
<li>List views</li>
<li data-role="list-divider">API</li>
<li>Configuring defaults</li>
<li>Events</li>
<li>Methods & Utilities</li>
<li>Responsive Layout</li>
<li>Theme framework</li>
</ul>
</nav>
</div>
</div>
<div data-role="footer" class="footer-docs" data-theme="c">
<p>© 2011 The jQuery Project</p>
</div>
</div>