One solution would be to move the position of your image to match the mouse pointer

    cursor: url(image) [x y|auto];

Doesn&#39;t respond to the question but this is working

**HTML**

    div
    {
        width: 600px;
        height: 100px;
        background: pink;
        cursor: url(http://placehold.it/50x30) 25 15, auto;
    }

You can set it by:

    cursor:url(http://placehold.it/50x30) 25 15, auto;

The two parameters I added set the center of your cursor.

I just found this from [mozilla][1]:

&gt; Support for the CSS 3 syntax for cursor values got added in Gecko 1.8
&gt; (Firefox 1.5):
&gt; 
&gt; cursor:  [&lt;uri&gt; [`&lt;x&gt; &lt;y&gt;`]?,]* keyword It allows specifying the
&gt; coordinates of the cursor&#39;s hotspot, which will be clamped to the
&gt; boundaries of the cursor image. If none are specified, the coordinates
&gt; of the hotspot are read from the file itself (for CUR and XBM files)
&gt; or are set to the top left corner of the image. An example of the CSS3
&gt; syntax is:

    .foo  {
        cursor:  auto;
        cursor:  url(cursor1.png) 4 12, auto;
    }
    
    .bar  {
        cursor:  pointer;
        cursor:  url(cursor2.png) 2 2, pointer;
    } 

&gt; /* fallsback onto &#39;auto&#39; and &#39;pointer&#39; in IE, but must be set
&gt; separately */ **The first number is the x-coordinate, and the second
&gt; number is the y-coordinate. The example will set the hotspot to be the
&gt; pixel at (4,12) from the top left (0,0).**


  [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url?redirectlocale=en-US&amp;redirectslug=CSS/cursor/url

I had a suggestion to implement a timeout like this:

      $timeout(function() {

        // Loadind done here - Show message for 3 more seconds.
        $timeout(function() {
          $scope.showMessage = false;
        }, 3000);

      }, 2000);
    };

Can someone tell me what is the reason / advantage in using this rather than using setTimeout?

    

What advantage is there in using the $timeout in AngularJS instead of window.setTimeout?

I have a bunch of same-size blocks set to `display:inline-block` inside a div that has `text-align:center` set to align the blocks. 

    |        _____   _____   _____   _____       |
    |       |     | |     | |     | |     |      |
    |       |  1  | |  2  | |  3  | |  4  |      |
    |       |_____| |_____| |_____| |_____|      |
    |        _____   _____   _____   _____       |
    |       |     | |     | |     | |     |      |
    |       |  5  | |  6  | |  7  | |  8  |      |
    |       |_____| |_____| |_____| |_____|      |
    |                                            |

The blocks fill the div horizontally, and as the browser window shrinks, some blocks break to new lines, creating more rows and less columns. I want everything to still remain centered, with the last row aligned flush to the left, like this :        

    |        _____   _____   _____        |
    |       |     | |     | |     |       |
    |       |  1  | |  2  | |  3  |       |
    |       |_____| |_____| |_____|       |
    |        _____   _____   _____        |
    |       |     | |     | |     |       |
    |       |  4  | |  5  | |  6  |       |
    |       |_____| |_____| |_____|       |
    |        _____   _____                |
    |       |     | |     |               |
    |       |  7  | |  8  |               |
    |       |_____| |_____|               |
    |                                     |


What currently happens is this:

    |        _____   _____   _____        |
    |       |     | |     | |     |       |
    |       |  1  | |  2  | |  3  |       |
    |       |_____| |_____| |_____|       |
    |        _____   _____   _____        |
    |       |     | |     | |     |       |
    |       |  4  | |  5  | |  6  |       |
    |       |_____| |_____| |_____|       |
    |            _____   _____            |
    |           |     | |     |           |
    |           |  7  | |  8  |           |
    |           |_____| |_____|           |
    |                                     |

I cannot add extra filler divs like one suggestion, because there could be any number of blocks, and the amount of rows and columns will vary depending on browser width. I also cannot style block #7 directly, for the same reason. The blocks *must always remain centered* no matter how many columns. 

Here is a pen to better demonstrate:

http://codepen.io/anon/pen/IDsxn

Is this possible? I feel like it sure should be. I would prefer not to use flexbox as it is only ie10+, and I&#39;d like ie9+. I would really like a pure CSS solution, but if you tell me JS is the only way, I&#39;d love to see that in action.

For reference - similar questions, though none were thoroughly explained:


https://stackoverflow.com/questions/16377972/how-to-align-left-last-row-line-in-multiple-line-flexbox

https://stackoverflow.com/questions/12119978/css-left-align-the-last-row-of-images-in-a-centered-div

https://stackoverflow.com/questions/12503497/fix-centering-last-line-of-elements-in-fluid-container-grid-to-be-left-aligned-w

https://stackoverflow.com/questions/16375009/center-multiple-inline-blocks-with-css-and-align-the-last-row-to-the-left

Left aligned last row in centered grid of elements

I want to use a custom image for a cursor.

This is fine, but from what I can see - the origin (tip of arrow) is by default at the top-left point of my image.

How can I set the origin to be the center of my image.

Here is a demo snippet to demonstrate the problem

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      width: 600px;
      height: 100px;
      background: pink;
      cursor: url(http://placehold.it/50x30), auto
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;the cat in the hat&lt;br&gt; the cat in the hat&lt;br&gt; the cat in the hat&lt;br&gt; the cat in the hat&lt;/div&gt;

&lt;!-- end snippet --&gt;

Notice that when I try to select the text - it selects from the top-left of the image.


  [1]: http://jsfiddle.net/7Dvx5/2/

CSS change custom cursor image origin (hotspot) to center

I want to use a custom image for a cursor.
This is fine, but from what I can see - the origin (tip of arrow) is by default at the top-left point of my image.
How can I set the origin to be the center of my image.
Here is a demo snippet to demonstrate the problem


<pre><code class="hljs language-css">div {
 width: 600px;
 height: 100px;
 background: pink;
 cursor: url(http://placehold.it/50x30), auto
}
</code></pre>

<pre><code class="hljs language-bash">&#x3C;div>the cat in the hat&#x3C;br> the cat in the hat&#x3C;br> the cat in the hat&#x3C;br> the cat in the hat&#x3C;/div>
</code></pre>

Notice that when I try to select the text - it selects from the top-left of the image.

**Problem:**

Remove padding/margin to the right and left of col-md-* in Bootstrap 3.

**HTML code:**

    &lt;div class=&quot;col-md-12&quot;&gt;
        &lt;h2&gt;OntoExplorer&lt;span style=&quot;color:#b92429&quot;&gt;.&lt;/span&gt;&lt;/h2&gt;

		&lt;div class=&quot;col-md-4&quot;&gt;
            &lt;div class=&quot;widget&quot;&gt;
                &lt;div class=&quot;widget-header&quot;&gt;
                    &lt;h3&gt;Dimensions&lt;/h3&gt;
                &lt;/div&gt;

                &lt;div class=&quot;widget-content&quot; id=&quot;&quot;&gt;
                    &lt;div id=&#39;jqxWidget&#39;&gt;
                        &lt;div style=&quot;clear:both;margin-bottom:20px;&quot; id=&quot;listBoxA&quot;&gt;&lt;/div&gt;
                        &lt;div style=&quot;clear:both;&quot; id=&quot;listBoxB&quot;&gt;&lt;/div&gt;

                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;col-md-8&quot;&gt;
            &lt;div class=&quot;widget&quot;&gt;
                &lt;div class=&quot;widget-header&quot;&gt;
                    &lt;h3&gt;Results&lt;/h3&gt;
                &lt;/div&gt;

                &lt;div class=&quot;widget-content&quot;&gt;
                    &lt;div id=&quot;map_canvas&quot; style=&quot;height: 362px;&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
    &lt;/div&gt;

**Desired output:**

Currently this code adds padding/margin to the right and left of the two columns. I am wondering what it is I am missing in order to remove this extra space on the sides?

**Notice:**

If I remove &quot;col-md-4&quot; then both columns expand to 100% but I want them to be next to each other.

Remove padding from columns in Bootstrap 3

here&#39;s what I have  [Fiddle][1]

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    ul {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 100px;
      background: #333;
      padding: 15px;
    }

    ul li {
      padding: 15px;
      margin: 5px;
      background: #efefef;
      border: 1px solid #ccc;
      display: inline-block;
      list-style: none;
    }

    #item-1 {
      height: 50px;
    }

    #item-2 {
      height: 70px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;ul&gt;
      &lt;li id=&quot;item-1&quot;&gt;Home&lt;/li&gt;
      &lt;li id=&quot;item-2&quot;&gt;Menu&lt;/li&gt;
      &lt;li&gt;More&lt;/li&gt;
      &lt;li&gt;Stuff&lt;/li&gt;
      &lt;li&gt;Settings&lt;/li&gt;
    &lt;/ul&gt;

&lt;!-- end snippet --&gt;


**I want the last item inside the flex-box to be pulled to the right** (&quot;Settings&quot; in my fiddle) while keeping all other items the way they are. The &quot;Settings&quot;-item should also be centered vertically and everything.

`align-self: flex-end` pushes the item to the bottom (I want it on the right).

I would very much prefer a solution using flex-box because my items have variable heights and should always be centered vertically.

What is the cleanest way to achieve this?

Thanks for your help!


  [1]: http://jsfiddle.net/mWZK4/1/

CSS3 Flex: Pull child to the right

I don&#39;t think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I&#39;d like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.

Here&#39;s the starting html:

    &lt;ul&gt;
        &lt;li&gt;One&lt;/li&gt;
        &lt;li&gt;Two&lt;/li&gt;
        &lt;li&gt;Three&lt;/li&gt;
        &lt;li&gt;Four&lt;/li&gt;
        &lt;li&gt;Five&lt;/li&gt;
    &lt;/ul&gt;

And css:

    ul {
        display: flex;
        flex-wrap: wrap;
    }

I&#39;d love something like the following:

    /* inside media query targeting width */
    li:nth-child(2n) {
        flex-break: after;
    }

See the jsfiddle for a more complete setup: http://jsfiddle.net/theazureshadow/ww8DR/

How to specify an element after which to wrap in css flexbox?

I want to make my navbar in BS3 to be of height 20px. How do I do this?

I&#39;ve tried the following:

    .tnav .navbar .container { height: 28px; }

Did nothing.

    .navbar-fixed-top {
        height: 25px; /* Whatever you want. */
    }

Appears to be able to increase the size of the bar, but cannot decrease.

What is a good way to do this while preserving the container&#39;s alignment, etc.

How do you decrease navbar height in Bootstrap 3?

I have a slider class like this and I wan to change the style attribute **style=&quot;left: 336px&quot;**

    &lt;div id=&quot;range-cont&quot;&gt;
    &lt;div class=&quot;slider&quot;&gt;
    &lt;div class=&quot;progress&quot; style=&quot;width: 350px;&quot;&gt;&lt;/div&gt;
        &lt;a class=&quot;handle&quot; href=&quot;#&quot; **style=&quot;left: 336px;&quot;**&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;input id=&quot;percentage&quot; class=&quot;range&quot; type=&quot;range&quot; value=&quot;14&quot; name=&quot;percentage&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
    &lt;p id=&quot;percent-label&quot;&gt;%&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;

I tried 
`$(&#39;.handle&#39;).css({&#39;style&#39;:&#39;left: 300px&#39;})` but its not working. 
Not sure what I am doing wrong here

Content Type	Original Author	Original Content on Stackoverflow
Question	Danield	View Question on Stackoverflow
Solution 1 - Css	Romain	View Answer on Stackoverflow
Solution 2 - Css	Igle	View Answer on Stackoverflow
Solution 3 - Css	Danield	View Answer on Stackoverflow

CSS change custom cursor image origin (hotspot) to center

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Left aligned last row in centered grid of elements

What advantage is there in using the $timeout in AngularJS instead of window.setTimeout?

Attributions