Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Unsubscribed User
Unsubscribed User
4,776 Points

Using the Flat UI kit drop down selections?

I'm working on a small project for YRS 2013 which uses Flat UI kit (free). I managed to get the buttons and text boxes styled however I cannot seem to get the drop down menus styled. The full project is here; the main CSS and HTML files are in the public and views folder respectively. I'm trying to style the drop down select element in views/index.erb. The Flat UI CSS is minified and included in public/style.min.css.

Any ideas on how to style the drop down menus using Flat UI using static CSS (one that doesn't use any JS manipulation)?

Thanks! I need to submit the project by Friday!

1 Answer

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

How can I "run" this app to preview it? I haven't used cloud9 before.

Unsubscribed User
Unsubscribed User
4,776 Points

You'll need to write this in the Cloud9 terminal at the bottom: ruby app.rb -o $IP -p $PORT however it might not work as you down't have read and write permissions. However you will be able to see the sources files so you can download the following files: style.min.css, skeleton.min.css and put it in the public folder, then download the index.erb and layout.erb files and change the extensions to .html. Now where it says <%= yield %> in the layout.html file, insert the code of the index.html file the it should look something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Events in?</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,400italic,300" rel="stylesheet">
    <link href="style.min.css" rel="stylesheet">
    <link href="skeleton.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body class="container">
    <div class="sixteen columns">
      <header class="animated flipInY"><strong><a href="/">Event<em>s</em> in?</a></strong></header>
      <em id='status'>Tell us your location and we'll tell you what's on!</em>
<form action='/' method='post' name='location_date_form' onsubmit='return(validate())'>
  <input type='text' name='location' placeholder='Location' id='location'><br>
  <select name='date' id='date'>
    <option value='Date' selected='selected' disabled>Date</option>
    <option value='Today'>Today</option>
    <option value='This Week'>This Week</option>
    <option value='Next Week'>Next Week</option>
  </select><br>
  <button type='submit' id='search' class="btn btn-large btn-block btn-primary">Search!</button>
</form>

<script>document.location_date_form.location.focus();function validate(){var a=document.location_date_form.date.value;return""==document.location_date_form.location.value||"Date"==a?(document.getElementById("status").innerHTML="<span id='red'>Please include the location <strong>and</strong> the date.</span>",!1):!0};</script>
    </div>
  </body>
</html>
Colin Marshall
Colin Marshall
32,861 Points

Ok I sort of got it working. Looks like you have to use some javascript. Make sure you include jquery.js, bootstrap.min.js, and bootstrap-select.js from the Flat UI js folder.

After including those, put this in a script tag below it: $(document).ready(function() { $("select").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'}); });