I'm developing application with GWT 2 and would like to add float panel that stick to the bottom of the screen (not page, like chat panel in facebook). What is the best way to make that kind of panel?
If I understood you correctly, you should apply the style below to a Panel (any basic Panel should do: FlowPanel, HTMLPanel, etc) and add it to the body (it doesn't have to be <body> but we know that it's always there and won't be removed ;)) via RootPanel.get().add(fixedPanel);
position: absolute; /* Or fixed - depends on what you want */
right: 0; /* The part that puts the Panel in bottom right of the page/client area */
bottom: 0;
This can be done by adding the CSS attribute position: fixed to the div in question.
Read more here: http://www.quirksmode.org/css/position.html
I think you can do this by CSS. All you need is any GWT Panel and then style it using CSS. Check out http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
Related
I'm using jQuery UI Autocomplete 1.12.1 for several dropdowns, with some having a lot of options. In order to accommodate scrolling, we added the following into our stylesheet:
.ui-autocomplete {
height: auto;
max-height: 180px;
overflow-x: hidden;
z-index: 1002;
}
What's happening now is that when you mouseover the last option in shorter lists, it triggers the vertical scrollbar as in the images below:
My suspicion is that the element height/width that is calculated by the library is missing 2 pixels somewhere, perhaps from the border? Any idea on how I can solve this issue?
To get around the problem, we used two separate css classes - one for the case of a dropdown that needed a scrollbar and one for a dropdown known to have only a few options.
The casper theme is great. But I'd like to make a few tweaks.
HTML layout and css trickery is not something I do. So here we go...
I'd like to fix the position of the site header so that scrolling the articles glides neatly over top.
Simply changing the css for position:fixed on the site-header class almost works, in that it stays put. But doing that changes the layout in a rather ugly way. i.e. It moves the site header left and it all the posts on the main page shift up over the top of the title so when you first load the page you can't see it. This is unexpected for someone who's not terribly savvy beyond very basic css.
I just set this up myself. Two small tweaks are needed. On site-header, set a z-index (I picked 1000) and set width: 100%. Then, add an appropriate amount of padding-top to site-main. The best way to add this padding would be JS (dynamically check the outer-height of site-header) but if you are reasonably sure your header won't shift sizes, go ahead and hard-code it.
For v4 of casper, add this to the .gh-head class. You can either modify the theme files or do code injection. The sticky property is supported for 95+% of users. Check here for a comprehensive list. The high z-index takes care of content not going over your header when scrolling.
.gh-head {
position: -webkit-sticky; /* Older Safari browsers */
position: sticky; /* Most other modern browsers including Safari */
top: 0;
z-index: 4000;
}
I am a big fan of adding CSS in a stylesheet for my applications to have the form contents centered in the browser so that no matter what the size of the browser window, the application or page contents will be centered horizontally.
The CSS Code I use to do this is as follows :
.panel
{
width: 300px; /* Can be whatever value you need it to be */
position: relative;
left: 50%;
margin-left: -150px; /* This is half of width */
}
However, when I do this for an application I'm working on in Visual Studio, it moves the contents half off the page in design view. It's like it's applying the left and margin-left CSS attributes, but ignoring the relative attribute. Do you know how to get Visual Studio to treat my CSS the same way a browser would so that I can apply my CSS positioning code and still work on the application. As of right now, I have to comment out CSS above until I am completely done working on the project so I can see the content in design view.
Thanks for any help you can provide.
The like button works fine, the recommendation works fine, but there's an issue: the like button is positioned on the right side of the page (which is intended), but when the button is clicked, it opens a box that exceeds the boundaries of the browser, to the right.
Example (with me in the Santa's hat as a doubtful bonus):
I've tried controlling the position using css, with no success. How can i proceed?
TL;DR
I need that recommendation box on the left, not on the right as it is now.
Thank you!
Your problem is in the css. Try using firebug to inspect the elements, you can change properties live to see which ones are the ones giving you the headache.
(edited)
The sidebar container is position:absolute, and has right:0. There's your problem.
#sidebarSocialetContainer {
right: 0px;
margin-right: 10px;
width: auto;
margin-top: -39px;
position: absolute;
}
So, if you put left:0 instead of right:0 you'll see the bar in the opposite side.
When using the like or send widget on a Fan Page (no mater if you use iframe tag or fbml for it) the overlay for commenting is positioned always to the right. see
http://twitpic.com/4q7ggi for example.
I cant find a way to get the widget to respect the 520px boundary of the facebook tab.
see http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842 for an example.
Anyone an idea how to solve this ?
TIA
Rufinus
Try adding this to your css:
.fb_edge_comment_widget {
margin-left: -350px;
}
This will move comment box to the left, but the little arrow pointing to the button will move too (which you could try to cover with another element). It will only work if you're using XFBML, not an iframe.
Here's an example.
I had to move the little arrow to the bottom, and that's how i did it.
1) Move your popup window to the desired position. Use the !important statement to overwrite default styles.
.fb_edge_comment_widget {
top: -224px !important; left: -246px !important; height: 191px;
background: url(../img/arrow-down.gif) 0 100% no-repeat
}
This style also contains a new arrow image which replaces the bottom line of the popup window. It contains my own new bottom arrow, which is blue (#283E6C) by default and grey inside (#F2F2F2). We can use height to adjust the vertical position and move the background image to the bottom.
The image will look like this:
.
2) Apply overflow: hidden to the span that wraps the iframe, We'll be able to cut off parts of the iframe by applying margin-top in step 3, and replace them with our own.
.fb_edge_comment_widget > span {
height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}
I'm using border-top to create my own upper border, since in step 3 we are cutting of the default border and arrow.
3) Move the iframe up a bit to cut off its upper border and arrow.
.fb_edge_comment_widget > span > iframe {
margin-top: -7px;
}
The result looks like this in my case:
If you're using the XFBML implementation of the Facebook Like button, you can use CSS to re-position the "flyout" menu relative to its original position near the Send button:
The above example using jsFiddle and this CSS:
.fb_edge_comment_widget {
margin-left: -343px;
}
Since the contents of the "flyout" are inside an iframe you won't be able to apply any CSS to it — meaning, moving the triangle indicator to the right side of the "flyout" isn't possible.
Web browsers have tightened security on cross-frame scripting due to spoofing and other hacks, so iframes are treated like separate HTML pages with their own CSS and JavaScript.
For any advanced CSS styling, you would have to inject the Facebook Widget's iframe using DOM Scripting ... and even then it may not work across browsers.
Not a great answer but the only option I have found is to wrap the widget in an absolutely positioned Div to keep it on the left side of the window
To fix it I strongly recommend to put the Facebook widget on the left side of your page. Any other solution could work for a certain period of time, but in the future will fail.
The reason is that Facebook updates its widget frequently.