So, I have a table with rows where the row height is way bigger than it needs to be. In every browser but Edge, I can fix the problem with display:contents, but in Microsoft Edge, which doesn't support this feature at this time, I have to find an alternative. Can someone please point me in the right direction?
Try adding the following code to your CSS after [your element] that is using display: contents;
`#supports not (display: contents) { /* workaround because Edge doesn't support display: contents; */
a.remove {
display: inline;
}
}`
Replace a.remove with your element name.
This feature is not yet implemented by edge browser and IE.
Basically there are two ways the break the flex-row
1)Page-break(Works only in Mozilla)
2) display: contents;(Works only in Mozilla,Chrome).
So if know number of rows and have repeated instances to break could use display:block and inline to get the required result.
But in dynamically repeating rows and number of tiles available its not possible to break the flex box.
Kindly report Edge browser to implement display: contents.
https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/10938981-implement-the-box-generation-keywords-from-css-dis
which is very important feature and missed out.
I try to check your code with Edge and check the result.
I made change in line below and set 'height: 30 px' instead of 300 px.
<tbody data-link="row" class="rowlink" style="overflow-y: auto; overflow-x: hidden; height: 30px; display: contents;">
Now it is displaying the rows properly in all major browsers including Edge.
Below is the testing result with Edge.
Click here to see the image
I think this can be the easiest alternative to display the output properly in Edge.
Regards
Deepak
Related
I'm working on a page with a pretty simple layout - basically a data table, but using grid layout so that the columns will adjust nicely depending on content size. I want to make the rows sortable (using jQuery), so I need to find a way to wrap all the cells of a same row in a container.
display: subgrid;
I've tried using subgrid but it seems it's not much supported at the moment.. Obviously, just nesting a grid doesn't work as it won't sync the column sizes between different grids..
Any idea on how to achieve that?
Here is my pen so far: https://codepen.io/anon/pen/PEjqgx
Depending on the context, display: contents may be a viable workaround for display: subgrid.
From caniuse: (bold mine)
display: contents causes an element's children to appear as if they
were direct children of the element's parent, ignoring the element
itself. This can be useful when a wrapper element should be ignored
when using CSS grid or similar layout techniques.
The big win here is that we can keep our current markup - which groups together each row of data - while keeping components of each row synced together because they are part of just one CSS grid - the grid container.
Regarding browser support: display: contents is supported by Chrome, Firefox and iOS 11.4+.
So getting back to the OP's sample Codepen, we can make use of display: contents to implement the desired result by:
1) Moving the grid container properties to the globalWrapper div and
#globalWrapper {
display: grid;
grid-template-columns: 1fr 1fr max-content;
grid-gap: 3px;
}
2) setting the rowWrapper divs with display: contents
.rowWrapper {
display: contents;
}
Updated Codepen demo
Using display:contents to simulate css subgrid is a hack: hacks add complexity — making the code harder to maintain and prone to other errors — and sooner or later they will stop working.
Beware of using display:contentsas a substitute for subgrid: there are good reasons why it should be avoided. Instead use either another Grid in the container element or Flex.
[Adendum 11/1/2020] Firefox supports Subgrid since V71, no word yet from the other browsers. There is a good explanations about the feature in codrops, and you can see some examples here. And this is the link to see the current support in all of the browsers in can I use
[Adendum 06/06/2022] Apple announces subgrid support for Safari 16
I have a question on using CSS in order to hide a row in a questionnaire (problem occurs more than 20 times, so unfortunately difficult to just adjust just the structure of the questionnaire):
How can I hide an HTML table row so that it takes up no space (unlike: "visibility:hidden")?
I look for an alternative command to "visibility: collapse" (hide row (unlike: "visibility:hide") but keep impact on layout (keep rowspan + colspan in contrast to "display:none") that works in all browsers including Chrome and IE.
Is there any alternative that would solve my problem?
I have added a link to the page that causes my problem for your reference:
http://ww2.unipark.de/uc/hollnder_Goethe_Universit__t_Fra/4568/ospe.php?SES=ce4b3db51563762d1d5b1c27c3598dbc&syid=243842&sid=243843&act=start&preview_mode=1
(Code: 80a4231323d632d5 if asked: "Bitte geben Sie Ihre gültigen Zugangsdaten ein")
I added the row with the item scales (occuring always on top) always also below the subtitle in order to solve the problem of shifting buttons for the statements below (currently have the problem of shifting buttons for questions 1 and 2 - problem is fixed for question 3 but I cannot get rid of the additional space below the subtitle).
To solve my problem, I have tried to add the below 3 different codes in a separate CSS file which one can use to adjust the style of the questionnaire:
.nameq_2610826 ul.head.odd.i4 {opacity: 0; position: absolute; z-index: 10; top: 0; left: 0;}
-> FIRST QUESTION: SPACE IS ELIMINATED VIA font-size:0px BUT THIS WAY ALSO THE LAYOUT IS DISTROYED
.nameq_2612760 ul.head.odd.i4 {display: none; border-bottom:none}
-> SECOND QUESTION: SPACE IS ELIMINATED VIA display:none BUT THIS WAY ALSO THE LAYOUT IS DISTROYED
.nameq_2612762 ul.head.odd.i4 {visibility: collapse; border-bottom:none}
-> THIRD QUESTION: LAYOUT OF ITEMS BELOW IS KEPT IN THE RIGHT WAY BUT I CANNOT GET RID OF THE SPACE AS WITH COMMAND Visibility:COLLAPSE IN FIREFOX
An alternative way to solve the problem might be to make sure that the design is not destroyed by the usage of subtitles. In fact, I use the additional row with the item scales just to make sure that the buttons below follow the same layout as above the subtitles.
Any solution to my problem would be super helpful.
One alternative to
visibility: hidden;
is
opacity: 0;
That will make the element completely transparent.
If you then want to move it out of the way so it occupies no space on the page, you might try something like:
position: absolute;
z-index: 12;
top: 0;
left: 0;
Try display: none;
this will render the element with 0 height and width
and also invisible semantically.
Have you tried overflow: hidden along with a height of 0?
I am wondering: You write about a HTML table, but there is no table in your code, it's all uland li elements, and other stuff (input, labels etc.) inside them (?).
So I would recommend to actually use tables, however not with <table>, <tr>and <td> tags, but with <div> tags instead, which get their table styling trough CSS, like display: table, display: table-row and display: table-cell. These are much more flexible concerning styling (CSS) and also responsivity (although I don't know if you are after that).
It's quite a bit of work to rebuild the whole page like that, but I think it could help you.
I've stumbled upon an interesting problem while playing with my website.
So I've got a containing column with a fixed width. In this I have a number (two for now, don't know whether it'll matter) of images in one row. The images' size and aspect ratio are undetermined and not equal to each other. Now, I'm looking to resize them, so that their height is equal, and their combined width is equal to that of the parent container, while keeping their aspect ratio. And also resize the container height accordingly, for that matter.
Hope I made myself clear.
I'm sure it's possible with JavaScript or similar, but I'm mainly interested in if there's a solution using CSS.
Thanks
I think that's impossible, and even if it were possible, it would be the darkest css hack i've ever seen (besides it would imply using not-very-compatible CSS). It's way easier and recommendable doing that with Javascript. (EDIT: for a jQuery solution see this: http://jsfiddle.net/martinschaer/aJtdb/)
But, for fun I did this: http://jsfiddle.net/martinschaer/cGZrF/
It's the closest you can do with CSS3 for what you need. There's a small gap that fills empty vertical space, but all the images are resized with CSS to fit in the container.
.container{
width: 600px;
margin: 10px;
background-color: #000;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
.imgwrapper {
box-flex: 1;
}
img{
max-width: 100%;
height: auto;
display:block;
}
See the jsfiddle (http://jsfiddle.net/martinschaer/cGZrF/) for the full code compatible with mozila and webkit.
EDIT: for a jQuery solution see this: http://jsfiddle.net/martinschaer/aJtdb/
I'm not too experienced with JavaScript yet, but I have one addition to make for any late comers (like myself)…
I noticed that using the provided JSFiddle in Martin's answer on multiple rows compresses the images so I'd like to add that this:
var rows = 0; // set row count for multiple 'imageWrapper' divs
$('.imageWrapper').each(function(){
rows +=1;
});
and then use rows like this:
$('.imageWrapper img').each(function(){
this.width = $(this).data('width') * (container_width / container_width_temp) * rows - 8;
});
the - 8 is because I found that the last image in the row tends to overflow the container and get pushed into a row by itself.
I'm still looking for the perfect answer to this question myself, but this got me a little closer.
when inspecting elecment, I noticed the following empty span
<span class="x-tree-node-indent"></span>
in order to not having it occupy any space, I set the following style
span.x-tree-node-indent
{
left:0px;
width:0px;
height:0px;
margin:0px;
padding:0px;
}
In Chrome, I got what I wanted even without the addional styles. But in IE, I still can see a block of space over there. Any reasons? and how to fix that?
I've experienced what you're describing in IE6, 7 & 8.
You have to set the line-height to zero as well. This usually works for inline elements.
Have you tried display:none?
span.x-tree-node-indent {
display: none;
}
That should work the same everywhere but I can't check IE right now, display:none:
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.
Please note that a display of 'none' does not create an invisible box; it creates no box at all. [...]
Emphasis mine.
Here's a quick example if you want to check for yourself: http://jsfiddle.net/ambiguous/ZrzWz/
As noted, display: none will cause the item to take itself entirely out of the the layout. visibility: hidden will not; that is, if you had a 20px by 20px block, that block of space would continue to occupy the space even if it is hidden.
You can also set the display to block, border to none and whitespace
A few other items would be helpful to know - in order for anyone to answer this question with more than the display: none (which will work if all you are wanting to do is have it taken out of the space).
What version of IE are you referencing? In no way are the all the same.
What is the purpose of the span, if in fact you do not want it to be visible?
What doctype is your HTML? Depending, for IE there could be quirks mode involved, you may have the option of using an IE specific meta tag, telling it to render in IE7 mode etc.
For number two, if you are simply wanting to have have an indent as the name implies, then you can use the CSS text-indent: 10px (or whatever). If you have other reasons for it, there are options such as setting margins, padding on the containing area. In other words, semantically, why is this span there when there is no visibility and so on? Which then leads to have you tried other elements etc.
I can't reproduce it here. Here is my code:
span.x-tree-node-indent
{
left: 0px;
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
}
<BODY>
<P>left<SPAN class="x-tree-node-indent"></SPAN>right</P>
</BODY>
I see the one word "leftright" without any space inbetween in my IE9.
Depending upon what kind of behavior you want to achieve you may use the attributes display:none and visibility:hidden.
I am trying to make a h2 header for sidebar widgets but I want the width of the div class to be whatever width the content becomes. It seems I can't just set a width because those headlines with longer content then shorter content makes it break.
How can I simply make width stretch/change depending on the length of content there is? Any help would be greatly appreciated.
As far as I know, display: inline-block is what you probably need. That will make it seem like it's sort of inline but still allow you to use things like margins and such.
If you are coming here, there is high chance width: min-content or width: max-content can fix your problem. This can force an element to use the smallest or largest space the browser could choose…
This is the modern solution. Here is a small tutorial for that.
There is also fit-content, which often works like min-content, but is more flexible. (But also has worse browser support.)
This is a quite new feature and some browsers do not support it yet, but browser support is growing. See the current browser status here.
The easiest is:
width: fit-content;
If display: inline; isn't working, try out display: inline-block;. :)
I faced the same issue and I resolved it by using: max-width: fit-content;
The best way to do this is to set display: inline;. Note, however, that in inline display, you lose access to some layout properties, such as manual height and vertical margins, but this doesn't appear to be a problem for your page.
width: -moz-fit-content;
width: fit-content;