I'm relatively new to Susy and responsive design. I've managed to setup my grid and using at-breakpoint(), I've made the page fully responsive as required first by testing it while resizing the browser window, and then testing it on the actual mobile devices (phones and tablets). I encounter a problem with the iPad as requires an extra orientation rule (orientation: landscape) in the media query. What's the workaround here, is there a way to include it in the at-breakpoint rule or I'll have to make up a separate media query just for this case?
Here's my grid setup:
$total-columns: 4;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: $gutter-width/2;
// alternative layout breakpoints
$tablet-small: 6;
$tablet: 8;
$computer: 12;
And when dealing with the sidebar and the page body, first I display them as block elements to fill the entire page horizontally, and after the breakpoint I make them behalf as columns like so:
#sidebar {
#include at-breakpoint($computer) {
#include span-columns(3, $computer);
}
} // sidebar
#page-body {
#include at-breakpoint($computer) {
#include span-columns(9 omega, $computer);
}
} // page-body
How should I alter the code so that it keeps the variables for the breakpoints and just add the orientation rule? Thanks!
If you want to target specific device, I think it's better to specify the width.
So instead of $computer: 12; maybe do $computer: 48em 12;
Once the min-width: 48em; is reached, it will change the layout to become a 12 column grid.
something like this SHOULD work:
$device-lrg-landscape: max-device-width 480px, orientation landscape
#include breakpoint($device-lrg-landscape)
Related
I'm using Bootstrap MVC and have a 3 column layout for the index page for a internal blog. Small left hand column which shows pics, blogs in the middle and useful widget in the small right column.
When you view the site on a mobile device it all moves as it should but I would like the left column to move after the main blog column only for a mobile device. Is this possible I found the push and pull commands but it dosnt do it for just mobiles?
Cheers
What I would do is either use the default media queries in your own css files. These are the ones that bootstrap uses:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
or depending on your layout you may want different break points. You would just either use id's for those columns or add classes to get the behavior that you want.
Hope it helps!
On JavaFX2.2, I created my own style class to represent table cells that contain invalid data. But my style class seems unable to override -fx-text-fill in the hover, selected, and focused states. Here is my style class:
.invalid-table-cell {
-fx-text-fill: red;
}
.invalid-table-cell:hover {
-fx-background-color: salmon;
-fx-text-fill: blue; /* No worky */
}
.invalid-table-cell:selected {
-fx-background-color: purple;
-fx-text-fill: orchid; /* No worky */
}
.invalid-table-cell:focused:hover {
-fx-background-color: red;
-fx-text-fill: green; /* No worky */
}
When my app runs, I can see changes in -fx-background-color, but I see no changes in -fx-text-fill in any of the special states.
What am I doing wrong?
!important is likely required due to the specificity of your css rules versus the css rules of the default caspian or modena stylesheets (though my css skills are limited in terms of evaluating this).
SceneBuilder 1.1 has a css analyzer that can help determine what css rules and attributes are being activated. That may help in debugging css rule activation in general, though it is not much help in this specific case unfortunately as you can't set the styles on table cells through SceneBuilder 1.1.
One work-around is to copy all of the table-view css rules from the modena or caspian css (unfortunately there is a lot of them) and place the rules in your user stylesheet. Prepend the style selection element .invalid-table-cell to each of the table css rules in your user stylesheet and modify the rules as appropriate to achieve your desired look and feel. This will ensure that your ruleset has the correct level of specificity to override the default rules. It is unfortunately, a pretty arduous process and perhaps your !important overrides might be a better solution for you.
A slightly easier way to customize styles is to override predefined constants, for example something like below (which I haven't tried and just demonstrates a principle as the exact selector and rules needed may differ):
.invalid-table-cell {
-fx-selection-bar-text: goldenrod;
}
As much of the default table cell styles are defined using -fx-text-fill: -fx-selection-bar-text;, just setting this value to the appropriate value allows you to override all of those default table cell styles. But it overrides them all to the same value, so if you need different values for different css psuedo-states like in your question, then you will need to define those rules explicitly as outlined earlier.
Following jewelsea's advice, I increased the specificity of my CSS rules to match the specificity of the corresponding rules in capsian.css. Because I was curious, I increased the specificity of my own rules incrementally and discovered that anything less specific than the following rules does not work in my situation.
.table-view:cell-selection .table-row-cell:filled .invalid-table-cell:hover {
/* Works! */
}
.table-view:focused .table-row-cell:filled .invalid-table-cell:selected:focused {
/* Works! */
}
.table-view:focused .table-row-cell:filled .invalid-table-cell:focused:selected:hover {
/* Works! */
}
I'm having some problem regarding the default background and border of the ScrollPane.
Using this style made the problem clearer to see.
setStyle("-fx-background-color:blue; -fx-border-color:crimson;");
I've tried this style and got no luck only the red border gone and left me with the blue one.
setStyle("-fx-background-color:blue; -fx-background-insets:0; -fx-border-color:crimson; -fx-border-width:0; -fx-border-insets:0;");
I've looked at this old post JavaFX Hide ScrollPane gray border and http://docs.oracle.com/javafx/2/ui_controls/editor.htm
This line of code doesn't work neither
scrollPane.getStyleClass().add("noborder-scroll-pane");
Thanks
In the current version of JavaFX 8, you can use the edge-to-edge style class to remove the border entirely:
<ScrollPane styleClass="edge-to-edge"/>
I have found a solution and would liked to post it here so others won't need to waste their time find it again.
By looking at the default css of JavaFx (caspian.css) which has been extracted from the library using this command.
jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css
I could see that the one I missed is
-fx-padding: 0;
So this is the css class I'm using.
.scroll-pane {
-fx-background-insets: 0;
-fx-padding: 0;
}
.scroll-pane:focused {
-fx-background-insets: 0;
}
.scroll-pane .corner {
-fx-background-insets: 0;
}
Try use this first
.scroll-pane > .viewport {
-fx-background-color: transparent;
}
Before setting the background color
There seems to be a simple solution, which is to use "-fx-background: rgb(80,80,80);", that is,
scrollPane.setStyle("-fx-background: rgb(80,80,80);");
At least this works perfectly for me, while "-fx-background-color: rgb(80,80,80);" or "-fx-control-inner-background: rgb(80,80,80);" do not work in javafx 8. "-fx-background-color: rgb(80,80,80);" did work in earlier versions of javafx.
You can use:
-fx-background-color: transparent;
-fx-control-inner-background: transparent;
If you set only -fx-background-color, you will see the color change is applied to only the ScrollPane's inner edges, and the color of the center area is still not changed.
The -fx-control-inner-background property will change the color of that center area.
Honestly, your question was not clear enough, but I am only providing this answer to help others if I can.
What is causing this problem is you have the ScrollPane and inside it something called viewport that is bound to the ScrollPane. The properties that you apply for the ScrollPane object does not apply for the viewport. If you want to apply the properties for both ONLY, not the children too, you have to use the stylesheet property, not the style property itself, which uses in-line css code. For example, if you want to make the ScrollPane transparent, you have to apply the property for both, assuming the name of file is "scrollPane.css", like so:
#mainScrollPane > .viewport {
-fx-background-color: transparent;
}
#mainScrollPane {
-fx-background-color: transparent;
}
However, you need to apply a special Id property for the ScrollPane object, so it does not apply for the children:
ScrollPane scrollPane = new ScrollPane(root);
scrollPane.setId("mainScrollPane");
scrollPane.getStyleSheets().add("scrollPane.css");
Rather than use FXML or CSS I prefer to consume the event, but this only works on the portion that has content. If your scrollPane is larger than its content you also have to fill the remaining space.
scrollPane.getContent().setOnMousePressed(Event::consume);
scrollPane.setFitToHeight(true);
scrollPane.setFitToWidth(true);
If I understand correctly, Susy's $container-style variable is a global setting. This means that if you use the following code, both layouts will be fluid.
$total-columns: 4;
$total-columns-large: 8;
$container-style: fluid;
#page {
#include container($total-columns, $total-columns-large);
}
But what if I want the 4-column layout to be fluid up to the (static) 8-column layout? I can think of a couple of ways to do that (like using at-breakpoint or with-grid-settings) but I'm curious if there is a better and/or recommended method.
I'm new to fluid grids, btw i'v started learning about diferent types and now trying to build page in cs6 (maybe not the right choice). I have a problem which I didn't have when building pages that are not fluid. I need to create different background images for header and footer that are 100% width and as wide as the screen, not just as wide as media-query, and also to setup the page to be 960 centered.
Are you trying to make the header wider than the rest of the page?
To do so, create different div's in the document. For example, I normally work all of my divs inside a master div, so that my entire page is affected. For example, a page with a main div, header, body, and footer:
#main #header #body #footer. The header, body, and footer are all create inside of the main div. To make everything float in the center of the page at a width of 960px, then you'd simply apply the attribute to the #main div like so:
#main {
width: 960px;
margin: 0;
}
The margin will cause the div to float in the center. It does not have to be any specific value, but you do need a margin to the left and right of the page.
To only float the remainder of the page, create everything else inside of the main div but the header and footer, and set the width of the header to 100%. So you would have the following overall snippet:
#header, #footer{
width: 100%;
margin: 0;
}
#main {
width: 960px;
margin: 0;
}
If you don't already do so, it'd be wise to add some padding on either side so that the images and text don't appear to run into the side of the page (which makes it difficult to read or view). 5px is usually all I add.