CODEWITHSUNDEEP
htmlcssbootstrap-4font-awesomefiddle
flash
flash

Reputation: 1519

How to style font-awesome icons in css?

I have a screenshot below which I have replicated in HTML/CSS. The design is exactly the same both for mobile and desktop view. In the design, the angle dropdown font-awesome icons (marked with arrow in the screenshot) are aligned properly with the headings which is not the case in my design in mobile view.

1st Image:

enter image description here

I have created the fiddle for the above screenshot. For some reasons, I am not seeing the mobile view in the fiddle (Is there any way we can enable mobile view in the fiddle?). The snippets of HTML code which I have used in the fiddle is:

<tr>
    <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
</tr>





On mobile view (as shown below in the screenshot) on my pc, I am seeing the Number and Table headings over the angle dropdown icon.

2nd Image:

enter image description here

Problem Statement:

I am wondering what changes I need to make in the fiddle so that Number and Table headings are aligned with the angle dropdown font-awesome icon (marked by arrow in the 1st image) in the mobile view.

For some reasons, I am not able to see the mobile view in the fiddle.

Upvotes: 2

Views: 2900

Answers (5)

Carol Skelly
Carol Skelly

Reputation: 362410

Just use the Bootstrap 4 text-nowrap class to the table th...

https://jsfiddle.net/9shn3qxz/

<div class="table-responsive body-manage-attendees">
        <table class="table table-hover">
            <thead>
                <tr>
  <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="number text-nowrap">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="table2 text-nowrap">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="status text-nowrap">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="left">Amanda Doe</td>
                    <td class="number1">250</td>
                    <td class="table1">2</td>
                    <td class="right-bill">Bill</td>
                </tr>
                <tr>
                    <td class="left">Andy Doe</td>
                    <td class="number1">14</td>
                    <td class="table1">1</td>
                    <td class="right-bill">Bill</td>
                </tr>

            </tbody>
        </table>
    </div>

Upvotes: 3

Sayo Komolafe
Sayo Komolafe

Reputation: 1008

To fix this, you can try adding the Bootstrap 4 text-nowrap class to the table th.

OR you can edit the css property of table th to have white-space:nowrap

Upvotes: 0

Akshay
Akshay

Reputation: 14348

The easiest way to do this will be to add white-space:nowrap to the th, so that the words won't get splitted up. You should however add some responsiveness to the table.

.table td,
.table th {
  border-top: none! important;
  padding-left: 3%;
}

.table thead th {
  border-bottom: none! important;
  white-space: nowrap;
}

.table td.left {
  padding-right: 32%;
}

.dropdown a {
  color: #676767;
  font-weight: bold;
  font-size: 14px;
}

.dropdown li {
  padding-left: 20px;
}

.dropdown li:hover {
  background-color: #EDEDED;
}

.body-manage-attendees {
  width: 100% !important;
}

.body-manage-attendees tbody tr:hover {
  background-color: #EDEDED;
}

.body-manage-attendees .number {
  padding-left: 2%;
  padding-right: 6%;
}

.body-manage-attendees .table1 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .table2 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .status {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right-bill {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
  padding-left: 1%;
  text-align: center;
  border: 1px solid white;
  color: black;
}

.body-manage-attendees .right-unapid {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #10314C;
}

.square {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  margin-right: 5%;
  height: 15px;
  width: 15px;
  vertical-align: middle;
}

.square.white {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  background-color: white;
  height: 15px;
  margin-right: 10%;
  width: 15px;
  vertical-align: middle;
}

.right-itemswaiting span {
  vertical-align: middle;
  padding-left: 1%;
}

.table td,
.table th {
  border-top: none! important;
  padding-left: 3%;
}

.table thead th {
  border-bottom: none! important;
}

.table td.left {
  padding-right: 32%;
}

.right-itemswaiting {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.right-itemsreceived {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.body-manage-attendees tbody tr:hover {
  background-color: #EDEDED;
}

.body-manage-attendees .number {
  padding-left: 2%;
  padding-right: 6%;
}

.body-manage-attendees .table1 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .table2 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .status {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right-bill {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
  padding-left: 1%;
  text-align: center;
  border: 1px solid white;
  color: black;
}

.body-manage-attendees .right-unpaid {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
  padding-left: 1%;
  color: white;
  text-align: center;
  background-color: #10314C;
}

.body-manage-attendees .right-itemswaiting {
  padding-left: 1%;
  text-align: center;
  color: white;
  border: 1px solid white;
  background-color: #10314C;
}

.body-manage-attendees .right-unpaid {
  padding-left: 1%;
  color: white;
  background-color: #1173B7;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="table-responsive body-manage-attendees">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="left">Amanda Doe</td>
        <td class="number1">250</td>
        <td class="table1">2</td>
        <td class="right-bill">Bill</td>
      </tr>
      <tr>
        <td class="left">Andy Doe</td>
        <td class="number1">14</td>
        <td class="table1">1</td>
        <td class="right-bill">Bill</td>
      </tr>

    </tbody>
  </table>
</div>

Upvotes: 2

Josh Mein
Josh Mein

Reputation: 28645

You could set a min-width of the table td and th.

.table td,
.table th {
    border-top: none! important;
    padding-left: 3%;
    min-width:140px;
}

You may have to tweak the actual value applied to min-width. This will prevent the columns from taking up less than the set width, but will not restrict the columns to take up only that amount of space.

I would also consider applying a different min-width per column since the Number column will require around 140px but the Table column only needs about 80px. This will leave more space available for the Name.

Upvotes: 1

Greg McMullen
Greg McMullen

Reputation: 1019

It seems as though you have two options that immediately come to mind.

  1. Use a responsive table on mobile, so that the table width isn't compromised.
  2. Resize your columns with media queries to a point where the name and icon's don't interfere with each other's spacing and the table is still legible.
    1. Alternatively, resize your header fonts on mobile.

Using table-responsive

Surround your table with <div class="table-responsive"> to ensure responsiveness.

Using CSS Media Queries

Since you are using Bootstrap 4, I'll keep it as "mobile-first."

th {
    font-size: 14px; // Smallest font size you want them to render
}
@media (min-width: 768px) {
    // After the screen is at least 768px wide, use larger font size
    // alter the min-width as many times as needed or appropriate
    th{
      font-size: 16px;
    }
}

This is basically what you would do inside of your CSS. Maintain the mobile view first, and build up to the larger display sizes.

Edit 2

Playing around with the styles, removing the left/right padding on .table td, .table th seemed to fix the icon issue. You might just want to work on adjusting the column padding for mobile views.

Upvotes: 2

Related Questions