css

All posts tagged css

Clearing Float Elements

float

As you develop web pages you may come across moments when you need to float an element.  Using the CSS float you can make elements be pushed around to make room as more elements are added.    A nifty feature in and of itself but there is a common problem that tends to crop up.

Recently I was working on a small navigation header that included two buttons and a search box.  The buttons were standard <button> elements and the search box had been floated to move with the varying size of the screen.  The problem that happened came when you made the screen too small and the floated box dropped to the next line.  Directly beneath this row of elements was a header row that had a background and when the search box dropped down it would be hidden by this header instead of pushing the header down as would be expected.

After doing some research into float elements I came across this question on StackOverflow asking What is the best way to clear the CSS style “float”?  In it the top answer explained that you can add an arbitrary <br> element with clear:both as the style to force floated elements down a line but that isn’t ideal.  Their solution was to wrap your float elements in a parent div and simply give that div the CSS of overflow: hidden.  This forces all floated elements to stay within the parent div.  With this parent and CSS in place the parent div will grow depending on what happens within, floated element or not.

Becomes

This solved my problem perfectly and works cross browser so feel free to use it everywhere and anywhere.  Hope this helps someone else out there who is having similar problems.  Float elements can be very tricky sometimes.

Screenshot from 2013-08-22 09:04:36

Sometimes it’s necessary to display a message to the user in a quiet and clean manner.  To do this, Django has given us the messages framework for cookie- and session-based messaging.  After a form or other input is submitted we can quickly send a short message to the user without much effort at all.  Here are all the documents related to the framework but I’m going to give you the quick version as well as some customization options and Bootstrap fixes.

The messaging framework is enabled by default when you create a new Django project so good job you’re half way there!  Now just add this bit of code to the top of any page you want messages to appear:

We have this in our base that is inherited by every page to allow the functionality to appear on the entire site.  You need to have the loop even if you only have one message because it helps clear the message storage needs to be cleared.  Now the great thing is you don’t need to return messages when you render your template it will just come with it because of the context processor involved.

To add messages to your page, in your view:

That’s it!  You just have to have the line messages.add_message(request, MESSAGE_TYPE, MESSAGE_STRING) and then use the context_instance in your render and you’re done.

Bootstrap Compatability

To use this with Bootstrap you need to leverage the message.tags dictionary that returns values for each of the message levels.  Here is our code that we use for messages in our Bootstrap site.

As you can see we surround the message in an alert class with an alert-{{ message.tags }} class and add the Bootstrap close button.  This works out of the box for all Django messages except messages.ERROR.  This is because messages.ERROR returns ‘error’ which will make the alert class alert-error which is not what Bootstrap uses, they use alert-danger.  To fix this, as well as add new message types, you need to alter your settings file by adding this variable:

The import just above the line helps to avoid circular imports.  At this point you can see that we have changed the constant for messages.ERROR to return ‘danger’ instead of ‘error’.  This fixes our Bootstrap problem but you can see that now you can add new message constants not already created like messages.AWESOME or whatever else you’d like to make.

There is a lot more to the Django messages framework including error levels that I didn’t get into here.  Check out their docs for the low down on all the different things you can do with Django messages.

Here is a screenshot of an example I did just to test things out.

Screenshot from 2013-08-22 09:09:47

menu-title

Designing our new internal marketing tools has been a pet project of mine for a couple of weeks now.  I spend a little time here and there adding information and tools for our employees to better understand our relationship with our clients.  I’m displaying basic contact information, some information on the kind of business we do with them, a log of notes we take, past business, and company information.  All of that equates to a rather long page of information.  All of the information is relevant and displayed in an attractive compact manner the problem is it is just so much information that it can be overwhelming.  I showed it to a coworker and he wanted tabs to flip between the various bits of information because he found it overwhelming.  I didn’t want to go to tabs because of the increased difficulty that would be added when they wanted to print off the marketing information and I didn’t feel that tabs were the right way to go here.  With that in mind I needed another solution for a large page of information that could be easily navigable…enter Bootstrap ScrollSpy.

Anyone who has looked at the Bootstrap documentation will immediately notice that has exactly the same problem I’m having; long page with lots of information.  On the left they have a static menu that follows you and highlights what section you are currently in.  Clicking on any one of those links will bring you to that portion of the page.  If it’s good enough for them it’s good enough for me so I set about recreating their side menu style.

ScrollSpy can be used with any .nav menu whether it is one your create with a ul or if it is the main nav-bar at the top of the screen.  ScrollSpy works by checking what element is currently at the top of the visible screen and adding making that nav element active.  This is great but there are a few quirks and tweeks that took me a while to figure out.

At the most basic level you want to add the HTML 5 data-spy attribute to your body because that is what we are going to spy on.  Here is the example code from Bootstrap’s documentation.

