I've been tearing my hair out trying to convert a simple table layout to CSS! I'm sure I'm missing something (like a decent knowledge of CSS :)
In this form I have a many-to-many selection facility. The user can type values into a text box, matching values are displayed in the "Available" select box, and buttons exist to move options to/from the "Selected" select box.
The table layout is structured something like this:
<table>
<tr>
<td>Field Label</td>
<td>TEXT BOX<br />"AVAILABLE OPTION" SELECT BOX</td>
<td><-Button<br />Button-></td>
<td>"SELECTED" SELECT BOX</td>
</tr>
</table>
In other words, I want to have 4 columns as follows:
Column1 : Label
Column 2: A text box, with a Select box underneath
Column 3: Buttons for <- and ->
Column 4: a Select box.
I've left floated the label and given it a width, added the text box, a line break, a margin on the select box, but how do I create the next column with the buttons, and the final column with the final select?
Any help would be gratefully received!
Four spans, one after the next, correspond to your original elements. Set each span to have display:inline-block.
I usually handle this with a list node, but pretty much any of the usual node types will do (div, span, etc). The idea is to create a container element for each column and float each left. Add an overflow:hidden to the container element (in this case, the ul) so that browsers will properly calculate the height of the floated elements nested inside. The display:inline on the floated li's fixes an ie6 double margin bug. http://jsfiddle.net/brianflanagan/QU2HB/
Related
I have a few p:autoCompletes in upper part of the page, these need to be wide. In the bottom of the page there is a p:dataTable with editable values. In one column data is edited with p:autoComplete. These need to be narrow and because table can have many rows there can be any number of these. All autocomplete elements have multiple="true" attribute set.
Setting width for CSS class .ui-autocomplete-multiple-container would affect also the autocomplete elements in upper part of the page. How do I set width only for autocomplete elements in data table?
Edit:
Here is a very good summary about the topic but it does not address the case where any amount of autocomplete elements exist in data table and width of only those autocomplete elements must be changed.
div[id^="fRules:dtRules:"][id$=":acServices"] .ui-autocomplete-multiple-container {
width: 11em;
}
In this sample div id above the ul tag is fRules:dtRules:0:acServices on first row. Number will be 1 on second row and so on.
I'm trying to create a BIRT report. The code and query side of it works just fine, but the display is rather wonky.
There's one column whose text contents are rather long, and instead of showing some text and allowing scrolling of the text (which is the behavior I'd like there), it simply shows up as a very vertically long text block; kinda ruins the report a bit. I've also tried setting the width on the column, but no dice there either. Any ideas?
Also, as an aside, how do I get the table's columns to have grid lines? I can do that on the rows, but I can't seem to figure out how to do that for the columns. If anyone has insight into that issue, it'd be appreciated.
Here's a screenshot of the issue
Here's my BIRT report XML, without headers and footers in order reduce characters
I think there is no way to use a scrollable view element inside your report, because the output by the default html-emitter is completely static (I would like to see a different answer if this should be wrong).
To your second Question about how to add a border to a column. Click into the cell of your table, click on "Border" inside the "Properties Editor" and select the borders you like to use. This should be repreated for all cells where you want to use the borders, because this configuration is not applied for a whole column but just for one cell. If you want a border for the whole column you need to setup the border for every cell in the column.
If you have already a data cell inside your table cell, you can use the outline view to select the table cell instead of the data cell:
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 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.