Menu does not appear in reduced window size / responsive, using ibm carbon design system - carbon-design-system

Where should i change to make sure the Menu appears in all window / screen sizes of a website?
Built site using https://github.com/carbon-design-system/carbon-angular-starter

Here's the solution
Add the below line to /src/styles.scss file
...
#import "./assets/scss/carbon-override.scss";
Add a new file carbon-override.scss to /src/assets/scss
// forces the navigation items to be displayed at all viewport sizes
.bx--header__nav {
display: block;
}
PR/code on github.

Looks like this open issue in Carbon/Carbon-Angular:
https://github.com/IBM/carbon-components-angular/issues/1140

Related

Scene rendering goes dark after calling LoadScene/LoadLevel [duplicate]

I completed Unity's roll-a-ball tutorial and it works fine. I changed a couple of materials to make it look better. I also added a C# script that should restart the level when the player falls off of the ground (I disables the walls). I am using Unity 5.5.
It initially looks like this:
But when I go off the edge and the level restarts, it looks like this:
It sometimes looks like this for a few seconds after opening unity when the editor is loading.
Here is the script:
using UnityEngine;
using System.Collections;
public class DeathTrigger : MonoBehaviour {
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
}
void OnTriggerEnter (Collider other)
{
if (other.gameObject.CompareTag("Player"))
Application.LoadLevel(Application.loadedLevel);
}
}
Any ideas on what's causing this?
The colors and materials are loaded. This is a lighting problem because lighliting is still calculating in the background. This will likely occur in the Editor only. This should not happen in the build.
Depending on your Unity version, you can fix this by going to Windows --> Lighting --> Settings then go to the Scene tab. Scroll down and disable Auto Generate checkbox then click the Generate Lightning button.
For older version of Unity with no Auto Generate checkbox, see here.
After play with Lighting tools, only one thing should be change on Lighting Setting for every scene.
Window > Rendering > Lighting (Unity 2020)
Click at Environment Tab
At Environment Lighting, change Source from Skybox to Color.
Select white color from Ambient Color.
Done. Try test it.
Before
After
I found many solutions online but I was missing out a step, so I hope this helps.
Most solutions indicated to go to Windows->Lightning, then untick Auto and Click Generate Lighting. My problem was that while I was pressing the generate button I did not have all of my scenes loaded for preview (at least not the scene I had problems with), so it was only applying light generation to the loaded scenes. Make sure all scenes are loaded when generating the lights.
Try Clearing Baked Data if you are using unity version around 5.5
Go to Windows->Lightning->Untick Auto->Now Click dropdown arrow of Build Button which is near Auto(Check Box) -> Select Clear Baked Data.
Now try Your code which looks fine although SceneManager.LoadScene (1); is enough.
Also unloading the previous scene and setting new scene as active scene is a good practice.
This worked for me.
File > Build settings > player Settings > (on the left) Graphics > (Top-Right) gear icon > Reset
I'm a newbie and none of the advice on web helped me. However when I went to Window > Rendering > Lightning > scene tab; If "lightning setting" says “none”, click on it and choose “demo”- setting. Press “generate”.
So it seems like it was missing settings all together which made the scene go dark when loaded.
I encountered the exact same problem. What worked for me was to set Directional Light > Light > Mode to Realtime. (it was Baked, for some reason)
I hope this can help someone in the future.

when minimize browser's window, tooltipster's position not the same as has been set

I use tooltipster library.
I set tooltipster's position to be bottom. When I minimize the browser's window the tooltip is floating above, it's like the position was set to top.
How could I solve this?
Thank you in advance
According to the author's documented feedback, this functionality has been written but it not officially released yet.
This specific functionality has been requested and he has explained how it is implemented within the plugin options.
instead of:
...
position: 'bottom'
...
you put it in an array:
...
position: ['bottom']
...
this is how the scripts tells that it is to be forced.
have a look at these 2 links.
https://github.com/iamceege/tooltipster/issues/335
https://github.com/iamceege/tooltipster/issues/342

How to set a JavaFX Stage/Frame to Maximized

