# DashBoard Data with Icons

**URL:** <https://forums.knack.com/t/dashboard-data-with-icons/9946>\
**Category:** Get Answers\
**Created:** [May 29, 2018, 1:28am UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946 "2018-05-29T01:28:44Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Admin77602](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/admin77602/32/223_2.png) [@Admin77602](https://forums.knack.com/u/Admin77602)\
**Post date:** [May 29, 2018, 1:28am UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/1 "2018-05-29T01:28:44Z")

</div>

Has anyone created a&nbsp;DASHBOARD similar to this example? If not&nbsp;would someone be willing to develop something similar for a reasonable fee?&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![StefanB94683](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@StefanB94683](https://forums.knack.com/u/StefanB94683)\
**Post date:** [February 6, 2020, 2:59pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/2 "2020-02-06T14:59:11Z")

</div>

Hi,

&nbsp;

How can I achieve this? It isn't really clear to me. Hope someone can help me. Thanks.

---

<div class="post-metadata">

**Author:** ![Johnny\_Appknowledged\_UK](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/johnny_appknowledged_uk/32/2898_2.png) [@Johnny\_Appknowledged\_UK](https://forums.knack.com/u/Johnny_Appknowledged_UK)\
**Post date:** [July 15, 2018, 7:46pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/3 "2018-07-15T19:46:25Z")

</div>

Yes sure all you need to do is the follow

First you will need to make sure they have a margin and float left

.kn-content #view\_\*\*\*\* section.columns {

float:left;  
 margin: 10px;  
}

then change the size of each column from max width

.kn-content #view\_\*\*\*\* .kn-details-column{  
 height: 255px;  
 min-width: 370px;   
 max-width: 200%;

}

Ping me a email if you need more help&nbsp;

jonathan.mart.[parsons@gmail.com](mailto:parsons@gmail.com)

---

<div class="post-metadata">

**Author:** ![BobHafemei77344](https://avatars.discourse-cdn.com/v4/letter/b/a587f6/32.png) [@BobHafemei77344](https://forums.knack.com/u/BobHafemei77344)\
**Post date:** [July 13, 2018, 2:30pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/4 "2018-07-13T14:30:04Z")

</div>

Hi Jonathan,

&nbsp;

Could you share your code to see how you accomplished this?

&nbsp;

Thanks,

&nbsp;

Bob

---

<div class="post-metadata">

**Author:** ![Sunny\_Singla](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/sunny_singla/32/1007_2.png) [@Sunny\_Singla](https://forums.knack.com/u/Sunny_Singla)\
**Post date:** [May 29, 2018, 9:03pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/5 "2018-05-29T21:03:53Z")

</div>

Hello Jonathan ,

&nbsp;

I just not follow what he said . I see the requirements .&nbsp;

May be you are good in CSS.

No Problem.&nbsp;

&nbsp;

Thanks&nbsp;

Sunny Singla

---

<div class="post-metadata">

**Author:** ![Johnny\_Appknowledged\_UK](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/johnny_appknowledged_uk/32/2898_2.png) [@Johnny\_Appknowledged\_UK](https://forums.knack.com/u/Johnny_Appknowledged_UK)\
**Post date:** [May 29, 2018, 8:58pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/6 "2018-05-29T20:58:31Z")

</div>

Hi Sunny,

I think as I read the request that it only needs css as the request only refers to the styling and does not mention any custom filtering. In the example there it shows a count for what I can see on each card style a single record for seperate objects.

If you create seperate details sections in the page buider and then custom wrap the columns by percentage then the count for seperate objects can be added to each in the builder.

Perhaps we can learn something off eachother

---

<div class="post-metadata">

**Author:** ![Sunny\_Singla](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/sunny_singla/32/1007_2.png) [@Sunny\_Singla](https://forums.knack.com/u/Sunny_Singla)\
**Post date:** [May 29, 2018, 8:38pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/7 "2018-05-29T20:38:28Z")

</div>

Hi Jonathan ,

Yes Right It required Both as i ask initially.&nbsp; &nbsp;

But knack has some limitation to show data up to 2 or 3 level.&nbsp;

But it's up to you if you face that then you will agree .&nbsp;

JavaScript is a&nbsp;Programming Language. Knack also use lot's of JavaScript.

&nbsp;

I understand it's not good for visual change but for data it required defiantly as per my thinking .

&nbsp;

Thanks&nbsp;

Sunny Singla&nbsp;&nbsp;

---

<div class="post-metadata">

**Author:** ![Johnny\_Appknowledged\_UK](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/johnny_appknowledged_uk/32/2898_2.png) [@Johnny\_Appknowledged\_UK](https://forums.knack.com/u/Johnny_Appknowledged_UK)\
**Post date:** [May 29, 2018, 8:30pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/8 "2018-05-29T20:30:48Z")

</div>

Hi Sunny,&nbsp;

Agreed!! javascript can only be used when all resourses in function form knack have been explored. Adding further filters for the data count or equasion might be needed and therefore javascript added. However this seems to me to be more about the visual change rather than the any custom filtering for records maybe it's both.

For any visual changes like a bootstrap layout I still don't think javascript is the best way.

Thanks

&nbsp;

---

<div class="post-metadata">

**Author:** ![Sunny\_Singla](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/sunny_singla/32/1007_2.png) [@Sunny\_Singla](https://forums.knack.com/u/Sunny_Singla)\
**Post date:** [May 29, 2018, 5:50pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/9 "2018-05-29T17:50:25Z")

</div>

JavaScript is use where Knack fail to provide data .&nbsp;

---

<div class="post-metadata">

**Author:** ![Sunny\_Singla](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/sunny_singla/32/1007_2.png) [@Sunny\_Singla](https://forums.knack.com/u/Sunny_Singla)\
**Post date:** [May 29, 2018, 5:49pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/10 "2018-05-29T17:49:48Z")

</div>

Hello Jonathan ,

&nbsp;

Yes defiantly i use but in this type of card we need some javascript functionality to get that field.&nbsp;

But everything is not connected sometime .&nbsp; &nbsp;Like New Comments , New Tasks , New Orders etc .&nbsp;

&nbsp;

Thanks

Sunny Singla&nbsp;

---

<div class="post-metadata">

**Author:** ![Johnny\_Appknowledged\_UK](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/johnny_appknowledged_uk/32/2898_2.png) [@Johnny\_Appknowledged\_UK](https://forums.knack.com/u/Johnny_Appknowledged_UK)\
**Post date:** [May 29, 2018, 3:28pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/11 "2018-05-29T15:28:10Z")

</div>

Hi sunny, cant you use the equation or count feilds to show the number of records.

Its just my opinion but using to much javascript for features that exist might not be effciant.

As for the icons these can be added via css many different ways

---

<div class="post-metadata">

**Author:** ![Sunny\_Singla](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/sunny_singla/32/1007_2.png) [@Sunny\_Singla](https://forums.knack.com/u/Sunny_Singla)\
**Post date:** [May 29, 2018, 2:13pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/12 "2018-05-29T14:13:11Z")

</div>

Hmm Great but i think only using CSS everything is not possible, but if someone can do then Great .

There are numbers in Icons which is fetch using JavaScript .

Regards,

Sunny Singla

[ssingla1985@gmail.com](mailto:ssingla1985@gmail.com)&nbsp;

+919855089359

&nbsp;

---

<div class="post-metadata">

**Author:** ![Johnny\_Appknowledged\_UK](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/johnny_appknowledged_uk/32/2898_2.png) [@Johnny\_Appknowledged\_UK](https://forums.knack.com/u/Johnny_Appknowledged_UK)\
**Post date:** [May 29, 2018, 2:05pm UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/13 "2018-05-29T14:05:21Z")

</div>

Hi I did exactly this and the results was great. Id recommend only using css for this if im honest as javascript for visual stuff like this doesnt work well as it loads after the page is renderd. Even used pecentages to resize and float left the cards.

Drop me a email at [jonathan.mart.parsons@gmail.com](mailto:jonathan.mart.parsons@gmail.com)

---

<div class="post-metadata">

**Author:** ![Sunny\_Singla](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/sunny_singla/32/1007_2.png) [@Sunny\_Singla](https://forums.knack.com/u/Sunny_Singla)\
**Post date:** [May 29, 2018, 4:16am UTC](https://forums.knack.com/t/dashboard-data-with-icons/9946/14 "2018-05-29T04:16:36Z")

</div>

Hello Admin,

&nbsp;

You can contact me i have done this type of designing in knack using custom css and javascript .

&nbsp;

Regards,

Sunny Singla

[ssingla1985@gmail.com](mailto:ssingla1985@gmail.com)

+919855089359
