Tag: css

Responsive bootstrap horizontal alignment

In order for a web application to render on a variety of devices (mobile, tablet, laptop, desktop), it needs to be “responsive”. Meaning the same website can have specific rules written into JavaScript, HTML, and CSS to make it adapt to the size of the screen the browser is running on.

In this post I’ll cover how to make something align on the screen according to what device the user is on. For example, on a desktop view, you may have some header text that you want to align right horizontally. But for the same page and header text rendered on a mobile phone, you may decide it looks better center aligned horizontally.

Let’s use the above example, and see how we can accomplish this. First let’s define the following CSS:

@media (max-width: 768px) {
  .responsive-text-align {
    text-align: center;
  }
}
@media (min-width: 768px) {
  .responsive-text-align {
    text-align: right;
  }
}

We’ve created a CSS class called responsive-text-align. You’ll notice that it has two settings: max-width: 768px and min-width: 768px. This tells your browser which setting to use when the screen size is either lass than 768px, or greater than 768px. If we assume that a standard mobile screen is 768px across, the max-width: 768px setting will get applied to the webpage when it is rendered on a mobile screen.

You’ll also notice that for the two different screen sizes, we specify different text-align properties. This allows the text alignment to be determined dynamically, or rather, “responsively”.

To use this CSS class, here’s what your HTML would look like (using bootstrap):

<div class="row">
   <div class="col-sm-12 responsive-text-align">Align this text responsively</div>
</div>

And voila! The text will start aligning according to the rules for the responsive-text-align CSS class, based on what screen size the webpage is rendered in.

Adding an asterisk to required fields in Bootstrap

This is pretty useful in giving a visual indication to the user when a form field is required.

The CSS:

.form-group.required .control-label:after {
  content:"*";
  color:red;
}

Then in your HTML:

<form>
  <div class="form-group required">
    <label class="control-label">Required Field</label>
    ...
  </div>
</form>

There will now be a nice little “*” after the label for “Required Field”.

Making a pseudo div fade in using CSS animation

The example I’ll use applies specifically to Vaadin, for when the loading bar is shown if the server is taking too long. However, the same CSS styling I’ll use can be applied to any pseudo div.

When Vaadin loads a page (or a “view”), and if the page takes too long to load, there’s some client side JavaScript and CSS that Vaadin pre-loads, which displays a loading bar or progress bar. This bar progresses forward, from left to right, at the top of the page, under the “URL” area of your browser. And it eventually goes away when the page loads. This gives the user the indication that something is happening and they should wait.

If the page takes too long to load, this bar eventually starts blinking. And if the server is stuck (had a hiccup somewhere), this bar just blinks forever. After some waiting, more adept users eventually realize it will never load and they refresh the page which usually resolves the issue. However less tech-savvy users don’t know what to do at that point. So we set up a small message box (a pseudo div) that floats under the loading bar, which tells the user to refresh the page. This is kind of like what the GMail web app does when there’s a network issue.

First of all, to set up the pseudo div, we add the following to our theme’s scss (SASS) file that Vaadin uses:

.v-loading-indicator-wait:after
{
  position:fixed;
  content: "Temporary Internet issue... Please wait, or refresh page.";
  color: black;
  background-color: #F9EDBE;
  border-style: solid;
  border-color: #F0C36D;
  box-shadow: 2px 2px 5px #888888;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

“v-loading-indicator-wait” is the style Vaadin gives to the loading bar which shows up after a certain amount of waiting while the server is processing the request. So to show our floating div with the loading message, we can use the ::after (v-loading-indicator-wait::after), as indicated above.

The problem is, that the v-loading-indicator-wait is added after just a number of seconds of waiting (around ~5), and showing the floating div would be too soon. So the best way (or at least an easy way) to do it is to use animation to delay when it is added.

You can define the animation to “fade in” the div (from being invisible to visible) after a certain number of seconds, like so:

@include keyframes(animate-in-scale-up) {
  0% {
    @include transform(scale(0));
  }
}

@-webkit-keyframes fadein {
  0% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadein {
  0% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadein {
  0% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadein {
  0% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; }
}

.v-loading-indicator-wait:after
{
  //...all the other stuff
  -webkit-animation: fadein 12s ease 1 normal;
  -moz-animation: fadein 12s ease 1 normal;
  -o-animation: fadein 12s ease 1 normal;
  animation: fadein 12s ease 1 normal;
}

And viola. The floating div doesn’t show up until about 12 seconds after the “v-loading-indicator-wait” is added, which is about 5 seconds after a request is initiated and the server hasn’t responded. So that’s a total of 17 seconds between the user initiated the request and till when the message shows, which I believe is enough waiting time to realize the server may never respond.