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.
Related
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.
I've a table containing one row of radio options and another with two paragraphs out of which only one will be displayed and another hidden based on value selected by user in radio options.
The issue is, those two paragraphs are of different content length making one paragraph consuming more space in table. When user selects the option to display bigger paragraph, the table expands automatically to fit bigger content. But again later if user selects a radio option to display small paragraph, it does not shrink it back which should shrink to fit a small paragraph.
Is there any to handle it in CSS?
You could try add this css as below, if not work, could you please paste your codes here for further investigation? hope this helps.
table-layout:fixed;
I would like to achieve effect visible on the screenshot below that is content of the table cell (that blue cell with Michal Aniol...) should be fully visible but cell's width should stay the same.
How do I do that?
I am open for solutions requiring heavy use of javascript as the rest of the application and also table itself will be generated by dojo.
Having colspan > 1 is not an option because it will not work in other cases. I really want to use just single cells as this will help me with other functionality.
Screenshot http://uppix.net/4/d/9/8cfc6aba556405f910871598afa10.png
Markup and css: http://jsfiddle.net/sGkpq/
style.less http://pastebin.com/waXWDf4J
To make my question self-contained in case links die as #Sparky672 pointed:
I wanted to have table cells of same size and if content in a cell is bigger than the cell itself then content should still display and flow to the next cell. So text in a cell if longer than the cell then it should overflow to the next cell overlaying its content.
Just remove overflow-x: hidden from table.reservation-table td. The text will continue past the end of the cell.
Of course, if you want it to work when the name is longer than the cells behind it (eg, Michal only booked one day) that would be more complicated, but probably doable.
I currently have a table that has a few hidden text boxes... The text boxes become visible when certain actions are performed.
The table though changes size according to when the textboxes are visible or now. Ex. When the textboxes are visible the table grows, and vice versa.
I would like to keep the table size at its max size ( size when the text boxes are visible) even when they are not.
Is this possible?
Thanks!
One way is to have something inside the td tags, like a This will cause the td to render.
Another way is to set the controls to "hidden" instead of "none". Hidden allows the controls to still be rendered to html, just not displayed. None will cause the controls to not be rendered at all.
I don't know if the "hidden" setting will still grab the space you want. You might still need the non-breaking space control.
I am using Telerik's Radgrid for a website. Often the grid columns exceed the available width, and extend outside the main content area (fixed width).
So what are my options for presenting very wide grids. horizontal scroll bars just look ugly on my site
Your choices are a combination of the following:
Smaller fonts
Consolidate some cells to have more than one row (e.g. if you have a "start date" and "end date" put the start date on top and the end date on the bottom.
Widen the window
Make some cells appear conditionally (based on user-defined filters). Maybe the most frequently used cells appear normally and a checkbox unhides the less frequently used cells or groups of cells.
Allow horizontal scrolling
Make the window a fluid width
Popup data in a floating <div> via javascript instead of putting it in a column
Am I missing anything?
i am using telerik controls too, one thing i have learned after a lot of work with them is their CSS is usually good, but i also face your problem, and here is my advise.
what Keltex said.
always add a custom class to your Rad Grid where you do fix those nasty stuff.
don't use fixed width for Grid, instead use it on columns and make the grid Fluid, so does the page.
hope this helps.
I agree with devmania and making the grid fluid, I had a similar problem recently. So I made a few of my columns nowrap and left the rest to wrap. It doesn't look great on smaller screens but it's still usable because I've stopped things like date+time columns wrapping. However, once you start using it on a wider screen it looks great.
It all depends on how much of a scrollbar you have. Is it possible to strip out some of the columns and have that information in a popup/flyout somewhere?
Another option is to make which columns are shown user configurable, but you're not really addressing the problem, just making it the responsibility of the user to make it look nice.
If you can't get rid of the horizontal scrollbar you should at least try to put the more important columns first so that your users don't have to scroll to the right very often.