In my html the content should be centered on screen and his width should never be greater then 950px.
Since I want this same html to show on mobile and desktop I am using twitter bootstrap to make the layout responsive.
The problem is: I cant seem to make the content div to be centered AND have the max width of 950px.
When I open on a browser the css has this media query:
#media (min-width: 1200px)
that makes my div always fit the entire screen.
How can I fix this?
Basically what I want to do is something like this:
The orange line is the container (or body) and the blues are the rows
Thanks for any help.
EDIT
Just something I found that maybe help someone to help me
If I comment out this line:
#import "twitter/bootstrap/responsive";
my div.content keeps the 950px width but my html loses its responsive behavior, which I don't want
EDIT 2
The html markup:
<html>
<body>
<div class="container">
<div class="row">
<div class="span12">
<%= Content goes here %>
</div>
</div>
</div>
</body>
</html>
but on the browser it creates this things:
body = 100% width, on chrome 1280px
.container = width 1170px
.row = width 1200px
.span12 = width 1170px
Just to clarify, this is not a problem on twitter bootstrap, this is a problem on twitter-bootstrap-rails
The way I found to fix it on development is open the twitter-bootstrap-rails gem with gem-open and change the file: /vendor/toolkit/twitter/bootstrap/responsive.less commenting out these lines:
// LARGE DESKTOP & UP
// ------------------
#media (min-width: 1200px) {
// Fixed grid
#grid > .core(70px, 30px);
// Fluid grid
#grid > .fluid(5.982905983%, 2.564102564%);
// Input grid
#grid > .input(70px, 30px);
// Thumbnails
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
}
You could use the wrapper this will give you a default size of 940px.
<body>
<div class="container">
...
</div>
</body>
But if you are looking to a custom width, you should add some css in your application.css like this:
body .container{
width:980px;
}
Check it out here: Bootstrap - Layout
A nice tutorial for layout: Filling layout with bootstrap
Be sure to wrap your layout with <div class="container">, which will create a fixed layout that is centered. If this doesn't work, then perhaps something else is wrong with your layout. Please update your question with your layout HTML if this is the case.
Documentation: http://twitter.github.com/bootstrap/scaffolding.html#layouts
At the start of your responsive media queries (before ANY of them), set your element to have a "max-width"
body{max-width:1200px;margin:0px auto;}
Your site will still be responsive when you decrease browser width, but if you open up larger than 1200px (many decent widescreen displays) then it will stay as a 1200px container.
To keep it centred as it goes over 1200px add the following to the same container
body{max-width:1200px;margin:0px auto;}
The above adds "auto" margin to the left and right hand side of the element, which means means it becomes centred... (the 0px just means top and bottom are no margin, you could add some if you wanted/needed.
Note you don't have to add all that to body, but it just means it gets it out of the way at a high level....
Apparently it was a bug in the version of twitter-bootstrap gem i was using.
I dropped that project so i cant test in that environment anymore, and in some new project that i tried twitter-bootstrap again and didn't see this error again.
So i guess it is closed.
thanks for everyone
Related
I have a jQuery UI accordion with Markup structure
<div id="accordion2">
<h3>title</h3>
<div>stuff texty</div>
<h3>title2</h3>
<div>stuff texty</div>
</div>
However, the second tab of the accordion is in a plainer format than the first (i.e. it has less pictures and is hence more mobile friendly).
I am want to use a media query to hide the first tab and its contents when screen width is less than 640px. I tried giving the first h3 and the first div tags a class of first and then used
#media (max-width: 640px) {
.first {
display: none;
}
}
To make them disappear... but it didn't work. Does anyone know how I can go about doing this?
try this as a CSS3 option:
#accordion2 h3:first-of-type
{
display:none;
}
if you cannot support CSS3 then give that first heading a class name and target that.
I'm trying to create the overall layout of a webapp. The app is full-screen and has a fixed header and three columns/panes. The center pane consists of two rows:
The panes should be resizable through dragging the pane edges with the mouse (see arrows in image above).
The individual panes have should have vertical scrollbars in case of overflowing content, that is, no global browser window scrollbar.
Using jQuery and jQuery UI Resizable, I've created this (partly working) JSFiddle.
HTML:
<div class="header">
Fixed header
</div>
<div class="wrapper">
<div class="inner-wrapper">
<div class="left pane">Left</div>
<div class="center pane">
<div class="inner">
<div class="top">Center top</div>
<div class="bottom">Center bottom</div>
</div>
</div>
<div class="right pane">Right</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 20px;
background-color: moccasin;
}
.wrapper {
position:absolute;
top: 21px;
right: 0;
bottom: 0;
left: 0;
background-color: fuchsia;
}
.inner-wrapper,
.center.pane .inner {
display: table;
width: 100%;
height: 100%;
}
.pane {
display: table-cell;
}
.left.pane {
background-color: olivedrab;
}
.center.pane {
background-color: lightblue;
}
.center.pane .inner .top,
.center.pane .inner .bottom{
display: table-row;
}
.center.pane .inner .top {
background-color: lightcoral;
}
.center.pane .inner .bottom {
background-color: orange;
height: 100%;
width: 100%;
}
.right.pane {
background-color: #999;
}
JavaScript:
$(function () {
$(".left.pane").resizable({
handles: "e, w"
});
$(".right.pane").resizable({
handles: "e, w"
});
$(".center.pane .inner .bottom").resizable({
handles: "n, s"
});
});
It has several issues, including:
When resizing Left, Right is also resized (which it shouldn't)
When resizing Left towards full width, Center content is hidden under Right
When resizing Right the wrapper (Fuchsia-colored) is partly visible
Center bottom is resized through the top of the Center top, not through it's own top
I'm aware of the jQuery Layout plugin, but as far as I can see, it doesn't offer quite the layout I'm after. Also, I want to keep it as simple as possible.
Furthermore, I have tried Methvins splitter plugin, but couldn't get it to work.
My question:
Any suggestions for how to create a layout as in the image from jQuery UI Resizable and what I have in the JSFiddle?
There are more appropriate plugins, based on jQuery to obtain what you want.
OPTION 1:
I personally used in a my project UI Layout.
It is an almost old project (6 years ago), but in mid-2014 its development is re-started, even if there are no more information after september 2014.
Actually, last stable version is 1.4.3, released in sept '14. New website is:
https://github.com/allpro/layout/
OPTION 2:
If you need a more complete solution, you could think about jEasy UI, that is a complete framework that
[...] helps you build your web pages easily
It is a sort of replacement of jQuery UI, with some similar widgets (dialogs, accordions, ...) and something exclusive, like Layout module, already linked in my answer.
OPTION 3:
Analogue solution to the previous one, is Zino UI, another complete UI framework that has a specific component dedicated to "Split Layout"
OPTION 4:
jQWidgets is another library, with similar purposes of previous ones, and specifically could be interesting jqxSplitter module.
Related alternative (similar):
There is also another alternative, that allows to slice panels in the browser windows but in addition allows to drag&drop single panels creating different tabs, and side-by-side sub-windows.
This is called Golden Layout. It's different from previous ones, for many reasons also more powerful but surely at the moment it has not Touch support...
There were a few small problems that caused the behaviour that you don't like.
These were fixed in this Fiddle
The problems were:
When resizing Left, Right is also resized (which it shouldn't)
Fixed by setting a initial width (in percent)
When resizing Left towards full width, Center content is hidden under Right
Couldn't reproduce
When resizing Right the wrapper (Fuchsia-colored) is partly
visible Center bottom is resized through the top of the Center top,
not through it's own top
Fixed by setting left to 0 during resize.
$(".right.pane").resizable({
handles: "e, w",
resize: function(event, ui) {
ui.position.left = 0;
}
});
Center bottom is resized through the top of the Center top, not through it's own top
This is due to that JQuery UI Resizable uses relative positioning which do not work in table cells. Fixed by adding a content div that handles the resize.
<div class="top pane">
<div class="top-content">Center top</div>
</div>
I found one which seems acceptable for this requirement, if you looking for something more minimalistic compared to jEasy UI. : )
http://w2ui.com/web/demo/layout
Also it's no dead project; Seems still active on github https://github.com/vitmalina/w2ui/, which is nice.
I'll give it a try. Just wanted to share this, to save others search time, hopefully.
i'm usign this plugin
with jquery
http://www.bramstein.com/projects/jlayout/jquery-plugin.html
I came up with the answer to this myself, although in the end it took me over a year of development! The result is a modern, responsive panel layout widget built using jQuery and jQuery UI widget factory.
http://www.silvercore.co.uk/widgets/propanellayout/
The best solution at the time the question was asked was undoubtedly jQuery UI.Layout, but over time that project has stagnated and the plugin does not work with jQuery 2. Despite the code being released on GitHub its fate is unknown, which makes using it as the foundation of a long term project questionable.
A few of the other links posted here are dead now and if you don't want or need a full application framework your choices are limited.
OK, hopefully my last edit. Went through a bunch of these, and ended up with jQuery UI layout.
Goldenlayout is nice, but you have to actually add the html in each pane through javascript. If you've got all your stuff in react components I guess this might be fine, but not for my use case.
jQuery UI layout seems to be pretty robust and was just updated in 2014.
You can use Gridstack
It's easy to use and powerful.
I have a page on a project I'm creating for class where I wanted to align an image in the left side, with the text to the right aligned in the middle of the image. Instead of using html elements, I decided to try an internal CSS div elements within my external CSS. My problem is that I can't get them to align correctly vertically. I have the horizontal alignment, but the text either appears one line above or one line below the image. I tried the techniques included in this posting, but they didn't fix my problem. Align <div> elements side by side
Here is my internal CSS.
<style type="text/css">
/* left div holding the image */
#left {
width:170px;
align:left; }
/* right div to hold the text */
#right {
margin-left: 200px;
text-align:left; }
</style>
Here's the HTML
<div id="content">
<br/>
<br/>
<br/>
<blockquote>
<div id="right">Check back soon. Click here to receive an email when the site becomes available.</div><div id="left"><img src="images/construction-clipart.jpg" border="1" alt="Page under construction" /></div>
</blockquote>
</div>
Can you help me figure out how to make these align? To view how it is rendering, please visit my student project site at http://www.student.nvcc.edu/home/ligomes/TwoWiredChicks/Browse.html.
Thanks!
Finally, I hope this helps now. All you have for the right css is:
#right {
position: absolute;
margin-left: 200px
}
I'm using -webkit-overflow-scrolling:touch for native scrolling capabilities on my iPad. But I've come into quite an odd problem:
I have one div with various children. If these children are big enough to create the need for scrolling, the device properly scrolls correctly, with momentum and all. However, if this div is not big enough to require scrolling, and suddenly has elements inserted into it and now does require scrolling, you will not be able to scroll the element at all.
I hope that wasn't too incredibly confusing, but if someone could shed some light on what to do in this situation, that would be fantastic. There isn't much documentation about this property out there.
EDIT: Tried testing this a lot, and it seems now it's just a generally intermittent problem. Every 1 out of 5 times or so, scrolling just fails for my entire web app, no matter the contents.
I had the same issue and it seems like assigning the CSS class after the new DOM element is added seems to work fine:
// your code to add a div to the DOM
// the div contains a scrollable div with the content class
setTimeout(function(){
// this is using JQuery
div.find(".content").addClass("overflowScroll");
}, 1);
// CSS class
.overflowScroll {
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
// The HTML for the div
// I am adding a dynamic list to the content div
// which should use the overflow scroll
<div class="panel">
<div class="header">
</div>
<div class="content"></div>
</div>
I was seeing a strange phenomena when using Scriptaculous BlindDown and SlideDown effects, where they would smoothly slide, and then at the very end, they would jump an additional amount, maybe 10% of the slide distance.
I already saw the note on the BlindDown page that you have to be sure not to use padding, which I'd already done.
I was still thinking that this must be my mistake somehow, when I noticed that I see the exact same thing happening on their demo page for Toggle when clicking on either the Blind or Slide demos:
http://wiki.github.com/madrobby/scriptaculous/effect-toggle
Firefox 3.6.7, Chrome 6, and Internet Explorer 8 all display this effect on my computer.
So I was thinking about just writing it off and either living with it or cutting the effect out, when I noticed that the page for BlindDown does not display this effect:
http://wiki.github.com/madrobby/scriptaculous/effect-blinddown
So there must be a way to make this work. On my page, the jump is occurring whether I directly use BlindDown/Slide or whether I use Toggle.
Has anyone out there used these and managed to do so without this problem? Any ideas on what the secret is?
It's usually due to margin or padding.
The element you're blind-downing mustn't have any margin or padding, or should have margin:0.1% so that contained margins don't collapse through the bounds of the element either. If you do this it'll be smooth as silk.
also - ensure you've set overflow:hidden
Enjoy.
(the other place it'll fall down is if you don't define height. If you do this little incantation before you animate it'll get and set you height without bothering anything else.
elem.setStyle({position:'absolute',visiblity:'invisible'});
elem.setStyle({'height':elem.getDimensions().height+'px'});
elem.setStyle({position:'relative',visibility:'visible'}); //or position:'static'
In my experience, the jumping is just a performance issue, which is effected by the system specs, browser, and complexity of the html content you are toggling. Some browsers like safari and chrome have a pretty good javascript engine making them more efficient.
I see this is happening for you even when using chrome though? Is the html content particularly complex, or your computer overloaded with applications running?
There is definitely a little very well known secret... Have you tried wrapping your content in an extra div container? You should consider this best practice and almost a requirement specifically when using Scriptaculous effects.
For example... Say you want to slideDown or Toggle a login form - and you have::
<div id="login-panel">
<input type="text" name="username" />
<button type="submit" name="send">Login</button>
</div>
All you have to do is add an extra inner div tag::
<div id="login-panel">
<div><!-- extra div here -->
<input type="text" name="username" />
<button type="submit" name="send">Login</button>
</div><!-- close it here -->
</div>
Now when you do something like Effect.toggle("login-panel", 'slide'); the transition should be much smoother and less jumpy. It may seem a little sloppy but it almost always helps. Hope this helps you!!
Keep in mind that when Scriptaculous begins an animation, the container that is being modified will be absolutely positioned and then a record of the height will be taken, similar to what danielsherson mentions. If however the container does not exist within a relatively positioned parent container, then the dimensions of the animating container may change quite drastically. The easiest way to test this is to modify your container using firebug to set the position to absolute. What happens? Did the height change? For the best results, there should be no change in the dimensions of your animating container when switching to absolute positioning. What happens to the rest of your document, such as content moving underneath, will not matter.
The padding/margin issue is a tricky one too since there really isn't a way to prevent the margins from overlapping and creating issues. Best way I found to address this is to set your animating container to float and then use the clearfix hack on a parent container to make sure nothing overlaps.
<body style="margin: 0 auto; width: 300px; position: relative; background: black;">
<div class="parent nonanimating clearfix">
<div class="animating" style="float: left; width: 100%; background: white;">
<div class="apply-your-margins-and-padding-here">
...content...
</div>
</div>
</div>
<div class="parent nonanimating clearfix">
<div class="animating" style="float: left; width: 100%; background: white;">
<div class="apply-your-margins-and-padding-here">
...content...
</div>
</div>
</div>
</body>
Note that the classes are not functional and just for reference to my comments with the exception of clearfix, which is the float clear hack. The backgrounds and widths are only specified to give a better example of what is happening. Add whatever animation you'd like to $$('.animating')
I use this one (there are many), all though it is old and I don't even design for many of the browsers this hack supports..
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
I don't think it's a performance issue at all. I'm having the same issue. The ONLY way I've been able to make it not jump is to define a height for the div I'm sliding. I realize that this is NOT a good solution but it's the only one I've been able to find. I've also tried adding the additional div and it had no effect on how the Effect.toggle slide worked.
If anyone else has any more info on this, I'm all ears.
To prevent a Scriptaculous effect from jumping or jerking, remove the 'style' attribute from the element which you are applying the Effect to.
This:
<div id="mydiv" style="padding:10px;margin:10px;">
<button onClick="new Effect.BlindUp('mydiv');" />
</div>
Becomes:
<div id="mydiv">
<button onClick="new Effect.BlindUp('mydiv');" />
</div>
The styling can be placed in a enclosed div like this:
<div id="mydiv">
<div style="padding:10px;margin:10px;">
<button onClick="new Effect.BlindUp('mydiv');" />
</div>
</div>
The problem is caused by Scriptaculous reapplying the element's (mydiv) inline style declarations after the effect has been performed.
I have found success with using position: relative; on the block element using the slide/blind animation. Make sure padding/margins are placed on the child elements and not the slide block element.