I am using CSS3 resizable property to resize an HTML Div element.
Here is sample code : http://jsfiddle.net/blunderboy/nMTm9/1/
But, I want to update the value inside input element as soon as width of div changes. How can we achieve this ?
With setInterval, you can do this:
http://jsfiddle.net/nMTm9/3/
It's not perfect but works great.
var input = $('input'), div = $('#resizable');
function calculate(){
input.val(div.width()+"px");
}
setInterval(calculate,500);
No, CSS cannot change the value attribute of an input, or indeed any attribute of any element.
The close change content by style is if you put content in the input field or erased the content input field the label change by css.
enter link description here
Related
Materialize's Datepicke rmakes use of modal (popup).
http://materializecss.com/forms.html#date-picker
Is there a way to use Materialize's Datepicker, without the modal (popup), like embed it to the webpage instead? If possible how can I achieve that?
You can probably do couple of things, such as:
1) Set the container to match the element you want datepicker to be embedded into. Materialize Datepicker has that option. See the docs.
2) Override .modal-overlay class and set its display property to none
3) Override .modal class by setting its position to relative and margin to 0
4) Override .datepicker class by setting visibility to hidden and position to fixed in order to hide the input element
The rest is up to you. But it's all about playing with CSS
EDIT: Also you will probably need to make sure that Datepicker is always open
Working with GWT v2.5.1, I'm creating a DialogBox and filling it using HTML by calling dialog.setHTML(...) with this:
<h3>could not start.</h3>
<hr>
<p>These preferences must all be set before I can start</p>
I have no custom CSS. What appears on the screen is this:
You'll notice that there are big gaps in the left and right borders. Looking at the CSS for the dialogTopLeft and dialogTopRight classes, they extract the border from images/corner.png and the shown length of the border exactly matches the size of that image. In other words, the dialog is too big.
I tried removing the "no-repeat" directive on the background CSS attribute (using Chrome Inspector) but that repeats the entire border image, including the rounded corner at the top, and so does not appear contiguous.
I can't be the first person who's tried to put more than a single line into a DialogBox...
What's the trick to making the borders "repeat" and fill in the holes?
Wrap the HTML in HTMLPanel befor passing it to the DialogBox
DialogBox dialog = new DialogBox();
HTMLPanel panel = new HTMLPanel("<h3>could not start.</h3><hr><p>These preferences must all be set before I can start</p>");
dialog.add(panel);
dialog.center();
Thanks to #Moh for placing me on the right path.
The proper way to do this is to set only the dialog title using setHTML() and then create the body as a new panel and add it to the dialog.
DialogBox dialog = new DialogBox();
dialog.setHTML("<b>" + title + "</b>");
dialog.add(new HTMLPanel(message));
Adding buttons is left as an exercise for the reader...
GWT Dialoge box already have pre defined CSS.
you have to override or have to set your own style names using set Methods.
like..
dialogBox.setStyleName("yourcss");
Default css names starts with,
.gwt-DialogBox{}
In a chrome extension (so feel free to make Chrome-specific suggestions), I'd like to make a textarea and a button on a single row. The textarea has a defined height (in rows). The button should be the same height as the textarea. Ideally some attribute or setting allows me to manually determine the width of the button versus the width of the textarea. Ideally this is just a css/html solution, not javascript if I can avoid it.
You will need to use flex box with
{ align-items:stretch }
Check this illustration: http://www.w3.org/TR/css3-flexbox/images/flex-align.svg
My splitButton should not have any text on the button. So when I try to achieve this using by providing blank value for the value attribute, the button shrinks to a very small size. I want it to remain the size of the dropdown button which appears beside it. I don't have an actionListener, therefore I need the button to display no text.
Is there no default size set to the button when it contains no text? Or is it possible to apply a style property to it?
Put the value attribute like this:
value=" "
I am drawing an image inside panel and slider field using ExtJS 4. I want to change opacity of image whenever of value of slider field changes.
I am aware that opacity and filter:alpha(opacity=); rule of CSS can be applied to image which will change its opacity.
However I do not know how to apply this css rule to the image. Can anyone please guide me on this?
You can use Ext.dom.Element.setOpacity method:
Ext.fly('image-id').setOpacity(0.5); // this will make img with id 'image-id' become half-transparent
Here is live demo
Update
If you are using Ext.Img component you will have to do something like the following:
imgCmp.getEl().setOpacity(0.5);