Action¶

Please specify clearfix class for parent element, and class for float for child element.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui" %>

<div class="imui-box-operation cf (1)">
  <div class="float-L (2) pl-10 (3)">
    <imui:textbox />
    <imui:button value="Search" />
    <imui:button value="Clear" />
  </div>
</div>

Screen image

For JSP coding, once float: left is put to the first child element, it is inherited until it is cleared, but it should be put to each child element at screen development. (pl-10 cannot be correctly obtained. div will be made to 100%)

Specification¶

• Followings will be written in blue character (when the mouse is placed on it, it will turn to light blue + under score).

  • a tag class without specification

  • Following table

    • imui-table-box
    • imui-table table
    • imui-table-calendar
    • imui-table-sort
    • imui-table-mixed
    • imui-table-inner
    • imui-form
    • imui-form-search-condition

  • td in the following table

    • imui-table-sort

Action¶

• If you want to change character link written in black to blue daringly, please specify <a class=”imui-accent”>.
• If you want to change character link written in blue to black daringly, please specify <a class=”imui-unaccented”>.

Reference：Process Icon/Process Link

Placing Title Bar/Tool Bar on Operation Box¶

<div Tool Box>
  <div Title Bar></div>
  <div Tool Bar></div>
  <div Contents></div>
</div>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui" %>

<div class="imui-box-toolbox (1) mt-20">
  <div class="imui-box-title (2) imui-box-toolbox-look (3)">
    <h3>This is H3</h3>
  </div>
  <div class="imui-toolbar-wrap">
    <div class="imui-box-toolbar-inner">
      <ul class="imui-list-box-toolbar">
        (omitted)
      </ul>
    </div>
  </div>
  <div class="imui-box-toolbox-content">
    <!-- Simple Search -->
    <imui:textbox class="wd-225px" placeholder="Please enter user name and user KANA" autofocus="true" />
    <imui:button value="Search" class="imui-button" />
    <imui:button value="Clear" class="imui-button" />
  </div>
</div>

Placing Tool Bar on imuiDialog¶

Drawing 100px Solid Line for left-border¶

.new_class {
  border-left-width: 100px;
  border-left-style: solid;

  ...
}

Solid line of 100x is displayed at <div class="new_class imui-theme-border-color"> left side. Theme color should be paled out.</div>

Sample Code¶

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="imart" uri="http://www.intra-mart.co.jp/taglib/core/standard" %>

<div class="imui-box-supplementation">
  <span class="im-ui-icon-common-24-confirmation float-L"></span>
  <p class="imui-pgh-section" style="padding-left: 30px;">
    <imart:message id="CAP.Z.IWP.SYSTEM.INITIALSETTINGS.MESSAGE" />
  </p>
</div>

Screen Image