The data-target attribute needs to point to the parent element of your nav.  So if you have a nav-bar you’ll need to have an outer div or element with the id that you will use in your ScrollSpy.

Now all of your elements in your nav will need to have an href pointing to the id of the element you will be spying on.  These will need to be valid elements in your DOM.  If you are adding things dynamically and need to update your ScrollSpy use

That’s it for the simple example.  Set the data-spy and data-target on your body tag and you should be all set assuming your nav is set up properly.  One issue you may run into is not spying on the body.  When I originally started this I wasn’t spying on the body tag because I was loading in a template using Django’s block tags.  Granted it was within the body tag at one point but not specifically and I wanted to only watch my div.  ScrollSpy will only work correctly on non-body tag elements if they have a fixed height and a scroll bar.  If you do not have a scroll bar on the element you are spying on it will not work.  Your nav-bar will always have the last element as active.  To fix this just give the element you are spying on a fixed height and you should be good.  In my case instead of using the HTML 5 tags on the body I used JavaScript.  The body tag is used in every page and I didn’t want the ScrollSpy loaded on every single page.  In my JavaScript for my marketing page I have the line $("body").scrollspy({target: "#side-nav", offset:50});.  The offset tells ScrollSpy by how many pixels to offset the scroll before we are actually “in” the element.  I added some padding so when you see the header near the top we are now in the section.

To mimic the fixed sidebar used on the Bootstrap documentation use either the Affix JavaScript from Bootstrap or the affix class on your nav.  Below I have my full example and how it all works.

HTML

 JavaScript

I hide the side nav on smaller resolutions to give more screen real estate. The a tags have both a name and an id because the id is used by ScrollSpy and the name is used as a normal locator on a page.  Let me know what you think and if there are any questions or comments.

As Bootstrap nears releasing their final version of Bootstrap 3 they will continue to roll out Release Candidates for bug fixing and testing.  We have elected to keep as up to date with them as we can under the assumption that release candidates are fairly stable and shouldn’t change too much between now and release.  Tuesday they released their next release candidate, RC2.  You can read about the full changes at their blog but I’m going to highlight a few of the main things that changed for us.

Default Col is Gone

In RC1 we were using col- to be the default size for all devices.  RC2 has removed this default class.  Instead they have added a new -xs size for really small phones and a -md, though I think this was in RC1 we just never used it.  The best way to do a default size for most devices is now to use to col-sm-.  Use the small version because it works for devices with a screen resolution  of ≥768px.  This is what most modern devices are using.  Anything lower than that will default your spans to be like a col-12.  If you need to make changes for screens smaller than that use col-xs-.

Navbar Changes

Some little things changed with the navbar.  Just quick changes to classes.  You’ll need to wrap the mobile navbar header in a div with the class navbar-header.  Change nav-collapse to navbar-collapse.

Large and Small or lg and sm?

To keep consistency throughout Bootstrap they have changed many of the button classes from button-large to button-lg and button-small to button-sm. Form groups is also affected by this change.

Those are some of the main things we found.  I’m sure there are plenty of things that are affecting other people.  Head over to their blog to read all about it.  I’ll update this post if I come across anything else.

EDIT Aug 16 12:06PM

It seems we’ve stumbled upon a bug in their Modal.  When a modal is opened and then closed when you reopen it you can’t close it with the x or the close button. They are aware of the issue.  Our modals are actually all out of whack and we are looking into that right now which is how we found that bug.

EDIT Aug 16 12:20PM

Modals loaded remotely are being loaded into the modal and not the modal-body.  To fix this just move all of the divs below the modal into your remote document and that should work for now.  It’s an issue they are discussing.

EDIT Aug 19 1:01PM

When you print it uses the col-xs tag.  Make sure to update accordingly.

Bootstrap 3 RC1

Bootstrap 3

Creating our new site required a better base.  We chose to use the popular Bootstrap CSS engine to unify our CSS and help us get things started quickly.  After using Bootstrap 2.3.2 for nearly three months Bootstrap 3 was released.  We had hoped that the update would not affect our code base but we were wrong.  Nearly everything has changed in our styling.  Bootstrap 3 has gone for a mobile-first approach making even the basic framework responsive.  This is great for most developers, and even for us, because we can make wonderful sites that look and feel great on all platforms.  Our company had talked about wanting mobile versions of applications but we had put that on the back burner as many of our applications involve data entry.  Converting our project to use Bootstrap 3 has been a headache due to changes to simple classes that were used before but we are moving forward and should have things squared away by tomorrow.  The site looks cleaner, runs faster, and works on mobile already.  All in all it has been for the best but the headache will continue probably through the rest of the week as we smash all the bugs related to their new JavaScript and CSS.

Let me know if you’re using it and what you think about the changes.