I am using the twitter bootstrap css toolkit for building master page for an application in asp.net webforms 2.0( also .NET 2.0). Nothing of a programming question though it is about design i got page with
Header
Breadcrumb
Maincontent
-leftsidebar
-pageContent
-rightsidebar
Footer
yeah this is one of those sidebar questions, i got the HTML like below
<div class="row">
<div class="span4">
<!--Place holder for left sidebar-->
<asp:ContentPlaceHolder runat="server" id="phLeftSidebar">
</asp:ContentPlaceHolder>
</div>
<div class="content">
<!--Place holder for main content-->
<asp:ContentPlaceHolder runat="server" id="phPageContent">
</asp:ContentPlaceHolder>
</div>
<div class="span4">
<!--Place holder for right sidebar-->
<asp:ContentPlaceHolder runat="server" id="phRightSidebar">
</asp:ContentPlaceHolder>
</div>
</div>
Question
In one of the content(child) pages i got no content for the left sidebar & i was expecting the middle content to take that space too since the right sidebar was spanning only 4 grids. So how do i make the content section take up the available space on absence of either right or left sidebar.
I answered a question much similar to this, you can take a look at the result here.
What it basically came down to was creating a new set of classes that you can add to your .content area in your child page so it can conform to your sidebars.
Just add this to your main CSS and add a class to your .content area according to your sidebar needs:
.fixed-fluid {
margin-left: 240px;
}
.fluid-fixed {
margin-right: 240px;
margin-left:auto !important;
}
.fixed-fixed {
margin: 0 240px;
}
Here is a demo of how it looks:
Without left sidebar: http://jsfiddle.net/6vPqA/4/show/
Without right sidebar: http://jsfiddle.net/6vPqA/5/show/
Related
I have a slider that I need to fit its content within the bootstrap container. However, I want to put the pager outside the container. This is my logic but it doesn't work.
<div class="container-fluid"><!-- a wrapper for the slider and its pager -->
<div class="pager">
my pager content
</div>
<div class="slidercontent container"><!-- so that the slider content fits within the container area with the normal margins-->
my slider content
</div>
</div>
CSS:
.pager{
position:absolute;
left:-50px;
}
Can't see your code though...
I am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:
<body>
<div style="width:100%; max-width:100%; height:100%;">
<div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
<!-- Nav Items Go Here -->
</div>
<div class="large-9 columns">
<!-- Main Content Goes Here -->
</div>
</div>
</body>
Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?
THank you!
If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.
HTML
<body>
<button>Toggle sidebar</button>
<div class="row">
<div id="navDiv" class="small-2 medium-1 columns">
<img src="http://dummyimage.com/48"><span>Item 1</span>
</div>
<div id="content" class="small-10 medium-11 columns">
<!-- Content goes here -->
</div>
</div>
</body>
CSS
.small-2 span {
/* Hide text when sidebar is small */
display: none;
}
JavaScript + jQuery
$(function() {
$('button').click(function() {
// Resize sidebar
var navDiv = $('#navDiv');
navDiv.toggleClass('small-3');
navDiv.toggleClass('small-2');
navDiv.toggleClass('medium-2');
navDiv.toggleClass('medium-1');
// Resize content
var content = $('#content');
content.toggleClass('small-9');
content.toggleClass('small-10');
content.toggleClass('medium-10');
content.toggleClass('medium-11');
});
});
Demo on Plunker
I have following webpage:
<div id = "wrapper">
<div id="leftmenu>
...
</div>
<div id="search">
...
</div>
<div class="Container">
<div id="content">
<iframe id="iF" name="if" src=""></iframe>
</div>
</div>
</div>
It bascially shows the menu in the left search bar on top and iframe with content below search bar and next to the menus. Problem i am having is i dont want it to show vertical and horizontal scrollbars inside ifram but rather use browsers scrollbars.
if i set like this in css:
.Container
{
position:absolute;
width:100%;
height:100%;
left:180px;
}
It removes horizontal scrollbar but is not removing vertical scrollbar. Can anyone guide me how to remove this vertical scrollbar from iframe.
Try: overflow: hidden; on your iframe.
#content iframe {
overflow: hidden;
}
Try this... After the iframe loads it resizes it using javascript. It'll only work if the iframe src is of the same domain.
<div id = "wrapper">
<div id="leftmenu>
</div>
<div id="search" >
</div>
<div class="Container">
<div id="content">
<iframe id="iF" onload="resize(this)" name="if" src="/"></iframe>
</div>
</div>
</div>
<script>
function resize(elem){
var outer=elem;
var inner=elem.contentDocument.documentElement;
outer.style.border="0";
outer.style.overflow="hidden";
outer.style.height=Number(inner.scrollHeight+10)+"px";
outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>
There should be a scrolling attribute for the iframe you can just set to no, that takes care of the scrolling.
The iframe doesn't know it needs to be larger than the page it is in. If you know the height of the page you are attempting to show in the iframe, you can set the iframe height accordingly.
That being said, if the page you are displaying may change in size, your maintenance makes this pointless.
Charlie Frank's answer is good for same domain applications.
I am using JQGrid within an ASP .NET MVC application. The grid itself is working great. However, the header height of the grid (or first grid on the page) is growing to match the height of my left navigation menu. Here is most of the Site.Master layout that I have. I just don't see why this is happening.
<div class="page">
<div>
<div id="left">
<div id="leftnavmenu">
<%= Html.MvcSiteMap().Menu("MvcSiteMapProvider", "activenav")%>
</div>
<div id="leftnav-msg">
Message goes here
</div>
</div>
<div id="main">
<div id="mainsitename">
<div id="mainsitenameimage"></div>
<div id="mainsitename1">Intake Tool</div>
</div>
<div id="mainpagetitle">
<%--<%=Html.MvcSiteMap().SiteMapPath(" > ") %>--%>
<asp:ContentPlaceHolder ID="PageTitle" runat="server" />
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="maintabledata">
<asp:ContentPlaceHolder ID="TableContent" runat="server" />
</div>
<div id="footer"></div>
</div>
</div>
</div>
I assume that #left has a float:left style, while #main does not. This appears to be a bug with jqGrid. There's another post that deals with the exact same issue.
I have actually created a jsFiddle example that illustrates the problem.
In the other post Oleg suggests that you use float:left on both side-by-side <div>s, with another div with clear:both after them. This would not work in my case, because I want the right div to expand to the whole remaining width of the browser window. Floated <div>s must have explicit widths associated with them (if not, they take on the width of the widest element inside them).
One work-around that worked for me is to set a height of the floated <div> to something small (1px) and set an explicit height for the content of that div. This is illustrated in the jsFiddle above.
i have a problem after excluding side bars from a wordpress page here http://www.topfxrebates.com
i want to fill the space of the removed side bars because i need to draw a big table that fits the whole page
here are some screenshots
1 - the problem
http:// img2.pict.com/99/9d/c7/3799424/0/1279296576.jpg
2 - this is what i want to do
http:// img2.pict.com/b4/75/1b/3799423/0/1279296572.jpg
thanks in advance
Just put an ids on the body to differentiate between the pages with and without a sidebar. (I assume you are using display: none; or not including the sidebar and not using visibility: none;), if you are using the latter, then change it to display: none;
<body id="with_sidebar">
<div class="content">
</div>
<div class="sidebar">
</div>
</div>
#with_sidebar .content{width: 60%;)
<body id="without_sidebar">
<div class="content">
</div>
</div>
#without_sidebar .content{width: 100%;)
Just looked at your code, seems the easiest thing for you to do would be to change
<div id="content">
to
<div id="content" class="nosidebar">
Then add this to your CSS:
#content.nosidebar{width: 100%;}