Oracle APEX 21.1移动端优化：按钮拉伸与单选组适配问题

1. 按钮在X Small断点动态拉伸（100%宽度） #

APEX原生的「拉伸」设置是全局生效的，要实现仅在<640px断点下拉伸，需用自定义CSS配合静态类：

• 步骤1：给目标按钮添加静态CSS类
  在按钮属性面板的「CSS类」字段中，输入mobile-stretch-btn。
• 步骤2：添加自定义媒体查询CSS
  进入应用的「全局CSS」或页面级CSS，插入以下代码：

  @media (max-width: 639px) {
      .mobile-stretch-btn {
          width: 100% !important;
          display: block !important;
          margin-bottom: 0.6rem; /* 可选，优化移动端按钮间距 */
      }
  }
  

  这段代码会在屏幕宽度≤639px时，强制将带有mobile-stretch-btn类的按钮设为100%宽度。

2. 单选组移动端宽度及胶囊样式调整 #

修复50%宽度问题 #

如果单选组在<640px时被限制为50%宽度，可通过CSS强制重置：

@media (max-width: 639px) {
    .apex-item-radio-group {
        width: 100% !important;
    }
    /* 若单选组是行内布局，让每个选项占满一行（可选） */
    .apex-item-radio-group .apex-item-option {
        width: 100% !important;
        margin-bottom: 0.4rem;
    }
}

转为移动端胶囊样式 #

要实现胶囊状单选组，需隐藏原生单选框，用伪元素模拟胶囊效果：

• 步骤1：给目标单选组添加静态CSS类mobile-capsule-radio。
• 步骤2：添加以下CSS代码：

  @media (max-width: 639px) {
      .mobile-capsule-radio {
          width: 100% !important;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
      }
      .mobile-capsule-radio input[type="radio"] {
          position: absolute;
          opacity: 0;
          pointer-events: none;
      }
      .mobile-capsule-radio label {
          padding: 0.5rem 1.2rem;
          border: 1px solid var(--ut-button-border-color); /* 继承主题边框色 */
          border-radius: 2rem;
          cursor: pointer;
          transition: all 0.2s ease;
          user-select: none;
      }
      .mobile-capsule-radio input[type="radio"]:checked + label {
          background-color: var(--ut-button-background-color); /* 继承主题主色 */
          color: var(--ut-button-text-color);
          border-color: var(--ut-button-background-color);
      }
  }
  

  这段代码会在移动端将单选组转为胶囊样式，同时确保宽度为100%，样式自动适配当前主题配色。

内容的提问来源于stack exchange，提问作者McRivers