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)");
Related
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'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 got two divs, and ive given the divs backgrounds.
They have exactly the same attributes/css.. But one div is fully clickable (the entire image inside the div area is clickable), the other one is only clickable here and there.. Any ideas?
http://romeon.net/deffrage
Its the two buttons
"Deffrage" "Josef"
its the deffrage button that is not working..
Your .backlava item is obstructing the link below it. You'll need to adjust the dimensions of this item. You might be able to simply remove the explicitly-declared height from the li. A quick test revealed that this fixed the problem, without affecting the layout (you should test further though if you decide to go that route).
In following code, change height from 53 to 3.
<li class="backLava" style="left: 9px; top: 0px; width: 66px; height: 53px; overflow: hidden;"><div class="leftLava"></div><div class="bottomLava"></div><div class="cornerLava"></div></li>
Both link for me. But one of them has the end tags in the wrong order (</span></div></a> where it should have been </a></span></div>).
And this CSS
.robin {position: relative;float: left;margin-right: 100px;}
applies to only one of them.
(And what's the point of the span without either a class or an id? That's a no-op, I'd say).
There seems to be Javascript setting the height of the backlava class to 53px instead of it's default of 16px. Remove whatever Javascript is doing that and you should be good.
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 have a select list, where some clients have entered insanely long options for them, which breaks the design. I'm wondering if there is a way to set a fixed width on the select widget, but still have the drop down menu it produces still be wide enough to display all of the option.
Since you don't specify what browser support you need, this may or may not be a solution. This works in most browsers IE9+
select {
width: 100%;
max-width: 150px;
}
Short and sweet. When expanded, the select will display the whole text (unless it exceeds the viewport!).
See the working example here.
You just need to apply width to your select box either inline or CSS. It will be as wide as you have specified but when clicked, it will show all options with whatever width.
I don't know if you can do it with css (browser independent), but here are 2 other solutions:
1. Instead of displaying "veeeeery looooooooooong teeeeeeeeext" you can display something like "veeeeery loooo...";
2. Build your select using divs and lists so when it is closed to have a specific width and when you press something like an arrow to display full width. (I am not sure you understand what I'm trying to say with this one....).
If the list you have (the entries in <select>) are user entered, and the user can enter, say 500 characters, they they definiteky will.
In this case, I would not go for a <select> list, but a custom list built with, say a <div>.
This is not difficult, all you need is
a div that contains the default
option,
a hidden div with all the options
When the user clicks the default option show the hidden div
On click of the items in the hidden div (that is now visible) make that the selected item in the first div
Perhaps there already jquery plugin for this. but i am not sure whether you are open to jquery, I am not a jquery expert anyway.
I know this comparitively more effort than having a select, but i think it is worth the effort. All the hacks - expand the div onmouseover, onclick etc do not look great, might still break your design, and depending on the amount of data the user can enter, would still not be effective.
In the custom list approach, you can wrap the elements, so that you are in complete control.
Add to the CSS something like this:
select {
border: 1px solid #838383;
border-style: outset;
font-weight: bold;
color: #3F3F3F;
max-width: 150px !important;
overflow: hidden;
}
option {
max-width: 120px !important;
overflow: hidden;
}
This works for me. Note there are no dots in front of the anchors.
Not sure if you're open to using jQuery at all but I usually use this method:
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
Is a bit choppy but looks better than cutting off the content