I'm using JavaFX 2. I want my frame to open maximized but I'm not seeing a way. I searched a bit on the internet without success. For the stage I see setFullScreen() and setIconified() but I don't see anything like setMaximized().
The Java 8 implementation of the Stage class provides a maximized property, which can be set as follows:
primaryStage.setMaximized(true);
When evaluating the sourcecode of the Ensemble.jar provided with the samples of JavaFX 2.0 SDK, the currently valid way to achieve window maximizing is
Screen screen = Screen.getPrimary();
Rectangle2D bounds = screen.getVisualBounds();
primaryStage.setX(bounds.getMinX());
primaryStage.setY(bounds.getMinY());
primaryStage.setWidth(bounds.getWidth());
primaryStage.setHeight(bounds.getHeight());
(you find similar code in WindowButtons.java)
The 'maximize' button is still enabled and when clicking it, the windows will grow a bit more (Windows OS). After this the 'maximize 'button is disabled. In the provided example the standard buttons are replaced. Maybe this is still an issue.
Better use Multi-Screen compatible maximize logic:
// Get current screen of the stage
ObservableList<Screen> screens = Screen.getScreensForRectangle(new Rectangle2D(stage.getX(), stage.getY(), stage.getWidth(), stage.getHeight()));
// Change stage properties
Rectangle2D bounds = screens.get(0).getVisualBounds();
stage.setX(bounds.getMinX());
stage.setY(bounds.getMinY());
stage.setWidth(bounds.getWidth());
stage.setHeight(bounds.getHeight());
try this simpler code
primaryStage.setMaximized(true);
and it fills up the whole screen
. note that if you remove maximize/minise buttons the application will fill the whole screen as well as remove the taskbar so mnd your initStyles if you have any
Use this to remove the Minimise, Maximise Buttons :
primaryStage.initStyle(StageStyle.UTILITY);
Where primaryStage is your Stage object.

AIR custom transparent chrome problem Flash Builder 4.5.1

I'm re-creating an AIR app with FB 4.5.1. (I've started from scratch, having had trouble importing FB 4 projects).
In the app.xml I have the following defined:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
Having done this I still get a full window with titlebar, min, max, and close buttons.
what gives?
I believe you need to create a skin for the application.
This appears in Adobe's forum, and includes an FXP of a functional transparent app:
http://forums.adobe.com/thread/476699
Setting systemChrome & transparency along with "backgroundAlpha" to "0" would have helped in Flex 3.
But, skinning of components in Flex 4 i.e Spark components is little different and completely customizable.
Following are the steps you need to do make the window transparent.
Set systemChrome to "none" in the XML configuration file
Set transparent to "true" in the XML configuration file
Copy the skin code from <SDK_FOLDER>\frameworks\projects\airframework\src\spark\skins\spark\S parkChromeWindowedApplicationSkin.mxml and paste in a new MXML file.
Set the "alpha" property of "backgroundRect" object inside the skin file to "0".
Assign the newly created skin as the "skinClass" for "s:WindowedApplication" object
Please import the attached FXP file using "File->Import Flex Project" menu and have a look at the code to make it much more clear.
First, I discovered it is easier to interact with app.XML by opening it via "Open With -> Text Editor".
Second, and this is really embarrassing, I had simply failed to remove the comments bracketing
was:
<!-- <systemChrome>none</systemChrome> -->
<!--<transparent>true</transparent>-->
should have been:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
...duh! I knew better, but...
Lastly, for a completely chromeless app, add
showStatusBar="false"
to the app header.
that's it!

Is it possible to render web content over a clear background using WebKit?

