Posts

Showing posts with the label CSS

AngularJS: Export Json object to Excel using AlaSQL

Hello, I have spent significant time developing AngularJS and Angular 2 applications. But this requirement is quite new to me. Well, user wants to export to excel feature on one of our application page where we are using filtered data based upon some parameters. The design decision was on me whether to choose server side function to convert Json object in to CSV format and then export it to excel. But I decided to choose another approach, not to involve server in exporting a Json data. I was not aware about ALASQL but later explored and found its very useful for me to implement this solution. Here I am explaining how to implement it. What you need to import : ALASQL js-xlsx Just an intro about these two libraries: AlaSQL is an open source SQL database for Javascript with a strong focus on query speed and data source flexibility for both relational data and schemaless data. It works in your browser, Node.js, and Cordova. This library is designed for: Fast in-memory SQL data pro...

AngularJS: Bind UI Select selection sequentially

Image
Hello, I felt lucky to work with angularJS with the integration with SharePoint(as backend) in my recent project. There was a requirement to have two drop-downs on a single page application where on selection of one; other drop-down value will be automatically filtered.  I am going to share with you guys that how I have implemented.  I understand that this may not be Ideal way of doing it but I am sure that it is quickest solution that I did in code to achieve this requirement. HTML: The below html will generate two dropdowns and populate with country and states data. <h3>Countries</h3> <ui-select ng-model="ctrl.country.selected" name="country" theme="bootstrap" title="Select a Country" > <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match> <ui-select-choices repeat="country in ctrl.countries | filter: $select.search"> <span...

CSS Trick: Create tag icon with dynamic text width using Pure CSS

Image
Hi Guys, If you are searching for a tag icon which can be used to show few keywords on any page. Then this is the place where you can find a very simple trick to generate it with in few minutes. The icon created using this CSS trick has feature that it can take dynamic width based upon the text width. Below image is the example how it will rendered:     Click here for the Demo . Basics: Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles . For CSS triangles you need to manipulate borders of an element that has zero height and width. CSS circle is simpler. All you need is a square element with rounded corners set to at least half the size of the element. The border radius will then merge into a circle. HTML I usually markup tags with unordered list. So the markup is fairly simple: <ul class="tags"> <li>CSS</li> <li>HTML</li> <li>Mohit</li> <li>Vashishtha</li> <li>SharePo...