In particular I have a GWT project with a
TextArea element which I want to conform to a set width and expand as much as needed to the bottom.
ListBox element which I want to conform to a set width and expand vertically to show the entirety of the displayed list item.
Those are two widgets using replaced elements: <textarea> and <select> respectively.
for the TextArea, there's no way to make it really "resize automatically" other than listening to events and computing the new size (there's actually no need to compute the new size, you can just let the browser do it; see http://phaistonian.pblogs.gr/expanding-textareas-the-easy-and-clean-way.html)
for the ListBox, it's impossible to have the items' text wrap. See Word wrap options in a select list for a similar question in pure JS.
Set the width to whatever number and set height to auto.
Related
I have run into an issue with the paper-dropdown-menu component, where it's expansion height seems to be limited by an enclosing core-collapse on its containing element. Is there a way to prevent this from occurring? (see images demonstrating symptoms below) Another related side effect seems to be that when the number of items in the dropdown creates a dropdown height that would normally expand below the bottom of the containing collapsible element, it causes the CSS top styling of the dropdown to be overridden, nudging the top of the element higher within the collapsible container element itself while it is expanded. Irregardless of its new top alignment, it still doesn't show the entire list of options as the height of the dropdown itself remains the same. Has anyone run into similar issues? I can post a jsbin, but its a bit convoluted due to me using a custom polymer element that consists of the icon, input control, and an optionally displayed/selectable unit of measure. So before doing that I was hoping someone might recognize this issue right away and be able to point me in the right direction. This is using chrome v38 and the latest paper-dropdown-menu and core-collapse components (bower ^0.4.0)
Unexpanded (note the top alignment):
Expanded (there should be 5 options, but they are being cut off by core-collapse and note the altered top alignment as well):
Proper operation (when dropdown height is same or less than containing collapsible element height):
In core-collapse there is new property 'allowOverflow' to allow collapsible element to overflow when it's opened. This should help paper-dropdown-menu to expand inside core-collapse. The new property is only in core-collapse#master branch and will be available in the next release.
<core-collapse allowOverflow>
<div class="content">
<paper-dropdown-menu>
...
</paper-dropdown-menu>
</div>
</core-collapse>
The new 'layered' attribute of the latest version of paper-dropdown resolves this issue.
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
Is there a way to set a fixed column size in Dojo DataGrid, and not allow it to be resized by the user? Thanks.
The cells defined within the grid's structure support a boolean noresize property. Setting this to true will disable resizing on that particular cell.
You might want to do something about overriding the default CSS though - it appears to use a rather noticeable cursor when hovering over non-resizable cell boundaries.
You can also set a specific width of a column in the structure using the width property on a particular cell.
Example: http://jsfiddle.net/kfranqueiro/qNfC9/
I am working on a flex app that uses XML templates to dynamically create DisplayObjects. These templates define different layouts that can be used for each page of content in the app (ie , 2 columns, 3 columns etc etc). The administrator can select from one of these and populate each area with their content.
The templates add one of 3 types of DisplayObject - HBox, VBox or a third component - LibraryContentContainer (an mxml component that is defined as part of the app) - which is effectively a canvas element with a TextArea inside.
The problem that I am getting is that I need each of these areas to automatically resize to fit the length of the content but don't seem to be able to find an effective way to do so.
In the LibraryContentContainer, when the value of the TextArea is set, I am calling .validateNow() on the LibraryContentContainer. I then set the height property on both the TextArea and LibraryContentContainer to match the textHeight property of the TextArea.
In the following example, this is the LibraryContentContainer, viewer is the TextArea and the value property of the TextArea is bound to this.__Value. v is the variable containing the content for the textarea
this.__Value = v;
this.validateNow();
this.viewer.height = this.viewer.textHeight;
this.height = this.viewer.height;
This works to a degree in that the TextArea grows or shrinks depending on the length of content, but it's still not great - sometimes there are still vertical scrollbars even tho the size of the TextArea has grown.
Anyone got any ideas?
Thanks
Adam
I think the problem lies not with your dynamically added components, but with the component they're being added to. How is the height of this component being determined? If you set verticalScrollPolicy and horizontalScrollPolicy on this container to off, do your scrollbars disappear? If that's the case, then you'll need to look at how this component is sized rather than your hbox, vbox, or whatever it is you're adding.
I am designing a page to Add/Edit users - I used a repeater control and a table to display users. In users view the individual columns of the table row have labels to display a record values and when users click on edit button, the labels are hidden and text boxes are displayed for users to edit values - The problem is - as soon as the text boxes are visible, the table size increases - the row height and cells size becomes large. Is there a way to display the text boxes so that they take the same size as the labels
Dealing with tables, the question is: can your labels span on multiple text rows (ie: can you have long texts)? If yes, you may encounter layout problems any way. If no, a simple approach can be creating a CSS Class:
.CellContent { display:block; width: ...; height: ...; }
with your preferred cell width/height. Just stay a bit "large" with your height.
Assign the class to both your label and textbox, and you should not get width/height changes when switching control (thanks to the display:block property).
Again, if you have long texts, you will still encounter issues, and may want to use multilines. In that case, I would suggest ignoring height problems: just set the width to be consistent, and always show a 3-4 lines textbox for editing. Users will not be bothered to see a row height change, if they are ready to type long texts.
I'd use JS+CSS... You'll have to get your hands dirty for this one though. Visual Studio isn't going to help you much.
Here's how I'd do it:
Get the <td> clientWidth and clientHeight.
Set the <td>'s width and height to those px values (so they're no longer relative)
Swap the text for the input
In your CSS, make sure the input has no padding/margin/border and set width:100%, line-height:1em, and height:1em
When you switch back, make sure you un-set the <td> width and height so they return to automatic values.
You'll need to tweak this all slightly. I'm sure you'll have to play around with the padding on the <td> and perhaps set overflow:hidden but you should be able to do what you want.