I have a vertical panel that contains a set of buttons. When clicking on the base button, the panel expands and shows the set of buttons that are part of the vertical panel. Since this base button is towards the bottom of hte UI, I have made changes to the CSS in order to make the expanded buttons appear flowing upwards as opposed to downwards. Nevertheless, it seems as if the page expands downwards in the expanded state, and this leads to an addition of a scroll on the page, which is completely undesirable.
Is there a way to add buttons to a vertical panel that builds up (is inverted) as opposed to building down? I would really prefer not to have to add the buttons in a different order and then play with the CSS again if at all possible. Thank you for your tips.
VerticalPanel is the wrong widget for your layout. You should use a PopupPanel and a very simple CSS. When a user presses a button, you show this PopupPanel by calling .showRelativeTo() method. It will do all the calculations for you, and it will show it downward or upward depending on the browser window size and position of your button.
Within the PopupPanel you add a FlowPanel, and you add your buttons to this FlowPanel. Apply this style to the FlowPanel:
.menu {
width: 100px;
}
.menu input {
float: left;
margin-top: 10px;
width: 100px;
}
It is not easy to just invert the direction as from my understanding you want the button panel to float on top of the existing page. Webpages follows a flow structure and do not get stacked up unless you specify.
You may have to change your entire layout into an absolute panel, or use CSS (as you said you do not want to but this is definitely easier than the former one) so you can place the panel anywhere you want.
CSS:
.button-panel{
clip: rect(auto, auto, auto, auto);
position: absolute;
left: 100px;
top: 319px;
overflow: visible;
}
Java:
YourVerticalPanel.addStyleName("button-panel");
Related
I am using a AutoCompleteTextField from Wicket inside of a modal window. The problem is I have it near the bottom of the window, along with a dropdownChoice.
When I select the dropDownChoice, and if it is near the top, the drop down choice will drop down as normal, but if it is near the bottom of the window it will go up. For the AutoCompleteTextField if it's at the bottom, it will still drop down, and the modal window will become scrollable to view the choice. I do not want this, how can I prevent this?
Still haven't found an answer to this, but for anyone who runs into this issue, the only simple solution I found to solve this is just to set a size limit on the div, and make it scrollable, like so:
div.wicket-aa ul { list-style:none; padding: 2px; margin:0; max-height:55px; overflow-y: auto; }
I have a html panel and i want to add the html panel to browser screen hence i used rootPanel.get().add(htmlPanel);. But their is a extra space between the starting of the screen and the first widget in html panel (As in image). I tried with setting rootPanel.get().setheight("100%") and rootPanel.get().setsize("100%","100%") but it doesn't seem to work please help i want to remove the extra space and so that the widget starts from beginning.
This padding is added by GWT Bootstrap for its NavBar widget. See the note in the javadoc:
NOTE: We assume that most people will use the ResponsiveNavbar, so, we automatically add a padding-top: 50px in body.If you don't want this, you have to put a padding-top: 0px; manually in your document body tag.
See also https://github.com/gwtbootstrap/gwt-bootstrap/issues/120
Is there a way to get horizontal scrolling implemented in a horizontal panel ?
or any other panel can be used to achieve the functionality mentioned below -
The requirement is that i am creating a search bar where search items are being added as and when user inputs them (something similar to this - http://documentcloud.github.com/visualsearch/)
Well i got the functionality working and even the looks are similar but struggling on the horizontal panel. I am using a horizontal panel as a search bar and it has a suggest box embedded in it. so when user inputs data the search items are added to the horizontal panel. but as and when search items are added the horizontal panel grows in size and moves out of the screen and browser's horizontal scroll bar appears. But i wanted a scroll bar on the horizontal panel itself.
Can this be achieved ?
want some ideas ... any help is appreciated.
Thanks.
You may want to use the css overflow-x attribute. If you want it to scroll set the value to scroll or auto. If you need to constraint the size of the div in specific ways you may need to control it progamatically.
I don't see any other solution than place your HorizontalPanel inside a scroll panel.
Then I would add a CSS property to prevent the vertical scrollbar from showing.
Here's an ui.xml excerpt:
<ui:style>
.scrollHorizontal{
overflow-y: hidden !important;
/* !important used to force override the style "overflow:scroll"
of the ScrollPanel */
}
</ui:style>
<g:ScrollPanel addStyleNames="scrollHorizontal">
<g:HorizontalPanel ui:field="resultsPanel" />
</g:ScrollPanel>
You may need to check the client height of your scroll panel so as to adjust the height of the items inside the horizontal panel, depending on your layout.
I need to make a alert box or dialog box when popup it lock the back screen like a Modal type alert box. but this time i need in fbjs. or fbml any one can help me please...
One way to cheat this is to give the div a css attribute of position: absolute and align your div on top of your content, with a z-index of something higher than everything else on your page (typically, people use something like 100). This becomes your modal container, and within it you'll just want to mimmic/copy the styles of a typical FB modal window.
Also, create another div at the top or bottom of your content, and give it css properties of position: absolute; width: 100%; height: 100%; background: #000; opacity: .5; z-index: 50 (make sure z-index is less than your modal container). This is your overlay, which blocks the content of the page from being interacted with until the user does something with your modal.
I would suggest going about the solution this way because like #dragonjet pointed out, FBML is deprecated, and you can't create new FBML applications anymore. Without FBML there is no FBJS.
So, I work on a Facebook FBML App. What I want is simple. Just have a div shows in the center of the page, and scroll with the page. i.e. always in the center.
It would be easy with normal JS. I just use the pageYOffset
However, in Facebook using FBJS, I am not sure what I should use. It doesn't have getPageYOffset().. and I tried getScrollTop().. it doesn't seem the right thing.
So, anyone knows how?
Have you ever seen something like this done on FB before? It sounds to me like FBJS is causing you the problem with its lack of API options.
One way to do it in normal JS is to get the position of the sliders, both Right and bottom, and also the whole screen size, and then determine where the center of the viewable window is based on the full frame size and the slider offsets.
All of those variables should be defined or be retrievable via javascript for you to grab and manipulate, and then it is simply updating the css values on a div to move the window to the correct location. you can then poll the state of the window sliders or monitor their event and retrieve their position as it is updated to recalculate the center of the window.
If FBJS has no facility to determine window size or slider position, then you have a much harder problem on your hands.
Use css
#myDiv {
/* Keep position fixed (scroll invariant) */
position: fixed;
/* Center */
left: 50%;
top: 50%;
/* Set width and margin to account for half of width */
width: 200px;
margin-left: -100px;
/* Set height and margin to account for half of height */
height: 100px;
margin-top: -50px;
}
The first 3 lines would center the upper left corner on the page.
The next 4 lines set the width, and then shift the div back and up so that the center is centered.
More info from w3Schools about position.
How about using Facebook's call myDiv.getAbsoluteTop()? This won't keep the object fixed, but it will at least start at the proper position.
Just one other idea -- you could generate an image, and set the image as the background, which I think you can keep fixed. It depends what you're after exactly though.