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
}
Related
I am using Bootstrap's grid to align an input, a button and an alert message.
However, I found the height of alert message is much higher than that of button and input.
Is there a way to make the height of all elements in grid consistent?
Here is example and code:
https://jsfiddle.net/rktg0L2w/
<div class="container-fluid">
<div class="row" >
<div class="col-xs-3 col-xs-offset-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Search</button>
</span>
</div>
</div>
<div class="col-xs-3">
<div class="alert alert-success"> Result: </div>
</div>
</div>
</div>
Thanks
Derek
Alert div isn't made to place inside your views. It has it's own padding and margin. It is usually put at the top of page.
However if you want to put it inside your view. You could either make it small by removing padding or make your view vertical align.
I made both alternatives in this https://jsfiddle.net/rktg0L2w/1/
1) For small alter div that matches your input change padding:
.alert-small{
padding: 7px;
}
2) In case you want to make both input and alter vertical align:
Place vcenter class on your row div and alert-large on your alter div.
.vcenter {
display: flex;
align-items: center;
}
.alert-large{
margin-bottom: 0px;
}
Bootstrap has its own standard, however you can change the code by edit the raw bootstrap css or override the bootstrap css code. For example :
padding is the problem in your case, click here for 1st picture
hola, click here for 2nd picture
However, you can make it specific by adding new class or with your superpower and your handsomeness tho
t(.__.t) my life
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>
I'm creating a list of employees (2 items in each row), and I've encountered several problems:
I want picture to use full space of left side of list item - the example is here: http://2fm9xz2drvqemrbu.zippykid.netdna-cdn.com/wp-content/uploads/2013/01/facebook-search-results.jpg
borders of list items with thumbnail class touches each other - I'd like to have some padding
My example in fiddle: http://jsfiddle.net/bC4Wy/
My list item code:
<div class="col-sm-6 col-xs-12 thumbnail">
<div>
<div class="col-xs-3"><img class="img-responsive" src="http://lorempixel.com/300/300/" /></div>
<div class="col-xs-9">
<div class="h4">Paul Smith</div>
<div>Title: Developer</div>
<div>Skills: C#, .NET</div>
</div>
</div>
</div>
I see that you're using thumbnail and putting "col" inside of col directly.
You may consider not using thumbnail at all:
<div class="col-sm-6 col-xs-12 listitem">
<div class="row">
<div class="col-xs-3"><img class="img-responsive" src="http://lorempixel.com/300/300/"/></div>
<div class="col-xs-9">
<div class="h4">Paul Smith</div>
<div>Title: Developer</div>
<div>Skills: C#, .NET</div>
</div>
</div>
</div>
CSS
.listitem {
border-radius: 5px;
border: 1px solid black;
overflow-y:hidden;
}
.listitem img {margin-left: -15px;}
I have also added additional row to insure your layout will be consistent. You may want to add styling for the border radius for mozilla and webkit.
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.
How to add vertical scrollbar to dojox.grid.DataGrid ?
<div id="system_status" >
<div dojoType="dojo.data.ItemFileReadStore" jsId="system_flags" data="window.store_data_system_flags"> </div>
<div id="grid" dojoType="dojox.grid.DataGrid" store="system_flags" structure="window.layout_system_flags" queryOptions="{deep:true}" query="{}" clientSort="true" rowsPerPage="10"> </div>
</div>
Just set CSS "height" style for div with id "system_status" and if the grid will need more space than scrollbar will appear automatically.
<div id="system_status" style="height:200px" >
<div dojoType="dojo.data.ItemFileReadStore" jsId="system_flags" data="window.store_data_system_flags"> </div>
<div id="grid" dojoType="dojox.grid.DataGrid" store="system_flags" structure="window.layout_system_flags" queryOptions="{deep:true}" query="{}" clientSort="true" rowsPerPage="10"> </div>
</div>
dojo-grid-styling
I found I could add this style to override the dojo style that might cut off anything at the bottom of the grid:
.dojoxGridContent {
overflow: auto;
}