albert's blog: HTML

Showing posts with label HTML. Show all posts

2019/04/07

[HTML] Using DATA URI to show image in HTML

Here has a simple example to demonstrate how to use base64 string to show image in HTML instead of physical image file.

Steps
Step 1. Find a picture and upload to https://www.base64-image.de/

Step 2. Copy base64 string

Step 3. Go to https://plnkr.co/ to do test

Here has an url to demonstrate

https://plnkr.co/edit/xt2W5IFQgvqgOwwmgHUT?p=preview

2017/10/11

[CSS] Font Size Problem in iOS

Problem
I am testing my web page in every browser (ex. Chrome, Firefox, IE, Safari, etc.), iOS and Android. Each platform is working fine except iOS.

The problem is the font size of the text in specific table cell is larger than other.

How-To
Add the following code in my CSS file is working:

body {
    -webkit-text-size-adjust: 100%;
}

Reference
[1] https://stackoverflow.com/questions/2545542/font-size-rendering-inconsistencies-on-an-iphone

2017/03/02

[HTML] How to arrange multiple elements in the same row

Problem
In this dialog, I hope the drop down list should be at the right side of the radio button, not in the new line.

The code snippet looks like:

<div class="row">
   <div class="col-sm-12">
      <div class="form-group" style="display:inline">
         <label>即時應用系統異常追蹤整合</label>
         <div>
            <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='0'" (click)="newProject.sentryOption='0'">立即建立專案關聯
            <span style="padding-left:20px">
            <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='1'" (click)="newProject.sentryOption='1'">選擇既有的關聯
            </span>
            <span style="padding-left:5px">
               <select class="form-control" name="sentryProjectId" [(ngModel)]="newProject.sentryProjectId" [style.width.px]="50" *ngIf="newProject.sentryOption==='1'"
               >
               <option value="" selected> 請選擇 </option>
               <option *ngFor="let sp of sentryProjects" [ngValue]="sp.slug">{{sp.slug}}</option>
               </select>
            </span>
         </div>
      </div>
   </div>
</div>

How-to
You can use CSS to fulfill this requirement:

display:inline-block

Just add display:inline-block; to this drop down list's style, the updated code snippet is as bellowing:

<div class="row">
   <div class="col-sm-12">
      <div class="form-group" style="display:inline">
         <label>即時應用系統異常追蹤整合</label>
         <div>
            <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='0'" (click)="newProject.sentryOption='0'">立即建立專案關聯
            <span style="padding-left:20px">
            <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='1'" (click)="newProject.sentryOption='1'">選擇既有的關聯
            </span>
            <span style="padding-left:5px">
               <select class="form-control" name="sentryProjectId" [(ngModel)]="newProject.sentryProjectId" [style.width.px]="50" *ngIf="newProject.sentryOption==='1'"
               style="display:inline-block;">
               <option value="" selected> 請選擇 </option>
               <option *ngFor="let sp of sentryProjects" [ngValue]="sp.slug">{{sp.slug}}</option>
               </select>
            </span>
         </div>
      </div>
   </div>
</div>

See...the radio buttons and drop down list are in the same row.

Reference
[1] https://www.quora.com/I-want-to-put-two-divs-in-HTML-in-the-same-line-but-one-always-comes-under-the-other-one-What-should-I-do
[2] http://crunchify.com/basic-html-how-do-you-create-blank-space-in-html/

2015/11/02

How to add more spaces between radio button and its text?

Problem
Our customer asked to add more spaces between radio button and its text

Original code snippet:

<div class="row">
  <div class="col-sm-12">
      <div class="col-sm-6 ">
          <label class="control-label label-width-4 text-right">預算階段</label> 
          <input type="radio" value="P0" 
                 data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusP0">
                 {{budgetStatusP0Text}}
          <input type="radio" value="P1" 
                 data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusP1">
                 {{budgetStatusP1Text}}
          <input type="radio" value="F0" 
                 data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusF0">
                 {{budgetStatusF0Text}}
          <input type="radio" value="F1" 
                 data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusF1">
                 {{budgetStatusF1Text}}
          <input type="radio" value="F2" 
                 data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusF2">
                 {{budgetStatusF2Text}}
      </div>
      
      <div class="col-sm-6 ">
      </div>
  </div>
</div>

How-To
Modify the margin value for each input radio element.
i.e. margin:0px 0px 0px 6px;

top margin is 0px
right margin is 0px
bottom margin is 0px
left margin is 6px

Check the following updated code snippet:

<div class="row">
  <div class="col-sm-12">
      <div class="col-sm-12 ">
          <label class="control-label label-width-4 text-right">預算階段</label> 
          <input type="radio" value="P0" 
                 data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusP0"
                 style="margin: 0px 0px 0px 6px">
                 {{budgetStatusP0Text}}
          <input type="radio" value="P1" 
                 data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusP1"
                 style="margin: 0px 0px 0px 6px">
                 {{budgetStatusP1Text}}
          <input type="radio" value="F0" 
                 data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusF0"
                 style="margin: 0px 0px 0px 6px">
                 {{budgetStatusF0Text}}
          <input type="radio" value="F1" 
                 data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusF1"
                 style="margin: 0px 0px 0px 6px">
                 {{budgetStatusF1Text}}
          <input type="radio" value="F2" 
                 data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusF2"
                 style="margin: 0px 0px 0px 6px">
                 {{budgetStatusF2Text}}
      </div>
  </div>
</div>

Check result:

Reference
[1] http://www.w3schools.com/cssref/pr_margin.asp

2013/08/28

Utilize ime-mode property to Control Input Method Editor

Problem
Customer asked to control textfield1 can only fill in alphanumeric, textfield2 can fill in alphanumeric and Tranditional Chinese

Solution
We can use ime-mode CSS property to controls the state of the input method editor for text fields.

The default value of ime-mode property is auto, it means "no change is made to the current input method editor state".

If you would like to disable input method editor to allow for numbers and alphabets only, set the property of ime-mode property to "disabled".

If you would like to activate input method editor to allow for numbers, alphabets, and Tranditional Chinese, set the property of ime-mode property to "active".

Demo

Pay attention to some properties do not be supported by specific browser.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode

2011/07/26

Controlling the width/height of the button

Problem

By default, the dimensions of the button is automatically set to the dimensions required to accommodate the content inside, such as an image. But my length of text is larger than the default width of button.

The html is as bellows:

Solution

There will often be times when you want to manually control this dimension to fit your design. By using another CSS declaration, you can. To control the width/height of the button, use the following style declaration:

Therefore, my html will be looked like this way