In GWT, how do you set the position of an Image object after it was added to a Panel? There does not seem to be a method to set the Image top and left positions. Do we have to remove the image from the Panel and add it again using the desired left and top values? What is the best approach?
If you set absolute positions, you can
int top = myPanel.getAbsoluteTop();
int left = myPanel.getAbsoluteLeft();
myImage.getElement().getStyle().setTop(top + 100, Unit.PX);
myImage.getElement().getStyle().setLeft(left + 100, Unit.PX);
Alternatively, you can set "position: relative" style on your image. Then you can set "top" and "left" on an image, and it would position itself relative to its parent element.
From the way your questions is asked, I assume that you are trying to use GWT as you would use Swing or SWT from Java. This is not the way GWT is ment to used and leads to very bad code and very bad projects most of the time.
GWT is not about hiding the browser. So if you want to change the postion of an element you would do that mostly with CSS.
Simply add two css classes to your project
.before{
position: relative;
top: 0px;
left: 0px;
}
.after{
position: relative;
top: 100px;
left: 100px;
}
at first give your image the first class:
image.addStyleName("before");
and later:
image.addStyleName("after");
If you really need to make this dynamically (some calculated size) you can just set the style property of the element:
image.getElement().getStyle().setLeft(value, Unit.PX);
image.getElement().getStyle().setTop(value, Unit.PX);
What I did was simply:
absolutePanel.setWidgetPosition(myImage, newXvalue, newYvalue);
Assuming that 'myImage' was a child of absolutePanel.
Related
My first question ever - so apologies if I am not specific enough.
How do I change the color and width of material drawer component in angular-dart in css? I have tried it several ways in the CSS, including as below:
::ng-deep material-drawer {
color: #9437FF;
width: 200px;
}
.material-drawer {
color: #9437FF;
width: 200px;
}
FYI, the following worked with the material-header, which is inside a header tag:
::ng-deep header.material-header.material-header {
background-color: white;
color: #9437FF;
}
My material-drawer is not in a div or anything, just directly an HTML element on its own.
Any pointers are appreciated!
Setting the width of the drawer is a bit complicated. It involves setting a good amount of values as such it is best to use the mixin. You can see an example here
As for the color that is a little bit harder. What color are you trying to change? The background color?
For the background color you can set the background-color on the drawer. The problem is going to be that the content itself is going to override that color. In this case the material-list has it's own white color associated with it. Removing that color you could have problems with the divider colors.
Is it required to use bootbox.alert("message",function(){example.show("another message")};or bootbox.prompt/confirm to use show? Also is there a way to change the position of where show displays? By default it displays close to the bottom right.
If I'm correct, show is just to get the Example object to show itself (jquery show ). If that is the case, no you do not need to use the bootbox methods to use show as it is a method found in jquery. As to whether the position the Example object is displayed, it is definitely possible. I'm not sure but one way could be to write custom css. When I check the style for the 'show', this is what came up:
.bb-alert {
position: fixed;
bottom: 25%;
right: 0;
margin-bottom: 0;
font-size: 1.2em;
padding: 1em 1.3em;
z-index: 2000;
}
You could change the position of the Example object by changing the 'bottom' or the 'right' elements in the css.
I have a simple problem, but I may be asking for the impossible.
I want to style my html form elements as parallelograms without skewing the contained text. I would normally do this by applying the transform to a parent div and applying the reverse transform to the content:
http://jsfiddle.net/ExUs9/3/
form {
background:#62CAD9;
padding:10px;
}
div {
background: white;
height: 30px;
margin: 10px;
width:300px;
transform:skewX(30deg);
-ms-transform:skewX(30deg);
-webkit-transform:skewX(30deg);
}
input {
background: none;
width: 100%;
height: 100%;
border: none;
transform:skewX(-30deg);
-ms-transform:skewX(-30deg);
-webkit-transform:skewX(-30deg);
}
My problem with the above is the focus property is still applied to the unskewed input box and displays as rectangular. The focus effect is only skewed if the input box itself is skewed:
http://jsfiddle.net/kdqKX/
form {
background:#62CAD9;
}
input {
margin: 20px;
background: white;
width:300px;
border: none;
height: 30px;
transform:skewX(30deg);
-ms-transform:skewX(30deg);
-webkit-transform:skewX(30deg);
}
The problem here is that the text is skewed.
I know I could just remove the focus outline, but is there any way to either:
Skew the input box--but not the contained text--without skewing via a parent div
Apply the border to the parent div when the child input box is focused
I don't know js or any scripts well, so a script free solution is preferred. I do, though, suspect this is impossible in pure css, so let me know any possible solutions.
Thank you, you brave internet geniuses,
Dalton
The easy solution would be a background image.
CSS gradient can fake this.
background-image:linear-gradient(45deg, #62cad9 0 , #62cad9 2em , transparent 2em ,transparent 230px, #62cad9 230px );
Try it without transform. http://jsfiddle.net/khGDj/
other easy way, would have been width pseudo-element and borders/blue/transparent. input do not take it as far as i know.
I have been using the following css code:
#MainBox
{ width: 488px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px; //this being half the width
}
To ensure that the items on the page are centred. The problem is, when viewing this on an iphone (and i'm assuming similar on other smartphones) the left hand side of the page is chopped off! Does anyone know how I can resolve this issue and bring everything into fit?
Thank you!
You're moving the element to the left by 244px with that CSS, and the iphone screen being so small this is causing it to be cut off. Try this:
#MainBox{
width: 488px;
height: 181px;
margin: 236px auto 0 auto;
}
The technique above to center a div is a little obsolete.
Use margin: auto, width to a fixed value (which you already have), and make the parent position:relative.
I created a group chat for the iPhone and its almost perfect. It uses the complete viewport by position various elements with:
#message-input {
background: white;
clear: both;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
right: 0;
padding-right: 0;
}
which makes it look like this:
But when the keyboard pops everything shifts and a grey area appears below:
The height of that grey area is the height of the statusbar and the height of the Debug Console together (without the Debug Console is just the height of the statusbar).
Why does it insert this grey area and how can I avoid it?
#message-input:focus {
margin-bottom: -XXXpx;
}
Where XXX = height of problem grey area. Could be a quick fix for it...