DEMO LINK
I am trying to include a tooltip inside the table but when mouse hovers it streches the tables and tooltip text isn't showing up correctly as well on the website.
How can I fix this?
CSS:
.infotext {
background: url(http://s17.postimg.org/k71a0r6m3/info_Icon.png) 0 0px no-repeat;
width: 15px;
height: 15px;
display: inline-block;
vertical-align: text-bottom;
}
If you add the following CSS, it should work
td .tooltip {
position:absolute
}
http://jsfiddle.net/z33j5/2/
Without this, the tooltips had a position:relative which meant they were rendered in the table cell
Related
At the bottom of my page there are 3 buttons. "Send, Save and Cancel" buttons. The Save and Cancel buttons are the same height but the "Send" button is different from the other two. Why is this happening?
I read on another post that said elements render buttons different from normal buttons so I tried to fix it with the solution given but it didn't work. I also tried removing element but it still didn't work. Thanks for your help!
Buttons Styles
background-color: #8f81e8;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
cursor: pointer;
padding: 1rem;
CodePen
It's because your send is input while other elements are button.
Add border: none; to your css
you can give static height to all three buttons.
You have two different divs: .user-messages (the left one) and .settings the right one.
The left one contains an input, while the right one contains two buttons. So you can either add border:none to the left one to make the border disappear and then re-arrange your layout to use a button instead of an input.
Update
Wrap the buttons into a seperate div below the div of the two pages and do the following:
div {
display:flex;
justify-content:space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you want to have */
}
<div style="width: 100%; background-color: green;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
</div>
Is the result of my snippet the desired outcome?
Seems to be the display: flex on the settings-btn-box that is causing it. One solution could look something like this:
.settings-btn-box {
/* display: flex; */
}
.settings-btn-box button {
width: 49%;
}
.btn-save {
/* margin-right: 10px; */
}
.btn-cancel {
/* margin-left: 10px; */
float: right;
}
Personally, I'm not a big fan of float, but since it's the last element in the div it should be fine.
My code looks like this:
<div class="hovereffect">
<img class="img-responsive" src="/some-image" alt="">
<input type="checkbox" class="img-checkbox">
</div>
.hovereffect {
width: 100%;
height: 100%;
margin-bottom: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .img-checkbox{
position: absolute;
width: 18px;
height: 18px;
top: 3px;
right: 5px;
cursor: pointer;
}
So there is the checkbox in the right upper corner over the image and would like to extend the clickable are to the whole image for a better user experience.
As you can see the checkbox has no label and I would like to achieve the goal without a label.
I tried tricks with the ::after element which kinda worked with chrome but not really with firefox and I couldn't make the clickable area responsive that is to say, extend to the whole area of the image.
Can you use Javascript/jQuery?
You can start by assigning unique id to every image you have (Ex: img1,img2,img3) and every checkbox associated to the image (Ex: img1-checkbox).Then you can use the code below:
$('#img1').click(
$('#img1-checkbox').attr('checked', true);
);
Or something like that.
This has been a problem since a very long time and you simply cannot achieve your goal with pure css. The only available ways of getting it done are ou using label or jquery/javascript or :after pseudo class.
If you want to expand the checkbox size, then try this:
.hovereffect input[type=checkbox]
{
width:100px !important; //adjust as per need
height:100px !important; //adjust as per need
}
This will increase the clickable area of the checkbox field. Working Link
But, if you want the checkbox to be transparent and show the image behind, then you will have to use label and set it's background color to transparent.
I'm waiting to see someone prove me wrong with working code.
I am trying to create a table with a link (an anchor tag) taking the full height of the table cell (td) that contains it.
This works in Firefox:
table tr,
table td {
height: 100%;
}
table td > a {
display: block;
height: 100%;
}
http://jsfiddle.net/6nem4/
With a couple of minor edits it also starts to work in Chrome, Safari, etc:
table tr,
table td {
height: 100%;
}
table td > a {
display: inline-block;
height: 100%;
width: 100%;
}
http://jsfiddle.net/sj3ST/
I’m just curious if there is a way of making it also work in IE10.
Not the best idea: http://jsfiddle.net/sj3ST/1/
But add padding in IE to anchor tag
a{
padding: 56px 0;
}
Or give padding to span
If you want the link to appear in the top of the td add vertical-align: top; to your td.link and also the background color you want to the td and not the link itself.
If you want the link to appear in the middlw just remove the vertical-align property from my example.
OR
You can use add padding-top: 50%; padding-bottom: 50%; to the a
OR
You can just use a div instead of a element and set onClick event.
example
I'm currently working on a table that has a different link for each row. The-clicking-area must fill the whole table-row.
And please: No Javascript! And if possible no additional Div-elements.
This is what I got so far:
http://jsfiddle.net/WLYW3/
this works pretty good, but there are some problems:
After adding height: 128px; to the a-elements (which seemed necessary), the text in each row wasn't vertically centered anymore. Adding vertical-align: middle; didn't help.
And I can't get the table to have rounded corners. (border-radius: 6px 6px 6px 6px;).
To fix it, simply add this :
#itemTable tbody tr td a
{
line-height: 128px;
}
Vertical alignment
Because you use the <table> elements, you can just make the anchor 100% height. Combined with vertical-align: middle;, which is used on the <tbody> by default, it will calculate the middle based on the total height (100%):
#itemTable tbody tr td a {
display: block;
position: relative;
/*height: 128px;*/
height: 100%;
text-decoration: none;
color: rgb(51, 51, 51);
}
Table radius
A table without a border actually does not support the border-radius property and there is no clean solution, you can only force it.
However, even though you did not want an extra element, a wrapper would be the most clean solution:
#tableWrapper
{
border-radius: 5px;
overflow: hidden;
}
jsFiddle
I have a html page which is using the same icon many times, and so I have embedded that icon as a background-image in css.
In css, the class for the icon is like this:
.user {
background-image: url(data:image/png;base64,...encoded png file...);
background-position: 0 0;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
I display the icon using a<span class='user'></span> tag, so far, so good.
I want the icon to be a link to another page, but I can't make the icon look correct when I do this.
I have tried:
<img class="user" src=""></img>
but this draws a broken link icon over it in Explorer, it looks ok, but has a border in Chrome. It is obviously wrong.
I also tried:
<span class="user"></span>
and this works, but the mouse cursor does not change to a pointer when over the icon.
What should I be doing?
You should make the element block level (at least inline-block) to set the width/height and explicitly set the cursor. These two things are the key components.
.user {
background-image: url(data:image/png;base64,...encoded png file...);
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block; /* set display so you can set width/height */
cursor: pointer; /* ensure it shows the link cursor */
width: 16px;
height: 16px;
}
And the HTML:
<span class="user"></span>
So, you end up with an inline-block element which shows the image, and then you wrap that with an anchor. This is basically the same as wrapping an anchor around an <img />.
Alternatively, you could do this with just the <a>. You would use the exact same CSS, with this HTML:
Both should achieve what you're after. The difference between these two choices is mostly semantics.
You can set the class attribute on the anchor tag.
Are you looking for something like THIS
The HTML:
The CSS:
.user {
text-indent: -99999px;
background: url("http://www.google.co.in/images/srpr/logo4w.png") no-repeat top left;
float: left;
overflow: hidden;
width: 600px;
height: 200px;
margin: 10px;
}
Hope this is what you need.
try to add this one on your css
cursor:pointer;/*Link with poniter*/
<span class="user" /></span>