Tag Archives: CSS

Using Bootstrap’s typeahead from inside a modal window

Leave a reply

If you want to use bootstrap’s typeahead functionality from inside a modal window such as lightbox or facebox then you are probably going to have to make a small edit to one of the bootstrap files.

Open up bootstrap-typeahead.js in your text editor of choice and then add a z-index of 9999, like so;

  this.$menu.css({
    top: pos.top + pos.height,
    left: pos.left,
    'z-index': 9999
  })

You probably don’t need to go as high as 9999 but it worked for me!

It took me way too long to get this working, other bootstrap things appear to work fine inside modals.

Share this on

Safari on Windows doesn’t like outline inside of :after

Leave a reply

Here is a really strange edgecase of browser support for you, Safari on Windows doesn’t like outline when it is called inside the :after psudoselector.

The first thing to note is that Apple have stopped supporting the Safari browser on Windows (I learned this today from Chris at ExamTime) so this probably isn’t something that is going to be high on your to-fix list even if this did crop up in production. I am simply blogging about it because I couldn’t find reference to it anywhere on the net and was starting to think I was imagining things.

So this is how the issue breaks down.

  • Safari (assume I mean on Windows unless I say otherwise) supports :after
  • Safari supports outline
  • Safari does not support outline when called inside :after
  • Safari does support border when called inside :after (which basically does the same thing)
  • Internet Explorer 8 does not support border when called inside :after (but does support outline)

This makes little sense to me, I have heard of browsers not supporting certain properties and certain selectors, but not a combination. Here is some code you can use to verify;


<html>
 <head>
  <style>
   .test:after { outline: green solid 1px; position:absolute; top:0; bottom:0; left: 50%}
  </style>
 <head>
 <body>
  <div class="test"></div>
</html>

Mental.

Share this on

Added some non-js social share buttons

Leave a reply

I have blogged before about having social share buttons without JavaScript, I just wanted to do a quick followup post to show off three things.

The first is that I have implemented them on this site, you can go ahead and test them out by sharing any number of my articles.

The second is that I have added share buttons for both Reddit and Hacker News, I think these qualify as social networks and warranted the addition.

Finally, I have made a github repository called nojs-socialshare to share the code I used when creating these buttons, feel free to fork and add your own.

Share this on

Changing the font-style of placeholder text CSS

Leave a reply

Note: This post could also be called, why I am an idiot and need to look for simple answers.

I needed to make my placeholder text italic in a project I was working on recently.

Initially I figured because this is a relatively new HTML5 attribute the CSS is probably going to involve some crazy CSS vendor prefixes, and the first path I went down confirmed this.

To change the colour of your placeholder text you need to use something like input:-moz-placeholder {color:red;} so I figured I would stick in input:-moz-placeholder {font-style: italic}, this didn’t work and I couldn’t figure why – obviously vendor prefixed solutions are never 100% and I initially started looking to double check Mozilla hadn’t ripped this out or replaced it in newer versions of FireFox.

Then it dawned on me that it probably inherits some properties from its parent (input), so the change turned out to be incredibly simple: input {font-style:italic} did the trick.

There are two reasons why I didn’t immediately come up with this solution.

  1. In my head I had already started over-complicating it.
  2. The designs presented to me had only placeholder text, so I wasn’t thinking about how to style the input, just how to style the placeholder.

My lesson here is to not over think things too early on, try and find the simple solution first.

Share this on