I have a problem with Bootstrap 3. The setup is a simple 2-column page (sidebar and main content). Because I have dropdown menus which can overlay out of the main container, I cannot use the visibility:hidden or auto trick.
I use another technique which is applying a padding-left to the main container to ignore the floated element.
.sidebar {
float: left;
width: 200px;
}
.main {
padding-left: 210px;
}
Unfortunately, bootstrap navs use a clearfix internally which causes the navbar inside main to become as big as the sidebar.
http://jsfiddle.net/9ejqa/1/
Is there a way to make the clear only clear elements inside main and not including the sidebar?
instead of manually trying to make the columns yourself you can use the built-in bootstrap classes that do everything for you and are responsive.
First wrap everything with a div that has class="container"and in that you have a div with class="row" then add to the sidebar and to the main div the appropriate col class'
Use the bootstrap Grid page as a reference to see all the examples they have.
I have updated your FIDDLE with the basic markup to do what you need, hope that is what you are looking for.
Related
I am trying to remove the horizontal scroll bar that is appearing on the website that I am working on at Real Estate Website Scroll Bar Issue
I think it might be in the bootstrap.min.css file:
{.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}
But, that is a reference to a table. So I am not sure how to get rid of the scroll bar. Any help would be great. Thanks, Beth
You can either set:
body{
overflow-x:hidden;
}
Or fix what is causing the grid system to overflow. I see you are overriding the default bootstrap grid styles. I suggest you leave bootstrap to handle the rows and columns widths and paddings.
You have .row classes that are not a child of .container or .container-fluid. One is .containerNew -> .row and another is #about -> .row. Bootstrap requires .row be a direct child of .container or .container-fluid because .row has a negative left/right margin that works within left/right padding in .container and .container-fluid. So the negative margins on .row are creating the horizontal scrollbar.
You also have 2 #about sections - an ID can only exist on the page once.
I am using Bootstrap for responsive design and my whole site is wrapped inside container. The problem is that on some pages I need to have <div> elements 100% wide on screen. The problem is their parent container is of course not 100% wide so the child also cannot be. What can I do if application.html.erb looks like this:
<body>
<div class="container">
<%= yield %>
</div>
</body>
So, all my generated sites are inside container. That was great for me until recently. Now I run into a problem that some elements inside generated sites need to be wider than container and I am not sure how to accomplish that. Any ideas? Thank you.
I will post a CSS solution thats works for IE9+, althought i believe its betters to use a different layout for that case with .container-fluid class
.fullscreen-row{
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
.fullscreen-row:before,
.fullscreen-row:after {
display: table;
content: " ";
}
.fullscreen-row:after {
clear: both;
}
Use a different layout for the pages that require it?
Just create a new file in layouts layouts folder. And use it when rendering in the controller.
render action: :page, layout: 'new_layout'
http://guides.rubyonrails.org/layouts_and_rendering.html
Alternative solution I use quite often:
.element-we-want-to-jump-out {
position:relative;
width:110%;
/* (width - 100)/2 */
left:-5%;
}
.parent-of-container {
/* can be also a body element, only condition is that it should fill out full viewport width and you will not be able to scroll horizontally inside. */
overflow-x:hidden;
}
Note that Bootstrap container uses absolute paddings and the 10% used for overflowing might not be enough for very low viewport widths (< 300px). You can still use more and adjust your "jumping out element" (e.g. by changing background size if it is an image, or padding if it is a table etc...)
I want to achieve that result as my web app layout:
I create application for mobile usage first. I want to fixed top menu that stretch to it content and content at the bottom of this menu. Content height can be very long but I want to use overflow-y: auto;. I use CSS display: table; for container and display: table-row; for menu and content to solve this problem. JSFiddle example here.
Which pros and cons should I expect? I.e. mobile browsers interoperability, performance issues and so on.
I had this exact same issue and I solved it in exactly the same way you did. The only issue I ran into was that the row on the bottom:
#content {
display: table-row;
height: 100%;
}
IE will not respect this and it will see height:100%; and instead of taking of the remaining space of the table like every other browser it will be equal to 100% of the entire table causing your layout to render incorrectly. The only way i found to solve this was to use a bit of jquery with a window resize function to basically only fire when it's IE and apply a pixel value height to the #content based on what it should be.
I'm implementing a menu based on this one:
http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
(Demo)
The menu uses a UL / LI structure and CSS for appropriate rendering.
The trouble is, if the browser is not wide enough, the main menu items wrap.
I have surrounded the menu in a DIV.
When I apply
overflow-x: auto;
to that DIV, mousing over a menu item causes scroll bars to appear around the DIV (presumably to accommodate the drop down menus).
How can I prevent the DIV from wrapping while retaining the drop-down menus?
You could simply add a fixed width to the div tag, like such width: 700px;
The best solution I can think of is the one suggested in the comments in The Jonas Persson's answer. It's using white-space: nowrap. For this to work though, you'd have to be using display: inline-block instead of float:left/right to horizontally align the menu's elements.
I played around with your demo using chrome's web developer and made it work.
Just replace every float: left with display: inline-block Add font-size: 0 to ul#menu and override it on ul#menu li with font-size:12px - that's the size your using. (Using display: inline-block adds some whitespace between the blocks. That font-size stuff takes care of it.).
Next ensure the inline blocks are vertically aligned with the top of the container - add vertical-align: top to the li's.
Finally, add the whitespace: no-wrap to the div wrapping ul#menu. That's it.
http://jsfiddle.net/95pR2/1/
Essentially what the title says, I am trying to center the numbers to the center. This is taken from http://www.kevinresol.com/divslideshow/example.php
Something else that I am having an issue with is centering the facebook embedded div like button. It is the similar issue of centering a div within another div. I was able to get it to center by doing style="text-align:center" on the parent div, but doesn't work on the first issue (so I posted both).
http://jsfiddle.net/qWJm5/1/
I'm pretty sure its related to correctly styling parent and child divs, but i've tried other stack overflow forums and they don't seem to work for example doing margin:0px auto;.
Thanks in advance.
Your script is automatically floating your control elements with an inline style, if you remove that line from line:90 of your jquery.divslideshow-1.2.js script you can then style the control elements yourself. So, remove line:90, which reads:
.css('float','left')
And add the following CSS:
CSS
#dss .control-containter {
text-align:center;
}
.controls {
display:inline-block;
}
And all should be well.
demo: http://jsfiddle.net/95pR2/7/
Apply a text-align: center; to the parent div. Remove the float:left on the child divs, and make each child div an inline-block.