I feel like a crazy person asking this, but I have a form on my page which "follows" you down the page as you scroll. The code works beautifully, except for one crazy bug; when I open chrome's developer tools and my form has the .fixed class added, the form gets thrown off the page. I have no idea why this is happening, or how to fix it, as I didn't think opening the developer tools would affect the DOM at all. Any idea why this is happening, or how to fix it? Here's the JS/css snippet:
if (!msie6) {
var top = $('.form-frame').offset().top - parseFloat($('.form-frame').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, add the fixed class
$('.form-frame').addClass('fixed');
} else {
// otherwise remove it
$('.form-frame').removeClass('fixed');
}
});
}
The sass is as follows:
.form-container
position: absolute
right: 20px
top: 20px
.form-frame
text-align: center
width: 250px
.form-frame.fixed
position: fixed
top: 20px
Opening the Chrome dev tools, in my experience, can affect things "fixed" to a bottom of a screen. Try popping the dev tools into a separate window and see if it still is a problem.
Related
Hopefully the title makes this fairly self-explanatory.
Just a bit of background, I create and launch an aurelia modal dialog which appears on top of the parent window from where it is launched.
Is there a way to make the background (parent) window appear faded. I have done something similar in .NET environments, and just wanted to know if anything similar is achievable in aurelia?
Some example aurelia-dialog links:
https://www.tutorialspoint.com/aurelia/aurelia_dialog.htm
https://aurelia.io/docs/plugins/dialog#using-the-plugin
The answer to my question turned out to be on one of the aurelia forums:
https://github.com/aurelia/dialog/issues/84#issuecomment-239429527
It's a case up updating your css to include the background / opacity settings as follows:
ai-dialog-overlay.active {
background-color: black;
opacity: .5;
}
Having said this please be aware a breaking change had since been introduced whereby 'ai-dialog' was renamed to 'ux-dialog':
https://discourse.aurelia.io/t/trouble-with-aurelia-dialog-not-displaying-correctly/1382
So the code for your css should now read:
ux-dialog-overlay.active {
opacity: 0.6;
background-color: gray;
}
I found that this was all that was needed to make the background fade on opening the aurelia-based modal dialog, as well as un-fading on closing.
Developing on GTK+3.0 (3.22.30), openbox on X11, Ubuntu 18.04 server.
I've have been struggling to figure out the CSS model to control the appearance of the scrollbar on a GtkTreeView ScrolledWindow. I have had very limited success. The only thing I have been able to control is the color of the slider when clicking/moving on it and the background color of the trough. The other properties don't seem to have any effect. I found that the color property of the trough is not supported and seems to cause a parsing error.
The application uses a touch screen so I need the scroll bar to appear all the time, not just when a cursor-pointer hovers over the control. There is no cursor-pointer in the touch application.
I have tried these CSS definitions below. Some of this is simply experimental trying to get something to work. I've tried moving the width, min-width and the 'has-xx-stepper' but they don't seem to have any effect. I'm still stuck with the same simple default slider but with some basic color control. I can't interpret how the CSS node model for a scrollbar is to be referenced as I can't find an example.
scrollbar {
has-backwards-stepper: true;
has-forward-stepper: true;
has-secondary-backward-stepper: true;
has-secondary-forward-stepper: true;
min-width: 80;
}
trough {
background-color: #00ee00;
}
slider {
color: #00FF00;
slider-width: 80;
min-width: 80;
has-backwards-stepper: true;
has-forward-stepper: true;
}
Using the GTK+ Inspector (which allows some examination of Gtk apps' CSS attributes) I can't find the 'has-backwards-stepper' and other properties as referenced in the GTK3 GtkScrollbar documentation. This is handy place to test the CSS syntax but I can't figure out how to control the appearance as I need.
What is the syntax that I should be using to get the stepper buttons, to fix the width and have it appear at all times? A pointer to the documentation that explains this would be helpful. I've already been through the GTK 3 CSS Overview exhaustively which is no help here.
I was able to determine that the has-xxxx-stepper properties appear to be read only but don't actually connect to anything as I can change.
I was able to get the scrollbar to appear to the right of the scrollwindow with the 'overlay-scrolling' property.
sw = gtk_scrolled_window_new(NULL, NULL);
gtk_container_set_border_width( GTK_CONTAINER(sw), 0 );
gtk_scrolled_window_set_policy( GTK_SCROLLED_WINDOW(sw), TK_POLICY_NEVER, GTK_POLICY_ALWAYS ); //scroll bars
//Set scrollbar to ALWAYS be displayed and not as temporary overlay
g_object_set( sw , "overlay-scrolling", FALSE , NULL);
I was able to further control the width of the scrollbar trough with this:
GtkWidget * ptrVscrollBar = gtk_scrolled_window_get_vscrollbar ( TK_SCROLLED_WINDOW(sw) );
g_object_set( ptrVscrollBar ,
"width-request", 30 ,
"margin-bottom", 30 ,
"margin-top", 30 ,
NULL);
Update: I found the that CSS syntax was a little different for the slider. With some experimentation I was able to override the width and height of the slider component. The px units are required for these property values and without them they are ignored.
slider {
min-width: 28px;
min-height: 80px;
}
I have not figured out how to enable the stepper buttons to appear. Do these now have to be manually / separately created with GTK3? I have some prototype code using the vadjustment object properties of the scroll window but what a pain to hook up for every scroll bar I have.
Can we shift arrow icon to right in sap.m.Panel in SAPUI5, I tried to search it through its documentation but unable to find it. Please suggest if it is possible to do SO by some customization of control.
Not the preferred way upto my knowledge and I don't know any other way to do it.
.sapMPanelWrappingDiv .sapUiIconPointer{
right : 0;
}
Use right : 0!important; if not working with above code.
First things first: I don't think this is a good decision UX-wise...
Anyways you have several choices to achieve this from trivial to complex:
Use CSS to position icon to the right as mentioned by santhosh
Hide the expand icon via CSS (display: none;) and use the headerToolbar aggregation. In there you can do what you want and place a button to the right with a press-listerner expanding/collapsing the panel
Override sap.m.PanelRenderer.renderHeader and adjust the icon placement right in the renderer
Here is my CSS solution (which I would go for):
.sapMPanel.myPanelIconRight .sapMPanelExpandableIcon {
right: 0;
-webkit-transform: translateY(-50%) rotate(180deg);
-ms-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.sapMPanel.myPanelIconRight .sapMPanelWrappingDiv .sapMPanelHdr,
.sapMPanel.myPanelIconRight .sapMPanelWrappingDivTb .sapMIBar.sapMTB {
padding-right: 0;
margin-right: 3rem;
}
Please note the class I myPanelIconRight attached to the sap.m.Panel control to separate our custom styling from the UI5 CSS.
BR
Chris
I'm using Confluence 5.1 and I'd like to hide the sidebar - but only on a few pages. I only found a JQuery based solution which does not seem to work right in all browsers. It seems to hide the sidebar completely regardless of the default settings.
I found a CSS based solution for this after searching around the web for a long time.
Basically, all you need to do is add a CSS macro to the page which shouldn't have a sidebar containing the code below.
CSS Stylesheet macro
#splitter-content {
width: 100% !important;
left: 0px !important;
}
.vsplitbar{
visibility: hidden;
}
This CSS block spans the page content over the whole page width and removes the left margin normally reserved for the sidebar. It also hides the split bar which is normally used to change the sidebar size.
The nice thing is that you don't have to mess with cookies this way or make sure the sidebar is turned back on on the following pages.
There was a Confluence bug filed for this and it was rejected* due to a desire to have a more simplified configuration system. In that bug, a workaround is proposed.
Add this to a <script> stanza at the bottom of the <head> tag in your custom HTML:
AJS.toInit(function(){
if (AJS.$("div.ia-fixed-sidebar").width() > 55){
AJS.Confluence.Sidebar.toggle();
}
});
Since I don't have that level of control, I opted for a Greasemonkey script instead. This only affects me, but it does solve my problem (I just have to make sure I don't take too much advantage of the extra width this affords me). Here is a sample userscript for this, also posted to Github [install]
// ==UserScript==
// #name Confluence - Hide sidebar
// #namespace https://github.com/adamhotep
// #description Collapse the sidebar upon page load
// #include https://confluence.*
// #include http://confluence.*
// #version 1
// #grant none
// #license GPL
// ==/UserScript==
// from https://confluence.atlassian.com/confkb/how-do-i-remove-the-side-bar-in-confluence-5-330796984.html
if (typeof AJS === 'function') {
AJS.toInit(function(){
if (AJS.$("div.ia-fixed-sidebar").width() > 55){
AJS.Confluence.Sidebar.toggle();
}
});
}
This is theme-specific. The above code assumes the default theme and is not guaranteed to work in later versions of Confluence. See the "workaround" link for the code needed for the documentation theme.
* There's also another bug related to a cookie that is supposed to preserve whether or not to show or hide the sidebar. Supposedly, the bug is fixed, but this directly contradicts the first bug linked in this answer, so I can't make sense of it.
I have an HTML page with a fixed-height div which should be scrollable (only vertically). In iOS 5 this can be achieved using:
overflow-y: auto;
-webkit-overflow-scrolling: touch;
The div contains an unordered list with about 10 items.
The scrolling works, but sometimes it scrolls only if I swipe my finger diagonally or even horizontally and not vertically as it should be.
I'm wondering if anyone has encountered this issue. I don't want to think that it is a bug in iOS5, but I can't figure out what I'm doing wrong because most of the time it works fine.
I had exactly the same issue. The problem turned out to be caused by two zero size iframes my site used to track history changes and load scripts. Removing these fixed the issue. I filed a bug with apple, waiting to hear back from them.
Check to see if you have any iframes on your page they could be the cause.
I have found a hacky solution but it needs javascript...
I stumbled upon that problem while loading scrollable nodes via ajax and appending them with js.
I found out that resetting the -webkit-overflow-scrolling property with js saved the day
JS CODE:
var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);
It really sucks that we have to call the setTimeout method but that's the only way I could think of...
EDIT : Watch out for display:none
Webkit overflow scrolling touch CSS bug on iPad
You need to put this css setting in your css file - the one you load using the content_css configuration variable:
body {
-webkit-transform: translate3d(0, 0, 0);
}
The other option is to set the css directly from code on tinymce initialization:
$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));
I had the same problem in iOS 5.1.1 and it turned out to be due to an ::after pseudo-element with position: fixed that was on an element that contained the scrollable list exhibiting the "wrong scroll axis" behavior. Details here.