Does anyone know how to:
1) Add a scroll to the popup created by the SuggestBox?
2) How to customize the looks (CSS) of the SuggestBox efficiently?
I want to make above changes without touching the actual implementation as much as possible.
Also this solution should support (IE7-IE8, FF, Chrome).
Thanks.
Use Firebug addon for Firefox (or IE/Chrome debugger) to inspect the element you need to modify its style and see if GWT has assigned it a style class name [or read its JavaDoc]. Here in you case its gwt-SuggestBoxPopup for outer element and lots of other style class names for inner elements like suggestPopupMiddle, suggestPopupMiddleCenterInner and suggestPopupContent. Use this class names to modify components style.
To add vertical (horizontal) scroll you need to specify height (width) or max-height and use overflow-y: scroll; (overflow-x: scroll;) or overflow: scroll;
Use auto instead of scroll to hide the scollbar when not necessary.
So your short answer is:
.suggestPopupContent{
height: 100px;
overflow-y: scroll;
}
2)
new SuggestBox().setStyleName(/* your style here */);
Related
Hi I have a responsive website. All the DIVs container depend of their parents and I use a lot width and height 100%.
I see that Arjs is setting fixed dimensions to the body.
I thought that I did something wrong but in the official example is happening the same:
My goal is to have some html elements on front of the camera but the fixed dimensions are affecting my CSS. Is there a way to control this?
I tried this configuration for tests but I did not see any change:
arjs="sourceWidth:480; sourceHeight:480; displayWidth: 480; displayHeight: 480"
You should use the "embedded" component on the tag, it will remove the automatic css fullscreen styles that A-Frame adds by default. You can find more details here in the documentation.
I have fixed it using position "fixed" in all my elements.
Making position "fixed" in all elements is helpful but not enough.
And still making custom elements acting weird or overflow from the screen.
Simply add these may help:
html {
width: 100vw;
height: 100%;
overflow: hidden;
}
My biggest problem here is to express what I want, so please free to alter the formulation / suggestion correct wording for things.
On mobile I wish my page to be only vertically scrollable (page width and view port width are the same. A bug is causing an element adding more width than it should. I have identified the culprit element, when I set this element style to "display:none;" the display is correct (no horizontal scroll), when I don't I get an horizontal scroll.
To make it clear, with ".culpritElement {display: none}":
With culpritElement visible:
culpritElement is generated with some inline style by a third party library that I don't want to tweak. Is there a CSS directive to set to make the element visible but out of the positioning flow of the others (and page size computing).
You could set .culpritElement { max-width: 100vw; overflow-x: hidden; }
Or you could apply the above css style to its parent element
My problem is when popover comes out it always stay inside of scroll. So that when I need to see popover content I need to scroll down then I can see it. I use z index. But I can not show the popover out side of scroll. I am using angular popover.
If I use position fixed instead of absolute it always open aspect of window and I don't want it.
This is an aspect of how CSS works. You are using incompatible CSS techniques. A child element (popover) that is absolutely positioned cannot be rendered outside a parent element boundary with overflow restrictions (hidden or scroll). The overflow property tells the browser to enforce rendering restrictions on all child elements except ones with "fixed" position.
If you show your code, we can probably help you achieve your goal with some modifications.
Edit
With the example provided, all that needs to be done is to add a CSS rule to the .sectionone element for position: static
.sectionOne {
position: static; // solution
overflow-x: scroll; // in example provided
}
.table {
width:1000px; // in example provided
}
How can I prevent the body of the page being "pushed" to the left when a scrollbar appears due to ajax content?
I can of course set overflow:scroll to the body, but it wouldn't look nice.
I am using bootstrap, but I guess it is a general question.
overflow: overlay
Building on avrahamcool's answer, you can use the property overflow: overlay.
Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.
Source: MDN
This is great for when you need horizontally-scrolling content and don't want it to change size when scrollbars appear on hover.
Caveat: it is deprecated. Support is pretty much limited to Chromium, but that might go away in the future. See https://caniuse.com/css-overflow-overlay.
However, you can do a fallback of auto:
.container:hover {
overflow: auto; /* fallback */
overflow: overlay;
}
Demo: jsfiddle.net/NKJRZ/385/
Can I Use also has an interesting note:
This value is deprecated and related functionality being standardized as the scrollbar-gutter property.
However, you should check their link because browser support for this experimental feature is no better than overflow: overlay as of November 2021.
You can create a container that have a fixed width, and give the content the same width (same static width - not 100%).
that way, when the content overflows the parent, the scroll will not push the content but will flow above it.
using that, you can apply a cool way to scroll without pushing anything. by showing the scroll only when you hover the container.
Check out this simple Demo
EDIT:
Here I show the difference between setting static width, and %.
Well, the scrollbar will always push your content aside, there is really nothing you can do about that. What you can do is to always show to scrollbar for example:
html,body {
height:101%;
}
or
html {
overflow-y: scroll;
}
The best way to do this is assign value 'overlay' to overflow property. This works fine.
overflow-y: overlay;
In my case, I was getting an annoying pop event on my navbar whenever the scrollbar appears, but applying position fixed on my nav solved it for me.
I've embedded a Facebook Comment box into my site (http://ponycountdown.com), but the div it is contained within doesn't expand to accommodate it. Does anyone know what causes this, and if there is a way around it?
To see the problem in action, click the comments tab on the left of that page.
An additional query - is it possible to reverse the order of comments so that the most recent is on top? I tried adding reverse="true", but it doesn't have any effect.
Change height of the div to min-height in CSS.
In other words, use min-height: 392px instead of height: 392px.
This way it will expand and not be of fixed height as it is now. Hope this helps.
I would suggest to add the following to the slide-out-div class:
overflow-y: auto;
overflow-x: hidden;
With some additional styling this will create a scrollbar when the facebook comments overflow downwards.