DIV element cursor behaves inconsistenly - javascript

I have a DIV element on a JSP page whose behavior is defined in the following CSS class:
.toolbarRight .shortcut {
background-position: left center;
background-repeat: no-repeat;
width:16px;
height:16px;
margin:0 8px 0 0;
display:inline;
cursor:pointer;
position:relative;
top:6px;
float:left;
border:none;
}
span.toolbarRight .export {
background-image: url('/images/excel.gif');
}
So basically when you hover over it with the mouse it should change into a pointer. The problem is that it only changes into a pointer over the bottom 1/4 of the element, over the top 3/4 it doesn't. Look at pictures below for illustration of the problem.
Pic 1: mouse cursor is over bottom 1/4 of Excel icon (changes into pointer):
Pic 2: mouse cursor is over top 3/4 of Excel icon (does not change into pointer):
Another thing that's strange is that it only happens in my current screen configuration which includes two DHTMLX grids, one in the top half of the screen, the other on the bottom (look at picture below; Excel icon where problem occurs is circled in yellow):
If I have three grids (two horizontal and one vertical) the problem does not occur:
Anybody know what the reason for this is?

Usually when I have this problem, it's because you have another item's padding overlapping the toolbar (or something else). Since the bottom 1/4 is visible, then odds are something above it is overlapping below slightly.

The other answers might be right, but you might also have a float issue here.
You can force parent containers to wrap their floated children by applying overflow: hidden;. Try that out. If it fails, use a clearfix.
Also, I don't know if the width and height of your .toolbarRight .shortcut class will stick because you have it set to display: inline. Try inline-block or just plain old block when you need to apply width and height to things.

It is your
position:relative;
top:6px;
combo - the element sits 6px lower than where you think. The image may be up higher but the container isn't. Move your pointer to the image, not the container for the image

Related

How to center align a Card with left aligned text?

Newbie question here.
I'm trying to have a card with a width that doesn't span the entire window. I have a cardStyle I've defined below.
cardStyle:{
width: '95vw'
align? : 'center?'
textAlign? : 'default or left or something'
}
I want my card to be centered but the text to have the usual left alignment. I can't seem to figure this out. If I drop it in a div, I get everything centered.
Thanks for your help!
There are many ways to do this, but the simplest is to have your "card" be a block level element (an element that renders on its own line). It's width needs to be less than 100% and its left and right margins should be set to auto. The auto applied to both the left and right margins tells the browser to split whatever space is left over equally between the two, thus the element gets "pushed" to the center of the viewport.
The alignment of the contents of the block element is separate from the position of the element itself. left is the default text-align value and it is an inherited value.
.card {
width: 50vw;
margin:auto;
border:1px solid black;
background:#e0e0e0;
}
<div class="card">I am the card</div>

Positioning a div relative to SCREEN and a COL div

I'm trying do this to long time, but... no luck. The question itself is a little simple.
I need make a div to begin on the left side of screen and ending on the end of a col-xx-x div, which in turn is inside a row div, which in turn is inside a container div.
I've already done it with jQuery, but I'm searching for a way to do that using only HTML and CSS.
I made a image to a better understanding:
(The red square is the div that i want, but it's obvious)
Note: Notice that on my image I used a col-md-6 div, but the col is indeterminate (col-xx-x), I used 6 only to draw.
Here is a fiddle with the code using jQuery:
https://fiddle.jshell.net/b8xcp6j7/
You can adjust .box element width to 200%, set position to relative, left to -100%
.box {
width: 200%;
border: 4px solid red;
padding: 15px;
position:relative;
left:-100%;
}
jsfiddle https://fiddle.jshell.net/6a0uac4y/2/

Chrome, jquery animate wobble

I have an issue that only affect Chrome. Furthermore its only visible when the screen is at certain widths.
I've created a fiddle that can replicate the issue.
http://jsfiddle.net/T8LvA/63/
When you rollover the red box the width of the parent is animated to reveal more of the red box.
You may need to adjust the width of the html pane several times before you see the wobble,
Any thoughts on how best to resolve this?
Thanks
Use float:right instead of positioning it absolutely.
http://jsfiddle.net/T8LvA/70/
It happens because when you change the width, it extends to the right - then it's reflowed and moves back to the left to the correct position, which causes the wobble. Floating it to the right always keeps it there.
To clarify: you'll need to replace position: absolute width float: right on both #widget and .hidden for the correct result.
if you use postion you need use left and top, in this case it is useless.
Try fx you css in this way
#wrapper{
width: 100%; // was 600px
height: 100px;
margin: 0 auto;
//position: relative;
}

CSS Dynamic Margin on Window Resize

Can I dynamically ensure that the content always remains centered in the window pane on this website?
Right now it uses a static margin-left on the .items class, and it uses jquery tools.
http://andstones.ca/newsite/
Can I do it in just CSS or CSS and Javascript?
Thanks,
Kory
I didn't quite see what part you were talking about as it looks like most of it works just fine.
For auto-centering, you should use auto for margins:
margin: 0 auto;
Put that one whatever div you want centered.
Lets say that you want to center a container with 900px wide, the most cross browser way that I've used is:
div#container{
width:900px;
position:relative;
left:50%;
margin-left:-450px;
}
This goes to the center of the x axis and stays there regardless of other elements of that page!
Of course that this only works with a fixed width and not a dynamic one!
If i remember correctly, you have to use the following in IE
text-align: center;
Even to center a div

Can the content remain centered while the screen size changes?

First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?
You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.
I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37
A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.

Categories