I'm trying to gauge the possibility of a patch to WebKit which would allow all rendered graphics to be rendered onto a fully transparent background.
The desired effect is to render web content without any background at all, it should appear to float over the desktop (or whatever is displayed behind the browser window).
Has anyone seen an app do this? (I can think of some terminal emulators that can.) If anyone has worked inside of WebKit (or possibly Gecko?) do you think it would be possible to do this?
Update: I've come to realize that Mac OSX dashboard widgets use this exact technique. So, this must be possible.
Update 2: I've compiled WebKit on linux and noticed the configure options include:
--enable-dashboard-support
enable Dashboard support default=yes
I'm getting closer. Can anyone help?
Update 3: I continue to find references to this in posts on various related mailing lists.
https://lists.webkit.org/pipermail/webkit-dev/2008-September/005019.html
https://lists.webkit.org/pipermail/webkit-dev/2009-June/008182.html
Solved!
Through ongoing research, scouring forums and source code repositories, I peiced together the necessary steps to accomplish this using only libwebkit and a standard compiz desktop (any Xorg desktop with compositing should do).
For a current libwebkit (1.1.10-SVN), there is an Ubuntu PPA:
deb http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main
deb-src http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main
As far as the code goes, the key is calling webkit_web_view_set_transparent.
And of course the system you're running it on should have a capable graphics card (intel, radeon, or nvidia) and be running a compositing window manager (like Compiz).
And finally, to actually see transparency, the content you're viewing must set a transparent background using CSS3, otherwise it's still completely opaque.
It's as simple as:
BODY { background-color: rgba(0,0,0,0); }
Here' is the full sample for the simplest possible webkit browser app, with transparency support:
#include <gtk/gtk.h>
#include <webkit/webkit.h>
static void destroy_cb(GtkWidget* widget, gpointer data) {
gtk_main_quit();
}
int main(int argc, char* argv[]) {
gtk_init(&argc, &argv);
if(!g_thread_supported())
g_thread_init(NULL);
// Create a Window, set colormap to RGBA
GtkWidget* window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
GdkScreen *screen = gtk_widget_get_screen(window);
GdkColormap *rgba = gdk_screen_get_rgba_colormap (screen);
if (rgba && gdk_screen_is_composited (screen)) {
gtk_widget_set_default_colormap(rgba);
gtk_widget_set_colormap(GTK_WIDGET(window), rgba);
}
gtk_window_set_default_size(GTK_WINDOW(window), 800, 800);
g_signal_connect(window, "destroy", G_CALLBACK(destroy_cb), NULL);
// Optional: for dashboard style borderless windows
gtk_window_set_decorated(GTK_WINDOW(window), FALSE);
// Create a WebView, set it transparent, add it to the window
WebKitWebView* web_view = web_view = WEBKIT_WEB_VIEW(webkit_web_view_new());
webkit_web_view_set_transparent(web_view, TRUE);
gtk_container_add (GTK_CONTAINER(window), GTK_WIDGET(web_view));
// Load a default page
webkit_web_view_load_uri(web_view, "http://stackoverflow.com/");
// Show it and continue running until the window closes
gtk_widget_grab_focus(GTK_WIDGET(web_view));
gtk_widget_show_all(window);
gtk_main();
return 0;
}
Back in Safari 1.3 and 2, there was a hidden debug menu (invoked via the Terminal: defaults write com.apple.Safari IncludeDebugMenu 1) that included a “Use Transparent Window” option.
http://www.macosxhints.com/article.php?story=20050418015445258
http://www.wiredatom.com/blog/2005/10/20/safari-transparency/
Not sure if this was a WebKit thing or a Safari thing though.
(In Safari 3, the debug menu seems to have been replaced by the “Develop” menu (enable in Preferences > Advanced) which doesn’t have the transparent window option.)
Basically you want to be setting the ARGB colour space to be sending to the window manager. Obviously only window managers that support compositing will be able to take advantage of this.
You might want to talk to the screenlet and compiz developers they should be able to help out more.
This gist works for me, as of 2013, tested only with ubuntu:
https://gist.github.com/pouria-mellati/7771779
I have a new solution which is really easy to do, for a single screenshot. It's using node.js with phantom.js library.
install node.js
run 'npm install -g phantomjs' in console/terminal
save the following as script.js and run it from console 'phantomjs script.js'
var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1500 };
page.open("http://www.theWebYouWantToRender");
page.onLoadFinished = function(status) {
page.evaluate(function() {
document.body.style.background = 'transparent';
});
page.render('render.png');
phantom.exit();
};
profit? :) enjoy