In this web site when you shrink the browser window the white space on the left and right disappear first, following by the shrinking of the right panel, followed by the main container panel. I have recently started to use ASP.NET MVC and in my test case my containers drop below the other containers as I resize the browser window. I am using a a site.master page with a left, center and right section as part of the body. It there an attribute in css that dictates the behavior or an HTML element? I have viewed the page source of this site's main page and looked at the CSS but nothing obvious has jumped out at me as how this is being controlled.
One of the great things about web development is that most often, when you see a site and think "How did they do that", it's very easy to look at the code and find out, and also to test it out - tools like Firebug for Firefox, the Developer Tools in IE 8 (F12) and Chrome will all display nicely formatted source and CSS, and will let you modify it in situ.
In the case of SO, the main body of the site is contained in a div with class of "container", the style rules for "container" are:
.container {
margin: 0 auto;
text-align: left;
width: 950px;
}
The key thing we're looking at here is that this class has a fixed width - 950 pixels, and the margins are set to (expanded):
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
Setting the left and right margins to "auto" has the affect of centering the div within the edges of it's container, and allowing them to expand to whatever width is needed once the container has taken up the required 950px.
Inside the container div, you then have a div with id "content" (no style rules), and then two divs: "mainbar" and "sidebar" whose styles are:
#mainbar {
float: left;
margin-bottom: 40px;
width: 715px;
}
#sidebar {
float: right;
width: 220px; /* this is also set in the "style" attribute *
}
These left and right floats are what's positioning the bars in the right places.
Another handy CSS rule is:
clear
this can be set to "both", "left" or "right", and will basically reset the floats on the containers.
However, it sounds like you're after what is often called the "Holy Grail of CSS" (Rick points out that there's a bug in this with IE7, see here for a fix) for good reason: Three Columns, with at least one of them flexible.
Other examples, of completely flexible layouts include:
Multi-column layouts climb out of the box
Fluid grids
It can be a combination of float, position, and margin and how you set these elements up. Without a URL, it will be hard to say exactly what the problem is or how to fix it.
For a starting point, I would suggest taking a look at YUI CSS Grids or 960.gs (960 Grid System) and one of the various reset.css files floating around out there. YUI has a very good one. The reset.css file makes your css look and act the same in all browsers and the grid systems give you a starting point for designing your site. They also give you confidence that what you are designing will look and act the same in all browsers.
http://developer.yahoo.com/yui/grids/
http://960.gs/
This is a html layout issue. Probaly the asp.net mvc layout is not very well done. Have a search for 'css column layout' on web there are plenty of examples on how to achieve a good layout. See for example In Search of the Holy Grail by MATTHEW LEVINE for a good discussion of a 3 column layout technique.
Related
<xe:namePicker id="npUserNames" for="hdnUserNames">
<xe:this.dataProvider>
<xe:dominoViewNamePicker viewName="Techs"></xe:dominoViewNamePicker>
</xe:this.dataProvider>
</xe:namePicker>
The Names in the left box of the dialog are center aligned. Same with the right (selected values) box.
I have tried text-align: left css in every possible surrounding element...The table cell, the table it is in, the surrounding div tag, the panel, the layout, the entire xpage. And the content of the namepicker dialog is still centered. How do I fix that? How can I specify the width of the dialog box?
Also, in IE11, the "X" button does not work. Nothing happens when you click it.
I'd recommend interrogating the HTML generated using your browser's developer tools to see if there's a class defined for the relevant HTML tags that you can override. If so, you can use that. If not, you may need to create your own Renderer or extension of the Name Picker to generate different HTML. That will be more complicated, but the trade-off of any framework is limited configurability at the cost of quicker development.
I'm not doing exactly what Withers suggested, but it did lead me to a solution based on a comment somewhere else.
I added a class dojo attribute and assigned a new css class to it. Only issue is that it is shifting everything in the dialog to the left...but it's ok for now.
<xe:this.dojoAttributes>
<xp:dojoAttribute name="class" value="namePickerClass">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
CSS:
.namePickerClass { margin: 0 auto; width: 50%; text-align:left; border: 1px solid blue; scrolling: none;
}
In Vaadin 12/13, we can turn on/off spacing in a veritcal/horizontal layout by calling setSpacing(...). But, what if we want spacing but a much smaller amount of spacing? How can we (via Java) set the spacing to a much smaller amount? (For margins and padding, I figured out the css -- it's a straightfoward this.getStyle().set("margin", "2rem") or this.getStyle().set("padding", "2rem") etc., but I couldn't figure it out for spacing. Also, is it "dangerous" if we also run setSpacing(true) (if we do it before any code we write to explicilty set a different value for the spacing?)
Probably the easiest way to customize the spacing is to set using the predefined custom properties as described in this document. As you see, the "padding" is the right way to do.
https://cdn.vaadin.com/vaadin-lumo-styles/1.4.1/demo/sizing-and-spacing.html#spacing
While writing all things on the server/JVM side seem tempting, you end up littering your code with style manipulation.
Usually a better place do setup things like that is in the actual styles of your application. This is an example now to do it (uses v13 beta 2, the code is Groovy - the take away there is just to add a theme to the element).
<dom-module id="vertical-layout-different-spacing" theme-for="vaadin-vertical-layout">
<template>
<style>
:host([theme~="spacing"][theme~="xs"]) ::slotted(*) {
margin-top: 8px;
}
:host([theme~="spacing"][theme~="xl"]) ::slotted(*) {
margin-top: 32px;
}
</style>
</template>
</dom-module>
def demoContent = { theme ->
new VerticalLayout(
*[1, 2, 3].collect{ new Div(new Text("Text $it")) }
).tap {
element.themeList.add(theme)
}
}
content.add(
// styles `xs` and `xl` are defined in the style override
demoContent('xs'),
demoContent('m'),
demoContent('xl'),
)
If you are using Lumo and you are on v13 already, there is a compact variant of the theme, if that is all you are after:
https://vaadin.com/releases/vaadin-13#compact-theme
If you are using the Material theme, then there is already built in support for different spacings. See https://cdn.vaadin.com/vaadin-material-styles/1.2.0/demo/ordered-layouts.html ; The names forthe theme to add are e.g. spacing-xl
I need to make a dropdown navigation, where for every parent navigation item, in the dropdown area I show the child pages + 3 images with a title linked to other pages.
I would need something like the 'Custom Navigation' module with an option to select images (or add a custom class, and get the image from the page).
Is there an extension which I could use for this? If not, would be easier/faster to change/extend a core module, or should I create a new one?
Thanks!
EXAMPLE ('Kollektion' menu-item hovered. The gray area is the submenu container)
I don't know of an extension that would allow including an image to a specific link in a navigation menu. But if you are willing to do it with CSS styles, here's how I would do it:
Any page can have multiple custom CSS classes and they do apply to the navigation (unless the navigation template has been changed in such a way that they don't anymore). The place where you enter these CSS classes is at the bottom of the Edit page view, under expert settings. Add any CSS classes you want and then edit the style sheet to make them look right.
If the three pages are not supposed to be subpages for the current page, but lead somewhere else, you can use the "Internal redirect" page type for them.
The CSS could be something like this in addition to your regular styling:
.level_2 li {
float: left;
clear: left; /* this is to stack them on top of one another*/
}
.level_2 li.special_class {
display: inline-block;
vertical-align: top;
}
.level_2 li.special_class:before {
display: block;
content: '';
width: /* the intended image width */
height: /* the intended image height */
}
.level_2 li.special_class.foo {
background-image: url('foo');
}
.level_2 li.special_class.bar {
background-image: url('bar');
}
...
Please remember that this isn't supposed to be a complete solution, but rather a principle upon which you can build your own. You may want to add backwards compatibility to older browsers (or not), etc.
I think there is an extension to allow you do that. check this link Navigation with images
and may be this one also Navigations-Bild
Either of this should give you what you want but with a little styling
I have some nested recursive functions which dynamically create collapsible with listviews that are in a side panel. I found the default 17em to be too small, especially as the nested text starts to get short. So I found the styles in the css which set it and I overrode those to use 25em. This might be a bit too much after testing on some devices. However I digress.
The thing I am here to ask is why my collapsible overflows the panel when I use data-display="overlay", when I set it to 'reveal' it looks fine. I thought it might be all my nested content, so I made a fiddle with static content here: http://jsfiddle.net/LF6UR/
<div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-position-fixed="true" data-swipe-close="true" data-dismissible="true">
and I can see it is not that, perhaps there is some other CSS property for the panel that I am not aware of. There seem to be lots of niggly little settings to get to know with this framework. Hope someone out there can help because I really think 'overlay' is better than pushing my main content area.
jQM adds a negative left and right margin to collapsibles within the collapsible set. You can override the margin like this:
.ui-collapsible-set .ui-collapsible{
margin-left: 0;
margin-right: 0;
}
Updated FIDDLE
Also, changing your collapsible set to data-inset="true" fixes the issue.
a solution without setting collapsibles to inset...which is important because I have nested collapsibles is to simply set the 'magic' .ui-panel-inner class which JQM puts in as an 'enhancement' but which makes it a bit difficult for traditional webdevelopers to know to apply styles to their controls.
.ui-panel-inner {
/*width: 25em;*/
padding: .2em 1.2em;
}
http://jsfiddle.net/magister/LF6UR/8/
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.