小编Pie*_*Bie的帖子

我使用Flexbox为应用程序创建了响应式布局.布局要求左侧是可折叠菜单,中间是一个带有标题和正文的块,右侧是可切换的帮助窗格(还有更多内容,但这是基本结构).

左侧菜单有两种状态:180px宽或80px宽.帮助窗格隐藏或占用180px.中间的盒子占据了剩下的空间.Flexbox就像一个魅力.

当我使用滚动div时,麻烦就开始了white-space: nowrap.我有一堆需要在水平滚动条中显示的项目,所以我有一个列表div与项目,设置为overflow:auto和white-space: nowrap.

通常这就像一个魅力,但现在它打破了我的flex布局.滚动器不会占用父(flex)div的宽度,而是使div更宽,从而将帮助窗格推出界限.

以下小提琴说明了这个问题:

http://jsfiddle.net/PieBie/6y291fud/

您可以通过单击菜单栏中的切换帮助来切换帮助窗格.通过单击菜单中的列表空白切换来重新创建问题,这将切换white-space: no-wrap列表的CSS属性.如果帮助窗格已打开,您可以看到它被推出界限.

底部列表是我想要实现的,但我希望它是其父级的全宽.

我可以在Chrome,Firefox,Opera,Vivaldi和Edge中重现这个问题.Internet Explorer 11播放效果很好(°_°).我更喜欢纯CSS解决方案(SCSS也是一个选项),但如果需要,我可以使用JS.

$('#nav-toggle').on('click',function(){
	$(this).parent().toggleClass('collapsed');
});
$('#help-toggle').on('click',function(){
	$('#help-pane').toggleClass('visible');
});
$('#list-toggle').on('click',function(){
	$('#list').toggleClass('nowrap');
});

body,html{width:100%;height:100%;overflow:hidden;}

#body{
  display:flex;
  flex-flow:row nowrap;
  position:absolute;
  top:0;
  left:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background-color:#abc;
  overflow:hidden;
}

#shell{
  flex: 1 1 auto;
  display:flex;
  flex-flow:row nowrap;
  position:relative;
  width:100%;
  min-height:100%;
}

  #left{
    flex: 0 0 180px;
    min-height:100%;
    min-width: 0;
    background:lightblue;
  }
  #left.collapsed{
    flex: 0 0 80px; …

我正在使用Cordova进行ios开发.我使用iframe在我的应用中打开外部链接.外部页面大小很大,为了适应屏幕我使用-webkit-transform scale属性.一切都很好,它适合屏幕.但问题是,当我选择文本输入时,输入光标(插入符号)开始在文本字段下方的某处闪烁.

请看代码:

index.html的:

<div data-role="page" id="personDetailPage">
        <div data-role="header" class="header" >
            <div class="logo"  id="mainScreenLogo"> <img src="" id="headerLogoImg" /> </div>
            <h1 id="personDetailTitle"class="tittle">Person Detail</h1>
            <a href="#main" class="ui-btn-right headerHomeIcon"  data-transition="slide" onclick="formHomeButtonClick();"> <img src="homeIcon.png" class="headerHomeImg" /> </a>    
        </div>
        <div id="iFrameDiv" scrolling="no"> 
            <iframe id="formframe" width="280" height="150" src="form.html" onLoad='fixiFrame();' frameborder="0" ></iframe>  
        </div>

    </div>

form.html:

<div data-role="page" id="personRegistration" scrolling="no"><br>
        Please Enter the Person Details
        <form id="registrationForm" method="POST" action="https://abe.com/Registration.aspx" onsubmit="return checkform();" >
            <div data-role="fieldcontain" class="ui-hide-label">
                <input type="text" name="name" id="name" value="" placeholder="Name" />
            </div>
            <div data-role="fieldcontain" class="ui-hide-label">                <input type="text" …

我想知道有没有办法找出内联CSS样式的来源.正如您在下面的图片中看到的,我有一个使用JavaScript生成的内联样式的元素.有时我的代码似乎打破并将宽度设置为0px,使div不可见.

我查看了所有的JS文件,但似乎无法找到错误.

有没有办法找到正确的文件和行,就像开发工具为css文件做的那样？