CSS setting a table height or width makes some table rows <tr> and table data <td> unclickable or unable to highlight or unresponsive.
<style>
.tbl-content{
position:absolute;
height:; /* if you set a height table data or rows become non-responsive*/
width:; /* if you set a width table data or rows become non-responsive*/
overflow-x:auto;
margin-top: 0px;
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
th:first-child{
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
}
th:last-child{
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
}
tr:hover {
background-color: #464A52;
}
</style>
this answer was gotten from https://blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/#comment-3400
I asked and answered this cause it took me a whole day to solve this issue and the solution was not on StackOverflow yet
CSS pointer-events
The CSS style pointer-events can be set to none so that it will not receive hover/clicks events, instead, the event will occur on anything behind it. However, there is no luck making it work on browsers IE 10 and below. See compatibility table.
CSS pointer-events by caniuse.com
Since the link is just partially covered at the bottom by the div, I decided to give pointer-events: none a try.
.some-horizontal-container {
pointer-events: none;
}
However, all child elements will receive no hover/clicks as well. To fix that, we need to turn pointer-events back specific to these elements.
.some-horizontal-container a.btn{
pointer-events: all;
}
The better way
There was a severe drawback when I disable the pointer events for the widget I am working on especially with touch events. I found a better way where it works for all scenarios.
Instead of disabling and enabling the pointer events, I used the visibility style instead.
visibility:hidden; for the div that overlays the clickable element under it, then visibility: visible; for the child elements of the overlay where it should be clickable.
These child elements do not cover anything under it and they are just small buttons.
That’s it!
Related
I'm trying to make a custom tooltip implementation in CSS, which is working pretty decently, but I'm running into a problem. Currently, hovering over the tooltip still keeps the tooltip opened, even though I'm not hovering over the original element itself.
Of course I've tried something like ::before:hover {display:none;}, but that doesn't work because pseudo-elements don't get pseudo-classes applied to them.
My next thought was to simply make the tooltip not "take up" any space. Using negative margin-bottom allows other stuff to take up space in an element as if the element is not there. However, the :hover pseudo-class apparently still applies then.
Here's a demo of what I'd like to do. I'd like to have the tooltip of the following demo not persist any hovering state. Note that moving the tooltip-text higher above the element is not a working solution, because moving the cursor upwards faster than a snail's pace will cause some pixels to be skipped, which means the tooltip 'catches' the cursor and persists the :hover on the element.
[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]:hover::before {
content: attr(data-tooltip);
position: absolute;
top: -2px;
transform: translateY(-100%);
background: white;
border: 1px solid black;
}
<p>Spacer text</p>
<div data-tooltip="Example tooltip">Hover over me for a tooltip text</div>
As you can see, if you move your cursor over the div, the tooltip will appear, and if you slowly move your cursor up, the tooltip will disappear. If you move your cursor upwards slightly faster, however, it'll skip the 1-pixel gap, and keep the cursor hovering over the div.
Now I'm looking for some styles to apply to [data-tooltip]::before so that the cursor's hover events are not triggered on it (or at least, not at the location you see the tooltip; if I can hide it somewhere at [-1000, -1000] that's fine as well)
So basically, my question is, is it possible to apply css to an element so that :hover does not apply to (part of) an element? I'd love to hear ideas or suggestions.
Not sure if that's what you're looking for, but regarding the first question (red div, blue on hover), you could shorten the divs height and use border-bottom for making up for the lost height:
div {
width: 100px;
height: 50px; /* instead of 100px */
background: red;
margin-bottom: -50px;
position: relative;
z-index: 1;
border-bottom: 50px solid red; /* adds 50px to divs apparent height, but ignored at hover */
}
After looking around the internet for a while I finally found a solution that works flawlessly. I didn't really know about this before, but apparently there's a pointer-events style that does exactly what I want. Its accepted values outside of SVG are auto and none, but luckily the latter prevents all hover-events from triggering on the ::before pseudo-element.
Here's a demo:
[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]:hover::before {
/*** this style prevents persistence of the tooltip when hovering over it ***/
pointer-events: none;
/* the rest is just the styles used in the question */
content: attr(data-tooltip);
position: absolute;
top: 0; /* changed from -2px to 0 so the effect is more clearly shown */
transform: translateY(-100%);
background: white;
border: 1px solid black;
}
<p>Spacer text</p>
<div data-tooltip="Example tooltip">Hover over me for a tooltip text</div>
I've been trying to solve the following problem.
If you run this code you will notice blue and red elements.
How can I hide the 'red element' when there is no text to display (span is empty). And I would like to do the same thing with 'blue element' when there is no text inside it shouldn't be visible.
The reason why is displayed is padding, but I would like to have padding because it looks nice.
I am sure you guys are best of the best and find solution.
Regards!
.myClassDer {
font-size: 34px;
color:white;
background: blue;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie {
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
<span class="myClassDer">here</span>
<span class="myClassDie"></span>
If you don't require support for IE8, you can use pseudo-state :empty (here for more examples ) to reset padding for all instances of .myClassDie without content, using the following code.
.myClassDie:empty
{
padding:0;
}
Updating your working example, it becomes:
.myClassDer
{
font-size: 34px;
color:white;
background: blue;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie
{
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie:empty
{
padding:0;
}
<span class="myClassDer">here</span>
<span class="myClassDie"></span>
<span class="myClassDie">ClassDie but with content</span>
In which I inserted two <span class="myClassDie"> to show you the behaviour with and without content.
Due to effective invisibility of "empty" case, if you want a more compact solution, you can collapse the two separate rules into only one, simply setting:
.myClassDie:not(:empty)
{
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
In this case, only if .myClassDie is not empty, you'll apply all properties.
This is equivalent for this specific case, but if you want to see this DIV also if empty, limiting only to reset padding (for example because it has fixed size or borders), you must use first solution, not the more compact one.
Little precisation about :empty pseudo-class
Previous examples run correctly only if empty elements are effectively empty, this means that this code <span class="myClassDie"></span> is correctly targeted, but this one (that contains a whitespace) <span class="myClassDie"> </span> isn't.
In general, this could be an issue because often code is dynamically generated or otherwise contains white spaces due to code indentation.
In the past, Mozilla introduced its proprietary pseudo-class :-moz-only-whitespace, but no other browser currently supports this yet.
W3 also tried to solve this kind of problems, initially with analogue :blank pseudo-class (again with no browser support) in "Selectors Level 3", but this did not have expected success.
So, since beginning of 2018, W3 modified its definition to represent empty user input, rather than empty elements and contemporarily modified :empty definition to consider also white-spaces, but currently this last feature is not implemented too in different browsers.
Empty pseudo class only checks for empty text
.myClassDie:empty{
padding:0;
}
But for whitespaces use blank pseudo class
.myClassDie:blank{
padding:0;
}
There is a css pseudoclass empty which you could use here:
.myClassDie:empty {
display: none;
}
Your updated JSFiddle
You can do the trick with the CSS3 pesudo-class :empty
span:empty{
padding:0;
}
Note: using above selector you will not have to worry about which span
has value and which one has not. it will reset padding for those span
which are blank (empty).
I guess you could use above piece of code to hide the empty span's padding.
span:empty {
padding: 0;
}
you can you :empty also read the below like.
https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes
.myClassDie:empty {padding:0;}
I have an annoying issue with the html layout of a form. I cannot really change the general setup, since it is part of a huge framework. But I have to "move" a button to a more suitable location. I am close, but not happy with the solution so far. Maybe you can give me some idea in this. Here is a dramatically simplified version to demonstrate my approach:
I have two container divs, top and bottom.
The top container shows a button on the left side. That button is fixed, but can have a different width due to the translation of its label.
The bottom container holds lots of stuff. Amongst that a second button at its top which works fine, but looks wrong. I want to optically move it into the top container, since there is a logical connection to the button in there. Sure, really placing it in there would be the correct solution, but I currently cannot do that. Instead I use a fixed position which works fine, except for the horizontal placement. I have to decide how far pushed from the left to place the button, so that it certainly does not overlap the first button in the container. I obviously have to consider all translations, the result works, but depending on the first buttons label I have an annoying horizontal gap between the two buttons.
I tried to use a pseudo element (::before) on the second button to help with the layout. Since when rendering the view I obviously have the translated label of the first button I can copy that into some property of the second button and use that property in my css to fill a before pseudo element of the second button which has exactly the same length as the first button. That is what is shown in the code example posted below.
What I completely fail to do is to place that pseudo element such that is it left in the top container (so exactly below the first button). The idea is to indirectly place the second button that way. Looks like this is not possible, obviously. But since I am a bloody beginner in markup and styling I thought it might be worth asking here...
Below is some drastically stripped down code to demonstrate my approach.
I create a jsfiddle for you to play around with. Here is the code:
HTML:
<div id="top-container">
<button>multilingual button text</button>
</div>
<div id="bottom-container">
<h2>
Some title opening the bottom container
<span class="into-top-container">
<button id="place-me" reference-text="multilingual button text">button to be placed</button>
</span>
</h2>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</div>
CSS:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 5px;
}
button {
margin: 0;
padding: 5px;
white-space: nowrap;
}
div#top-container {
width: 100%;
border: 1px solid green;
}
div#bottom-container {
width: 100%;
border: 1px solid blue;
}
#place-me {
position: fixed;
top: 0;
left: 400px;
margin: 5px;
background: yellow;
}
#place-me::before {
z-index: 0;
/*visibility: hidden;*/
position: absolute;
content: attr(reference-text);
margin: 0 5px;
padding: 0;
background: gold;
right: 100%;
}
Notes:
that in the above code the second button is placed with left: 400px;. That is more or less what I want to change. But obviously left: 0 is not correct...
the visibility css rule for the pseudo element is currently commented out for demonstration purpose
keep in mind that the second button is *not* contained inside the top container, but actually logically below the title of the bottom container. The goal is to move it optically up into the top container which already is where close to what I want. Except for the horizontal alignment...
Upon request here is a screenshot:
It is taken from the fiddle I posted above. I added the red ellipse which shows what element pair I want to move and the left pointing arrow indicating where I want to move that too. I want to move it exactly that far, that the two tests "multilingual button text" are exactly placed on top of each other, but without specifying an explicit left placement obviously. That is why the pseudo element exists: as a dummy placeholder. I would then hide that pseudo element and have the second button placed exactly right of the first button, regardless of how long the translated text in there is.
So the final result should like like that:
OK, I invested some more time, since this issue popped up again after a regression in our code and I found, as often after allowing some time to pass, a logical and relatively clean solution:
I use the same stripped down code to for demonstration purposes.
The jsfiddle is based on the one provided in the question itself.
HTML: no real change, except for the reference-text having moved from button to container, for the why see below:
CSS:
* {
font-size: 12px;
font-weight: normal;
font-family: Arial;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
span,
div {
margin: 0;
padding: 5px;
}
button {
margin: 0;
padding: 5px;
white-space: nowrap;
}
div#top-container {
width: 100%;
border: 1px solid green;
}
div#bottom-container {
width: 100%;
border: 1px solid blue;
}
span.into-top-container {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
border: 1px solid transparent;
}
span.into-top-container::before {
visibility: hidden;
content: attr(reference-text);
position: relative;
margin-right: 5px;
padding: 5px;
border: 2px solid;
background: gold;
}
#place-me {
background: yellow;
pointer-events: all;
}
The basic change in strategy: it is the container holding the button to be placed that has to be positioned in a fixed manner, not that button itself (so the <span class="into-top-container">)! That allows to use the pseudo before element, now also anchored to that container, not the button, to take the space as required without actually getting part of the button itself.
Since that container is now place over the original multilingual button that one is not clickable any more. That issue is fixed by a css pointer-events set to none for the container and set to all for the placed button again. That makes the container itself simply ignore all events (clicks) and have them passed to the original button beneath.
I had to make sure that the font used inside the pseudo element is style exactly like the original multilingual button. That actually makes sense, since the font styling defines the actual width used by that button, so the actual width used by the pseudo element should be defined in exactly the same manner. In the example above I forced that by simply setting all elements font style rules to some fixed values (the initial * {...} in the CSS code). That can obviously also be done right inside the css rules for the pseudo element itself. I chose the more simple and brute variant here to keep the code clean.
I'm making a touch interface and need to enlarge the select form (In order to make the rows eaiser to hit with the clumpsy finger). Is there any other way of enlarging the select rows without enlarging the text font? I know that the select is very limited, and you might suggest using a diffrent approach. I'm aware of that. I'm just curious if there are a way to enlarge the row without enlarging the font text. =)
On the image below I have
font-size: 20px;
And I would prefer it to be around 14-16, but then the rows would be rather hard to hit on a touch screen.
Full css code of the dropdown menu below
.styledDropDown select{
background: transparent;
width: 200px;
padding: 5px;
font-size: 20px;
border: 0px;
height: 31px;
-webkit-appearance: none;
outline: none;
}
.styledDropDown{
float:right;
width: 200px;
height: 31px;
background:url(../images/bedview/dropDown.png) no-repeat;
}
Could only change background color and font color but not change padding
option {
background-color:#ddd; /*Works*/
margin:20px; /*don't work*/
padding:20px; /*Don't work*/
}
Edit it works in Internet Explorer but want it to work in chrome :/
Well if you only need it for chrome
You can try something like
http://jsfiddle.net/nyd69/3/
Obviously it's not the best result but this i the best I got
select {
padding: 10px;
font-size: 30px;
-webkit-appearance: button;
}
As far as I know, Chrome doesn't support giving styles to option. Sorry.
I'm using <select> and it's OK.
Try to modify width and height in CSS to see changes.
I have tested in FF but not Chrome.
Can you check this fiddle link if it's OK or not?
Thanks.
I'm looking for a way to do something which in my opinion should be super simple, but I couldn't figure it out...
I want a graphical element on my web page which is exactly 1 pixel high, 100% wide and has a certain color, let's say red. It should look exactly the same in all browser and should preferably not break the semantics too much.
I don't want to use any images for this and I don't want to use more than one HTML element. Of course, I will not use JavaScript.
I tried the old classic which probably many of you know:
<div class="hr"></div>
<style ...>
.hr {
height: 1px;
background: red;
width: 100%;
font-size: 1px; /* IE 6 */
}
</style>
The problem with the above solution is that IE6 will render this as two or three pixels high, to fit the non-existing contents of the div.
Any ideas?
just do
.hr {
height: 0px;
margin: 0px;
border-bottom: 1px solid #FF0000;
font-size: 1px;
}
I went through the same thing when I was new to CSS.
adding an overflow: hidden; style should fix it also.
I don't have IE6 handy to test, but an actual HR tag can work in modern browsers. Took me a couple of tries to realise you set the background color not the border color:
hr { width:75%; height:1px; background-color:#ebebeb; border:none; margin:1.5em auto; }
(adjust to suit)
I don't have IE6 to test this, but I remember it had to do something with the line height. Have you tried this?
line-height: 1px;