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.
Related
I'm using jQuery UI Autocomplete 1.12.1 for several dropdowns, with some having a lot of options. In order to accommodate scrolling, we added the following into our stylesheet:
.ui-autocomplete {
height: auto;
max-height: 180px;
overflow-x: hidden;
z-index: 1002;
}
What's happening now is that when you mouseover the last option in shorter lists, it triggers the vertical scrollbar as in the images below:
My suspicion is that the element height/width that is calculated by the library is missing 2 pixels somewhere, perhaps from the border? Any idea on how I can solve this issue?
To get around the problem, we used two separate css classes - one for the case of a dropdown that needed a scrollbar and one for a dropdown known to have only a few options.
I'm trying to achieve a combination of three goals...
Determine if I should use <code><pre>...</pre></code> or <pre><code>...</code></pre>?
Make code not wrap, not create horizontal scrollbars and not overflow any parent element.
Ensure that when a visitor copies code that the white-space is maintained when they paste it in to any (competent) editor.
So far I've had the most luck with white-space: pre-wrap; however I do not want the text to wrap. If they're interested enough they'll copy-paste it for themselves. While I do not want it to wrap I also do not want it to make the element overflow outside of any parent element and I don't want the text to appear outside of it's direct parent element.
I'd be okay with a horizontal scrollbar for the code itself (pre or code element, whichever) though I'd generally prefer not to.
Just in case it's relevant I don't use any CSS frameworks or the likes, I only do a basic reset...
* {border: 0px; margin: 0px; outline: none; padding: 0px; }
I test in Firefox, then Chrome, then (actual) Opera and then maybe IE if I have sanity to spare. Thoughts please?
On number 2 and 3: Hopefully I haven't misunderstood your question--I got what I understood your goal to be working easily by by adding a fixed width and overflow:hidden to the css class.
On 1: it's working with <pre (outer)><code (inner)> so... hey.
http://jsfiddle.net/A2zhH/2/
FYI, border: gray; isn't doing anything. You need to use the format border:1px gray solid;
Goal 1 is simple: code inside pre is valid, pre inside code is not. On the other hand, pre is what matters here. You can use code inside it as a matter of principle if the content is computer code.
Goal 2 is self-contradictory as such, unless you are referring to an idea of reducing font size so that everything fits. More realistically, with regard to the statement that it is okay to have a horizontal scroll bar for the code block, use just
pre { width: 100%; overflow: auto }
This causes a horizontal scroll bar to appear for the block, instead of overflowing the content.
Goal 3 is achieved when you use normal spaces. What is copied contains spaces, and what happens to them after paste depends on the software.
I got it working to an accuracy of about 99.8% of the time using the following...
XHTML
<pre><code>/* Code here. */</code></pre>
CSS
pre {white-space: pre; width: 75vmax;}
I want to show some information together inside an article tag. After searching and seeing quite a handful of examples, I decided to show the information in inlined list items. Here is how I am going to do that. Just look at number 1 and 2. My end result is preferably number 1. I have displayed number 2 just to see how much space other elements like <p> </p> takes.
This is the css code. Here is the html code that uses this css. The list items are taking more spaces and i want the box to remain in the size like number 2. So I think it will be better if the extra yellow space could be minimized.
I have tried using separate divs for the 3 list items. That didn't help. I am new in using CSS. Any idea how I can save the spaces and make it look good enough?
Update: After adding
ul {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}
Currently it looks like this:
Improved significantly. Any idea how to minimize spaces on the left?
The spacing is due to the default top and bottom margins of ul elements, of 16px.
Update: Final Solution
ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
I would set these to 0 initially to prove that this is the issue, then increase them to something reasonable.
The font-size is slightly bigger (for the li's) as well.
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've been trying to develop a way to make rows of an ASP.NET GridView (or table in general) clickable, whilst still maintaining all the usual actions you'd associate with links - correct right-click context menu, middle-clickability to open in a new tab, etc.
My solution uses jQuery to find <a> tags within each row and expand that <a> tag to the size of the row, thus making it appear that the row is clickable. It all works fine in Firefox and Chrome, but IE gives priority to the the text in the table rather than the <a> tag, so you get a text selector cursor and can't click the link when you hover over the text. This simple example shows what i mean:
<style type="text/css">
.link {position: absolute; z-index: 100; top: 200px; border: 1px solid pink; width: 150px; height: 150px;}
.content {position: absolute; z-index: 0; top: 200px; border: 1px solid red; width: 150px; height: 150px;}
</style>
link here
<div class="content">
You can't click the link when you hover over this text in IE
</div>
This could be by design for accessibility, but if that was the case I'd expect other browsers to follow suit. Can anyone offer any suggestions as to how to avoid the issue?
Have you tried setting the padding of the a to fill the table row?
The tricky part with that is you'd have to do the math so that it didn't exceed the row. So something like:
$("a").css("padding-top", function() {
$(this).closest("tr").height - $(this).height;
});
and so forth, based on the position of the a to the table row.
My thinking is that maybe IE sees overlapping elements (as in positioned on top of one another) as a possible conflict and thus makes a decision to try to accommodate both ("well, the link is yay big, but the text outside of it really isn't a link, so let's treat it like normal text") etc, but that elements that overlap purely for style (which I think padding is considered) would not raise any alarms because, hey, it's just a visual thing!
Just thinking out loud, let me know if it works out.
Probably one of the issues where IE creates a new z-index stacking context where it shouldn't. Either you've got a positioned parent without a z-index (known IE bug), or maybe IE just does that for table cells anyway, since that introduces a new offsetParent.
The normal approach would be to put a link in every cell (containing only a nbsp if it's empty) and use ‘display: block’ to make the link fill the width of the cell.
why not just make the <a> display:block and add the other div inside of it?
Alternative approach: instead of making the link the size of the row, why not make the entire row clickable?
$('tr').click(function(){
$(this).find('a.link').click();
});
You may want to use the css cursor property to make the row appear clickable as well.
The text wont show-through if the element has a background-color or -image set.
try...
$("a", this).css("background-image", "url(/images/spacer.gif)");