I want a BorderContainer like the picture, two ContentPane at the top, and one in the bottom, but I'm not able to do it with the regions, so I don't know if there isn't a way to do it with the regions.
Thank you
It depends a little bit on how you want the panes to scale when you resize the window. Do you want the bottom pane to take all extra height? Do you want the top two panes to stay 50/50 in width?
Assuming you want the division of space to stay 50/50 both in width and height, you could do it like this:
<div data-dojo-type="dijit/layout/BorderContainer">
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'leading'"
style="width: 50%">leading</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center'">center</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'bottom'"
style="height: 50%">bottom</div>
</div>
Normally, the center region will grab all extra space when you resize the window, but you can set a relative width/height on the leading/top/trailing/bottom regions so that they always use that share of the screen.
I think you want to have a nested border container. Basically, you want a top and center (or center and bottom) and in the top put a left and center (or center and right).
<div data-dojo-type="dijit/layout/BorderContainer">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="region: 'top'" style="height: 50%">
<div data-dojo-type="dijit/layout/ContentPane" style="width: 50%"
data-dojo-props="region: 'left'">inner top left</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center'">inner top center</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center'">outer center</div>
</div>
Related
I have a fixed panel heading using Bootstrap and I have content below that panel which should be scrolled behind the panel heading and disappear above the heading.
<div class="col-md-offset-3 col-md-6" style="padding-left: 0;padding-right: 0;position:fixed;z-index:100">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
my panel
</h3>
</div>
</div>
</div>
Initial view:
When scrolling:
What I want to achieve: the scrolled content should disappear between the main navbar and the panel heading (thus above the panel).
I created a fiddle.
A quick-n-dirty solution would be to add a bottom border to your nav element that matches the background color:
Fiddle
.navbar {
border-bottom: 48px solid white; //body bkd color
}
I have a panel that floats right within a container. When my data-spy affix executes, the side-panel gains the position: fixed property which removes the float: right. The panel becomes fixed at the correct height, but becomes fixed at the left in the container not the right in the container. I cannot simply state a fixed value for the left property because I am using a container fixed to 1200px, not container-fluid and the left offset changes whenever the user resizes their screen.
How can I set the panel mimic float-right while affixed near the top of the view?
<div id="navbarContainer" class="affix-top clearfix" data-spy="affix" data-offset-top="70">
<div class="navbar navbar-inverse navbar-static-top" role="navigation" id="topnavbar">
</div>
</div>
// code removed
<div class="container">
<div id="right_panel" class="panel right-panel pull-right">
<div class="panel-head">
Related Information
</div>
<div class="panel-body">A Basic Panel</div>
</div>
css
.rightpanelAffix{
position:fixed;
top:101px;
}
js
$("#navbarContainer").on("affixed.bs.affix", function () {
$("#body").addClass("bodyAffixPadding");
$("#right_panel").addClass("rightpanelAffix");
});
$("#navbarContainer").on("affixed-top.bs.affix", function () {
$("#body").removeClass("bodyAffixPadding");
$("#right_panel").removeClass("rightpanelAffix");
});
Please Show us some code. and may be you want to ask that you can't adjust your container size. Let me know if this helps.
Check this out
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-6"></div></div></div>
I need to use BorderContainer inside a TabContainer in dojo. My requirement is to have 3 different pane inside each of the tab which I will create. So for that I am trying to use BorderContainer inside TabContainer but it seems to be not working. Here is what I am trying.
A,B and C are the tabs which i am trying to create.Inside which I am using ContentPane for each of them and then BorderContainer to specify left,center and right region for that particular tab.
But it is not giving me any output. Please advise what i am doing wrong here.
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="splitter:true, region:'top'">
<div data-dojo-type="dijit/layout/ContentPane" title="A" selected="true" data-dojo-props="splitter:true">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab A</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab A</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab A</div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="B" data-dojo-props="splitter:true">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab B</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab B</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab B</div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="C" selected="true" data-dojo-props="splitter:true">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab C</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab C</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab C</div>
</div>
</div>
</div>
Your declarative markup is correct, but since I can't see the rest of your code I would guess that you are not calling require on TabContainer, BorderContainer and ContentPane. Dojo needs you to bring those in before you can use them declaratively like you are doing. So you would need this in your javascript:
require([
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane"
]);
Here is a pen that shows your code works, so I would check to see if you are pulling in those modules with require.
http://codepen.io/kyledodge/pen/MwpMZm
The other thing to check is if your dojoConfig is set to parseOnLoad:
dojoConfig = {
parseOnLoad: true
};
If not, you'll either need to set that, or require dojo/parser and call parser.parse(). Parser is key to using the data-dojo-type attribute like you are doing. Here is some info that may be helpful:
http://dojotoolkit.org/reference-guide/1.10/dojo/parser.html
I don't exactly have an answer but I think I can pin down exactly why nothing shows up: The border container doesn't seem to "fill" the containing object. I'm trying to put a border container inside another border container, and its child nodes are present but seem to end up with zero height. Apparently you have to explicitly set the border container's dimensions.
I'd like to put a stack of divs inside a single Bootstrap 3 column.
Specifically I want to layer a loading progress gif image on top of the image that is being loaded.
However simply placing the image tags inside a Bootstrap column and setting the CSS z-order doesn't work.
<div class="container">
<div class="col-xs-4 left">Left Col</div>
<div class="col-xs-4 imageholder">
<img class="center-block" src="http://paulsmedia.s3.amazonaws.com/public/lgspinner.gif" width="40px" height="40px" style="z-index:999"/>
<img class="center-block" src="http://paulsmedia.s3.amazonaws.com/public/yeoman.png" style="z-index:-1"/>
</div>
<div class="col-xs-4 right">Right Col</div>
Plunk : http://plnkr.co/8T7hyb900g3d4z9IO6Ta
Is there a way to achieve this and retain responsive behaviors?
You could use absolute positioning for <img> tags
We are using Bootstrap 2 on a Joomla 3.2.2 site. See: http://test.stuntlist.com/west
The first slide works perfectly, but when the second slide comes in, it disappears. You can see it start to transition between the slides, but then the area where the slide should be just disappears and the content is moved up into the slide area.
I don't see any JS errors on the site. We have used the same carousel code on other sites without this issue.
Here is the carousel code:
<div class="slideshow">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="/component/joomgallery/action-photos?Itemid=88"><span data-picture data-alt="">
<span data-src="/images/hero/slide01.jpg"></span>
<span data-src="/images/hero/portrait/slide01mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide01.jpg" alt=""></noscript>
</span></a>
<div class="carousel-caption">
<div class="container">
<h4>Slide Caption Goes Here.</h4>
</div>
</div>
</div>
<div class="item">
<span data-picture data-alt="">
<span data-src="/images/hero/slide02.jpg"></span>
<span data-src="/images/hero/portrait/slide02mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide02.jpg" alt=""></noscript>
</span>
<div class="carousel-caption">
<div class="container">
<h4>Second Caption.</h4>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
Any idea what could be causing the problem?
Thank you.
This is caused due to a conflict with Mootools, download the following plugin and apply your preferences and it'll resolve this problem:
https://extensions.joomla.org/extension/mootools-enabler-disabler
The problem is Joomla adds another DIV (We will call it JDIV) outside the Carousel container, when second/EVEN Numbered Slides are viewed some script sets the height of the JDIV equal to "0px", see my code below
<div class="col-sm-12 pharma">
<!-- this is the div which joomla is adding (JDIV) -->
<div style="margin: 0px; position: relative; overflow: hidden; height: 0px;">
<!-- this is the div which joomla is adding (JDIV) -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: -203px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
....
</div>
<div class="ind-div">
<ol class="carousel-indicators">
....
</ol>
</div>
</div>
</div>
</div>
The Solution
This solution worked for me and should also work for you too.
Add a CSS class named "#myCarousel" ( ID of the carousel) and sets its margin to 0px with important,
#myCarousel{ margin:0px !important; }
Secondly add another CSS class like
.pharma>div{ height:204px !important; }
where .pharma is the class which I have used on the DIV which is outside the JDIV. The height will be different from what I have used and might have to use media queries if using responsive.
To find the height simply inspect the element and note the height of the first slide and use that height in CSS class.
I do not have a fix for you but I was able to find a few issues. The first and biggest issue being that you have inline styling that is causing the image to "disappear". The image is really just moved 572px upwards and is off the screen. Notice the two images below. The first link is the image that does work. The second link is the image that does not display.
http://tinypic.com/r/hthi4y/8
http://tinypic.com/r/2hoix35/8
Using chrome, I opened the developer console and manually changed the margin to 0px instead of -572px and it fixed the issue. I would take a look at your JS again and see what values are being applied to each image because the entire display is being rendered dynamically, I assume for mobile devices.