Ionic App ActionSheet布局问题

使用 $ionicActionSheet的时候界面不像Ihpnoe手机那样显示的整齐,但是在电脑浏览器里面却是好的,原因还是Ionic自带css的问题,网上的答案是ionic.min.css/ionic.css对

android进行了原生设置,如果不需要,去掉相关的css即可。

/*
.platform-android .action-sheet-backdrop.active {
  background-color: rgba(0, 0, 0, 0.2); }

.platform-android .action-sheet {
  margin: 0; }
  .platform-android .action-sheet .action-sheet-title,
  .platform-android .action-sheet .button {
    text-align: left;
    border-color: transparent;
    font-size: 16px;
    color: inherit; }
  .platform-android .action-sheet .action-sheet-title {
    font-size: 14px;
    padding: 16px;
    color: #666; }
  .platform-android .action-sheet .button.active,
  .platform-android .action-sheet .button.activated {
    background: #e8e8e8; }

.platform-android .action-sheet-group {
  margin: 0;
  border-radius: 0;
  background-color: #fafafa; }

.platform-android .action-sheet-cancel {
  display: none; }

.platform-android .action-sheet-has-icons .button {
  padding-left: 56px; }
*/

去掉前:

去掉后:

时间: 2024-11-05 13:41:00

Ionic App ActionSheet布局问题的相关文章

161914、ionic指令简单布局

1) 添加引用类库(ionic样式和ionic js文件) 2) 标题栏,页脚栏,内容区 3) Js引入ionic类库,添加页面操作方法和对象 4) 数据初始化 5) Html页面绑定方法和对象 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q

[Ionic2] Device Interaction in an Ionic App with Cordova Plugins

In this lesson, we are going to learn how to interact with native components through Cordova plugins. We will walk through how to add a Cordova plugin to our application and use it to interact with our native device. In this case, we are going to ins

Ionic app 上传图片之webApi接口

App上传图片对应的webApi服务端是怎么处理的呢? using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using System.Linq; using System.Net; using System.Net.Http; using System.Threading; using System.Threading.Tasks; using System.Web;

Ionic App之国际化(3) json数组的处理

接上一篇Ionic App之国际化(2) json数组的处理 之后,如何处理json数据长度的问题,目前的一个折中方法是翻译长度字段. 多语言文件内容: "MyLa": { "length" : "2", "values":[ { "name" : "Huanhuan","value" : "1" }, { "name" : &

Ionic app升级插件开发

终于走到了写插件的这个地方了,插件的过程: 1.安装plugman插件,管理我们的程序 npm install -g plugman 2.创建插件项目appUpgrade,cd 到你的目标目录下,执行如下命令: plugman create --name appUpgrade --plugin_id com.caseStudy.plugin --plugin_version 0.0.1 其中com.caseStudy.plugin是java类的包名,以后会引用到. 执行完成后,目录下会看到新建了

Framework7学习笔记之App基本布局

一:App基本布局 用Framework7搭建的app,一般在index.html中引入所需的样式文件与js文件,并且搭建起整体的基本视图框架. 二:跨平台.通用型布局 <!DOCTYPE html> <html> <head> <!--1:4个meta标签,指定编码格式.界面宽高.app性质.状态栏颜色等参数--> <meta charset="utf-8"> <meta name="viewport&quo

【Android Studio安装部署系列】二十八、Android Studio查看其它APP的布局结构

概述 日常使用别家的APP过程中,会遇到一些比较好看的布局,这时候我们就想学习一下别人的布局结构,以便参考. (1)手机连接电脑.设置手机为USB调试模式 参考<[Android Studio安装部署系列]七.真机运行项目> (2)运行Android Studio,打开 Tools--Android--Android Device Monitor 注意:android Studio3.1开始只能通过命令行的方式启动Android Device Monitor. 双击sdk安装目录/tools/

ionic 之 基本布局

目录: 简介 Hybrid vs. Others ionic CSS框架 基本布局 布局模式 定高条块:.bar .bar : 位置 .bar : 嵌入子元素 .bar : 嵌入input 内容:.content和.scroll-content Hybrid vs. Others 要开发手机App,目前有三种方式: 原生/Native:使用原生SDK开发App.优点不用说,当你有足够的资源,这是最理想的方式:缺点是对不同的 平台要分别开发,成本高.周期长. 原生脚本/NativeScript:将

ionic app 真机调试

ionic项目开发完成之后需要在手机端测试效果,但是如果出现问题又不知道问题在哪,需要借助chore浏览器打印查看的问题 需要用新版的chore浏览器(至少要v.45以上) 1.将app安装到手机并打开手的开发者模式,将你的app在手机上允许手机调试模式: 2.在浏览器打开chrome://inspect/#devices网址,进去选择打开你的手机,第一次可能需要FQ,此后就不需要了, 3.点开之后就是相当于在pc端测试了,在手机上的操作,报错都会在浏览器的console里面打印