I am trying to build a table purely in CSS. Have succeded so far, even though I have one issue:
How do I make a cell span two columns?
I made this fiddle, and in the top where the "XXXXXX" with the grey background is, I simply cannot make it span the width of my box. I tried to use column-span, but it did not work, so I guess I have redesign it in another fashion .. just how?
I am using this code, but the content of tabledata_lang stops just where tablecells below stop:
#tabledata_lang {
padding: 6px;
width:100%;
}
See my fiddle here:
http://jsfiddle.net/T7wU2/
(Probably easier to see my issue here...)
Hope someone has some input..
Regards
Regin
I think you are looking for the colspan attribute
<td colspan="2"></td>
This will make a cell span 2 columns
Related
I try to reduce the size of a cell in an sap.ui.table around the input field.
In the screenshot below you see marked in green what I want to reduce.
As you can see I managed to reduce the font size and for "debugging purpose" I changed the background to red.
My Style.css:
.test_maybe_he input {
font-size: 0.75em !important;
background-color: #ff0000 !important;
padding-left: 0px !important;
margin-left: 0px;
}
I tried a minus margin, but it only moves the content of the input field and not the input field itself to the left.
My view itself has the class sapUiSizeCompact, still I think there is too much space around and since I have a lot of columns it does not fit to the screen.
Maybe someone has had the same issue and wanted to make a larger table editable and found a solution to reduce unnecessary space. Maybe as a sidemark, it doesn't need to work on a non desktop screen, too. (I try to move from a webdynpro abap to this sapui5 app.)
I appreciate your tips and hope to learn. Maybe some jQuery is necessary to do it?
Here the Plunker it's a little rough and not tailored to the exact point, but it should bring across the point.
I am not sure the standard CSS classes will help you because the padding is generated on a very low level. sap.ui.table.Column doesn't have the property class or styleClass, so you cannot hook up there. sap.ui.table.Table is too high level. Applying a standard CSS class there will affect the table itself, not its columns and cells.
What you can try is giving your table a custom CSS class.
<t:Table id="table0"
...
class="myVeryCompactTable">
then you can remove the padding in your CSS file
.myVeryCompactTable.myVeryCompactTable .sapUiTableCellInner {
padding: 0;
}
I used myVeryCompactTable twice to increase specificity (so I don't need !important). You can ofc use other ways to increase the specificity.
Result looks like this
I have a split Bootstrap dropdown that I am wrapping in a form and adding to a table heading. The issue is that when you narrow the screen size the dropdown toggle element wraps. At first I assumed it was the form wrap but I think its the table heading.
Here is a http://www.bootply.com/zzRJxiYy80 for an example with live code.
Thanks,
Dan
MINOR UPDATE (More details on comments from answer)
In my case I am using the outline buttons. I have Ransack sort links in each button and filters in the dropdown. The second 'Major Category' one has a slightly wider line than the rest and at this point I am making way too much of a big deal of it. Minor stuff like that drives me nuts but I need to let it go :)
This one is at -0.45em
I played with this and settled on -0.37em
I would suggest overriding Bootstrap's use of float:left for keeping these .btn elements on the same line, and instead use display:inline-block for that. Then, you can use white-space:nowrap to prevent them from breaking to multiple lines when space becomes limited.
Most of the styles you need (display:inline-block and white-space:nowrap) are actually already defined in Bootstrap's CSS - you just need a couple more styles to use them to your advantage:
.btn-group.nowrap > .btn{
float:none;
}
.btn-group.nowrap > .btn:not(:first-child){
margin-left: -0.4em; /* To deal with whitespace between inline-block elements */
}
Here's an updated Bootply to demonstrate. Hope this helps! Let me know if you have any questions.
I have a page generated by a database. It creates a DIV for each entry (extremely simplified for sake a question). Each of these DIVs have a set width, and float left.
However, these DIVs don't have a set height, so occasionally the following as depicted in the image happens. Is there a good way to prevent this from happening, and the white space just 'collapsing?'
The link to the prototype site. Here
I think this article would help you:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Depending on what you have control over, you could always add clear: left; to every other element in your 2-column scenario.
Though, I beleive that the second "The Postal Shoppe" would actually be on the left, and the Brynwood Pak N Ship would be in the right column.
The problem isn't so much that "Brynwood Pak N Ship" isn't collapsing the white-space, it's that the second "The Postal Shoppe" is getting hung up trying to move all the way to the left column by the bottom right corner of the "Express Pack & Mail Center."
Setting clear: left will ensure those entries always move down far enough to "suck up" to the left edge of their parent container. But you will still see some un-evenness using that attribute; the "Brynwood Pak N Ship" will line it's top up with the newly-cleared "Postal Shoppe" showing a tiny gap at the top. Still probably preferable to what's going on currently.
You can add a clear: left attribute to every other div. Alternately, you could try using display: inline-block instead of floating left, but it's not as widely supported (I think it breaks in IE 6 or older), so you'd have to see what hacks are out there to make it work universally.
I suggest giving every box an equal height. This is visually better, and it solves your problem in one go!
I think this is difficult to solve in CSS. I like the suggestions other users have made with 'display:inline-block' and setting the height to be fixed. They both have minor drawbacks, but the situation will be better than it currently is.
If you are going to solve this "properly", we first need to agree what the proper solution is. I think it would be to have two columns, and for each element that has to be added, it is appended to the end of the currently least-full column. This won't necessarily result in elements alternately being placed in column 1 then column 2. Sometimes two (or more) small elements will be placed in column 2 to compensate for a large element in column 1, for example.
I doubt something as complicated as this is possible to define in CSS (but I've been surprised by what can be done before). It could be done using Javascript though. You could have a solution that does a fairly good job if Javascript is disabled using a purely CSS solution, and if Javascript is enabled you could arrange them more elegantly.
I'm not sure it is worth the effort of implementing this though. Some of the existing suggestions seem reasonable compromises, and if it were me, I'd probably go with the inline-block solution, but I thought I'd throw this idea out anyway.
This can be solved now using flex-direction and column-count:
.parent {
column-count: 2;
column-gap: 1.25rem;
}
.child-class {
flex-direction: column;
display: inline-block;
width: 100%;
}
I'm not sure if it's supported in all browsers but it's an easy css solution.
I have a list of items that I am displaying in a floated list, with each item in the list at a fixed width so that there's two per row. What is the best practice to prevent this horrible thing from happening:
alt text http://x01.co.uk/floated_items.gif
Possibilites:
Trim to a specified number of characters before displaying the data. Requires guesswork on how many characters will be "safe".
Overflow: hidden. Hacky.
Remove the background and just have a top border on each item.
Possible but silly:
Have a scrollbar in each item by doing overflow: auto, this will look horrendous.
Add a background image to the container. It's not guaranteed that there's always an equal number of items so this option is out.
Any help on this irritating issue appreciated!
Are you using a fixed font size, i.e. specified in px? If not you also need to consider the various text size options of each browser which is probably going to make the concept of trimming the string redundant. If it is fixed then perhaps seeing how many Ws you can fit in and restricting your text to that -3 and appending an ellipsis, not sure what this list is for so that's one approach.
Personally I'd probably use overflow:hidden as that covers all eventualities and ensures that it'll always keep your layout consistent.
I guess the last option would be to keep a tight control over what can be added to the list and prevent the problem occuring in the first place. Prevention better than cure as they say, although probably unhelpfully.
There are scripts that help with this by comparing the li in blocks of two and making them both equal to the tallest.
Usually, rather than thinking what's best from a css point of view though, you should consider what presentation you want, then get the css/JavaScript to get you to your desired effect.
If this is something that you're just wanting out of the way, consider using a gradient background image that highlights the top of the li and suggests the block without actually filling it in.
Adding link to a jQuery solution: Equalize
One solution would be to have a alpha-based PNG that would slowly fade the text to the backgroundcolor of your container, on the last 10px or so. That would look good if some text are considerebly shorter than the long ones, however in the case where the text would be equal to the container it could look kinda silly.
Of course, in combination with display: hidden and white-space: no-wrap
From an accessibility point of view it's not a good idea to simply hide the title, since that could hide content on people who increase font sizes due to bad eyesight. Your design should be able to float when hit by bad resolutions or similar obstructions, even if it floats into something less pleasing to the eye.
Now if I understand your issue with the background image correctly, I believe your problem could be solved using the techniques describes in the ALA article on sliding doors, where the background image expands with the content.
Here's some controversy for you.. use a table?
Sounds like you have a grid of data to me, would a table answer this problem for you?
It also raises the question, do you actually want the items to be the same height, or just have the same amount of black background behind them? You could apply the black to the row's background, then create the centre white separator with borders and margins.
You could try using:
ul li{
display:block;
float:left;
width:6em;
height:4em;
background-color:black;
color:white;
margin-right:1em;
}
ul{
height:100%;
overflow:hidden;
}
div{
height:3em;
overflow:hidden;
background-color:blue;
}
Don't know about cross browser consistensy though.
EDIT: This is the html I'm assuming:
<div>
<ul>
<li>asdf
<li>asdf trey tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>
I need to layout a html datatable with CSS.
The actual content of the table can differ, but there is always one main column and 2 or more other columns. I'd like to make the main column take up as MUCH width as possible, regardless of its contents, while the other columns take up as little width as possible. I can't specify exact widths for any of the columns because their contents can change.
How can I do this using a simple semantically valid html table and css only?
For example:
| Main column | Col 2 | Column 3 |
<------------------ fixed width in px ------------------->
<------- as wide as possible --------->
Thin as possible depending on contents: <-----> <-------->
Similar to Alexk's solution, but possibly a little easier to implement depending on your situation:
<table>
<tr>
<td>foo</td>
<td class="importantColumn">bar</td>
<td>woo</td>
<td>pah</td>
</tr>
</table>
.importantColumn{
width: 100%;
}
You might also want to apply white-space:nowrap to the cells if you want to avoid wrapping.
I'm far from being a CSS expert but this works for me (in IE, FF, Safari and Chrome):
td.zero_width {
width: 1%;
}
Then in your HTML:
<td class="zero_width">...</td>
I've not had success with width: 100%; as it seems that without a container div that has a fixed width this will not get the intended results. Instead I use something like the following and it seems to give me my best results.
.column-fill { min-width: 325px; }
This way it can get larger if it needs to, and it seems that the browser will give all the extra space to whichever column is set this way. Not sure if it works for everyone but did for me in chrome (haven't tried others)... worth a shot.