<div class="mdl-layout--large-screen-only mdl-layout__tab-bar mdl-js-
ripple-effect mdl-color--primary-dark ">
Aboutus
Technology
Outsourcing
Training
Techblog
Careers
Contactus
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-
ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--
accent" id="add">
<i class="material-icons" role="presentation">add</i>
<span class="visuallyhidden">Add</span>
</button>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">MaterialDesignLite</span>
<nav class="mdl-navigation">
Overview
Features
Details
Technology
FAQ
</nav>
</div>
Question: mdl-layout__tab-bar tabs are synced with section id(example:#Aboutus ,#Technology),
Where as mdl-drawer needs separate .html file for each content,it is not working with section id (example:#Aboutus ,#Technology),is any possible ways to achieve it,rather creating separate html file.
Thanks
<div class="mdl-layout__tab-panelmdl-layout__drawer" id="Techblog">
<section>
<div>
<div>
<div class="techblogimage">
<img class="article-image" src="images/techblog/3.png" border="0" alt="">
</div>
</div>
</div>
</section>
</div>
Finally i got a solution..
adding mdl-layout__drawer in sectionblock
This will help few of them who got stuck in this..
Related
I have a very basic search page with dropdowns and text boxes.
The snippet looks like following
<div class="container" style="width: 100%;">
<div class="row">
<div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
<span class="input-group-addon" id="basic-addon2">Business Name</span>
#Html.LabelFor(m => m.Parameters.BusinessName, new { style = "display: none;" })
#Html.TextBoxFor(m => m.Parameters.BusinessName, new { #maxlength = 50, #class = "form-control", #placeholder = "Enter a business name", #aria_describedby = "basic-addon2", #style = "width:350px;" })
</div>
<div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
#Html.LabelFor(m => m.Parameters.BusinessNameSearchType, new { style = "display: none;" }) #Html.DropDownListFor(m => m.Parameters.BusinessNameSearchType, searchtypes, new { #class = "form-control", #style = "width:150px;" })
</div>
</div>
</div>
And on the page this snippet looks like following.
I use bootstrap 3.3.5 and jQuery 2.1.4.
It works perfectly fine on desktop, android tablet, and android phone, when I use Chrome as a browser.
However, both textbox and dropdown break completely (break as becoming completely unusable) when I try viewing it on the newer versions of iPhone ios Chrome browser.
Interestingly enough, when I tried to emulate it in Chrome as the iPhone X, it worked fine as well.
I am completely new to the whole ios topic. Doing some basic research led me to believe that older versions of bootstrap/jquery might be the issue.
Trying to update to bootstrap 4, which also leads to updating jquery to 3.0.0, completely breaks the whole application, so I had to revert it back.
Before I dive too deep into fighting the whole bootstrap/jquery thing, can anyone please provide me any useful pointers to why ios is so picky? I want to get at least the basic understanding of what the problem is before I start digging into possible solutions.
I have added two example with help of (Bootstrap-4) as your posted instruction.1st - Break textbox and dropdown on mobile.2nd - Not break textbox and dropdown on both Desktop & Mobile.
You can check below snippet.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="py-3">
<div class="container l">
<div class="row">
<div class="col-md-12">
<h5>Textbox & Dropdown (Break on Mobile Screen)</h5>
</div>
<div class="col-md-8 my-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Business Name</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
</div>
</div>
<div class="col-md-4 my-2">
<select class="custom-select">
<option>Exact Match</option>
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
</div>
<br><br>
<div class="row">
<div class="col-md-12">
<h5>Textbox & Dropdown (Not break on Desktop/Mobile Screen)</h5>
</div>
<div class="col-8 my-2 pr-1 pr-md-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Business Name</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
</div>
</div>
<div class="col-4 my-2 pl-1 pl-md-3">
<select class="custom-select">
<option>Exact Match</option>
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
</div>
</div>
</div>
I'm getting black "bars" on I open modal's on android's chrome, as show on my attachments, well, this is my code, and I'm using bootstrap 4.1. Anyone can help me?.
<div class="modal fade" id="modalCombos" tabindex="-100" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Combos</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#foreach (var item in combosList)
{
<div class="row" style="margin-bottom:5px">
<div class="btn btn-danger col-12" onclick="addItem('#item.Nome', '#item.Valor.ToString("F")')">
#item.Nome - R$ #item.Valor.ToString("F")
</div>
</div>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
Change .fade.in opacity property on bootstrap.min.css from 1 to 0.99:
.fade.in{opacity:0.99}
Also try this on bootstrap.min.css:
.fade.in{opacity:1;-webkit-backface-visibility: hidden;}
When navigating the site http://emich.edu on Android devices (with any browser), the sticky mobile navigation menu sticks to the bottom of the page if one clicks through to another page, scrolls to the bottom of that page, and clicks the back button. A picture of the issue is attached.
This should not happen; the nav should always be under the site header. We are using Foundation 6.3 and have tried several other versions. We have even tried Foundation outside of this site with no extra markup, and the same result is produced. I can't seem to find any other threads that describe a similar problem. Could it be a problem with Android?
The phones we have tested use Android v. 7.0 and 6.0.1.
To be clear, this problem does not happen on Apple devices nor PCs.
<header class="wide-image">
<div class="brand front-top">
<div class="row top-row" data-equalizer="branding">
<div class="large-4 medium-12 small-12 columns logo-combine" data-equalizer-watch="branding">
<div class="front-title">
<img src="{{f:57957}}" alt="Eastern Michigan University logo" />
</div>
</div>
<div class="large-8 medium-12 show-for-large columns" data-equalizer-watch="branding">
<div class="row idrow front">
<div class="small-12 columns secondary-nav">
<xsl:copy-of select="ou:includeFile('/_resources/inc/site-search.inc')" />
<ul id="quick-links-top">
<xsl:copy-of select="ou:includeFile('/_resources/inc/quick-links.inc')" />
<li id="search-glass"><span class="visuallyhidden">Search</span><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
</div>
<div id="site-title" class="row">
<div class="small-12 columns">
<ouc:div label="site-name" button-text="Site Name" group="_Admin" path="{$ou:siteroot}/_site/inc/name.pcf">
<xsl:if test="$ou:action = 'pub' and $ou:siteroot != '/'"><xsl:copy-of select="ou:includeFile(concat($ou:siteroot,'/_site/inc/name.inc'))" /></xsl:if>
</ouc:div>
</div>
<xsl:if test="($ou:topnav!='off')">
<div class="small-12 columns skip-main-nav">
<a class="show-on-focus show-for-sr" href="#maincontent">Skip Global Navigation</a>
</div>
</xsl:if>
</div>
<div data-sticky-container="">
<div data-sticky="" data-top-anchor="site-title:bottom" data-options="marginTop:0;" style="width:100%">
<div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="large">
<button class="menu-icon" type="button" data-toggle="offCanvasLeft" aria-expanded="false" aria-controls="offCanvasLeft">
<div class="visuallyhidden">Open/Close Menu</div>
</button>
<div class="title-bar-title" data-toggle="offCanvasLeft">Search & Navigation</div>
</div>
<!-- If top nav, add bar -->
<xsl:if test="$ou:topnav='on' or $ou:topnav='true' or $ou:topnav='1' or $ou:topnav='yes'"><!-- Top nav is truthy? -->
<div id="main-nav">
<div class="row show-for-large collapse">
<div class="small-12 columns">
<nav class="menu-box {if ($ou:action != 'pub') then 'omni-primary-nav' else ''}"><!-- 'omni-primary-nav' class used to style nav list within OUC preview -->
<ouc:div label="top-nav" button-text="Navigation" group="_Admin" path="{$ou:siteroot}/_site/inc/navigation.pcf">
<xsl:if test="$ou:action = 'pub'">
<xsl:text disable-output-escaping="yes"><? echo $navigation->primaryMenu; ?></xsl:text>
</xsl:if>
</ouc:div>
</nav>
</div>
</div>
</div>
</xsl:if>
</div>
</div>
</div>
...a bunch of XSL
</header>
It seems by default, the elements aren't sticky for small screens.
Sticky for small screens can be turned on by adding
data-options="stickyOn:small;"
or
data-sticky-on="small"
To the element data-sticky attribute.
Seems the reason it isn't sticky by default on "small" is to "save real estate".
Methinks it is this bug. See the workarounds mentioned there. Moving discussion there...
I have the following element in a webpage:
<div id="pnNij" class="post" data-tag1="" data-tag2="">
<a class="image-list-link" href="http://imgur.com/gallery/pnNij" data-page="0">
<img alt="" src="./Imgur_ The most awesome images on the Internet_files/H7fZCNgb.jpg">
<div class="point-info gradient-transparent-black transition">
<div class="relative">
<div class="pa-bottom">
<div class="arrows">
<div title="like" class="pointer arrow-up icon-upvote-outline" data="pnNij" type="image" data-up="4212"></div>
<div title="dislike" class="pointer arrow-down icon-downvote-outline" data="pnNij" type="image" data-downs="502"></div>
<div class="clear"></div>
</div>
<div class="point-info-points" title="points">
<span class="points-pnNij">3,710</span>
<span class="points-text-pnNij">points</span>
</div>
</div>
</div>
</div>
</a>
<div class="hover">
<p>Seems like 2017 has it all...</p>
<div class="post-info">
album · 69,542 views
</div>
</div>
</div>
notice how the href is equal to http://imgur.com/gallery/pnNij.
However, when I use JSoup to extract elements from the page like this:
docImgur = Jsoup.connect("http://imgur.com/").get();
Elements links = docImgur.getElementsByClass("post");
The element is almost extracted properly, except the href attribute is equal to /gallery/pnNij/
Why does the href attribute not contain the full URL?
When you check the page source, you'll find
<a class="image-list-link" href="/gallery/WRzti" data-page="0">
...
</a>
So the href attribute is not absolute, which results in your expected results: /gallery/WRzti
Solution
Use the abs: attribute prefix.
Example
Document docImgur = Jsoup.connect("http://imgur.com/").get();
Elements links = docImgur.select("a[href].image-list-link");
for (Element element : links) {
System.out.println(element.attr("abs:href"));
}
Output
http://imgur.com/gallery/WRzti
http://imgur.com/gallery/tCnDJ
http://imgur.com/gallery/JIHYh
...
I have noticed strange thing - when I put ScrollableView into SwapView and I programmatically (after clicking on button) change view in SwamView and next give focus (click one elment in list) to list in ScrollableView, the first view appear under this one with list in ScrollableView which is currently main view (both are visible at the same time - one superimposed on the other). I use it in PhoneGap as a Android project. And the version of Dojo which I use is 1.9.
My code is:
<div id="view1" data-dojo-type="dojox/mobile/SwapView">
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='href:"page1.html", parseOnLoad: false, onLoad:NewClientForm.loadForm'></div>
</div>
<div id="view2" data-dojo-type="dojox/mobile/SwapView">
<div data-dojo-type="dojox.mobile.ContentPane" id="cview2" data-dojo-props='href:"page2.html", parseOnLoad: true'></div>
</div>
and the page2.html
<div id="offer_page">
<div class="pageLogo">
<img src="theme/images/logo.png" alt="" />
</div>
<header>
<h1 id="offer_page_client_name_header"> </h1>
</header>
<div id="new_client_nav_menu" class="pageNavMenu">
<div>menu</div>
</div>
<div id="new_client_nav_settings" class="pageNavSettings">
<div>set</div>
</div>
<div class="pageNavPrev">
<div id="offer_page_nav_prev" class="pageImageLink" data-dojo-type="dojox/mobile/Button" data-dojo-props='onClick: OfferPageForm.prevButton'><img src="theme/images/nav_prev.png" alt="" /></div>
</div>
<div class="pageNavNext">
<div id="offer_page_nav_next" class="pageImageLink" data-dojo-type="dojox/mobile/Button" data-dojo-props="onClick: OfferPageForm.nextButton"><img src="theme/images/nav_next.png" alt=""></div>
</div>
<ul data-dojo-type="dojox/mobile/TabBar" data-dojo-props='barType:"standardTab", center:false'>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='selected:true, moveTo:"tab1"'>Client data</li>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='moveTo:"tab2"'>Needs analysis</li>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='moveTo:"tab3"'>Offers</li>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='moveTo:"tab4"'>Simulations</li>
</ul>
<div id="tab1" data-dojo-type="dojox.mobile.View" class="tabView">
Client data:
</div>
<div id="tab2" data-dojo-type="dojox.mobile.View" class="tabView">
Needs analysis
</div>
<div id="tab3" data-dojo-type="dojox.mobile.View" class="tabView">
<div class="offersLeftPanel">
<div class="offersLeftPanelTableHeader">
<div class="offersLeftPanelTableDate">Creation date</div>
<div class="offersLeftPanelTableProduct">Product</div>
<div class="offersLeftPanelTableName">Name</div>
<div class="offersLeftPanelTableRisk">Risk Profile</div>
<div class="offersLeftPanelTableStatus">Status</div>
<div class="offersLeftPanelTableSigned">Signed</div>
<div class="offersLeftPanelTableActions">Actions</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="height: '88%'">
<ul data-dojo-type="dojox/mobile/EdgeToEdgeList">
<li data-dojo-type="dojox.mobile.ListItem" class="offersLeftPanelTableRow">
<div class="offersLeftPanelTableDate">2013-03-25 08:00</div>
<div class="offersLeftPanelTableProduct">iSave Target</div>
<div class="offersLeftPanelTableName">iSavetarget-Medium-1</div>
<div class="offersLeftPanelTableRisk">Neutral</div>
<div class="offersLeftPanelTableStatus">New</div>
<div class="offersLeftPanelTableSigned">No</div>
<div class="offersLeftPanelTableActions"></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem" class="offersLeftPanelTableRow">
<div class="offersLeftPanelTableDate">2013-03-25 08:00</div>
<div class="offersLeftPanelTableProduct">iSave Target</div>
<div class="offersLeftPanelTableName">iSavetarget-Medium-1</div>
<div class="offersLeftPanelTableRisk">Neutral</div>
<div class="offersLeftPanelTableStatus">New</div>
<div class="offersLeftPanelTableSigned">No</div>
<div class="offersLeftPanelTableActions"></div>
</li>
...
</ul>
</div>
</div>
<div class="offersRightPanel">
<div data-dojo-type="dojox/mobile/Button" class="offersOtherNeedsButton">Other uncovered needs</div>
<div class="offersBottomButtons">
<div data-dojo-type="dojox/mobile/Button" class="offersConsolidateButton">Consolidate offers and issue</div>
<div data-dojo-type="dojox/mobile/Button" class="offersIssueButton">Issue proposal</div>
</div>
</div>
</div>
<div id="tab4" data-dojo-type="dojox.mobile.View" class="tabView">
Simulations
</div>
page1.html looks very similar, but ther are no lists and ScrollableViews.
The most interesting thing is the fact that it occurs not every time and not on every devices on which I have a chance to test it (I tested it on Samsung Galaxy Tab 2? - here I have noticed this issue, Asus Transformer and one "no name").
Thanks in advance for any help.
The HTML in your page2.html seems malformed (the top-level is not closed). Besides that, the HTML you posted uses JavaScript and CSS pieces which are missing. All in one, I can't correctly run your code to see if I reproduce.
On the other side, one of the SwapView tests in dojox/mobile/tests (test_SwapView.html) includes a button which programmatically transitions to a swap view - quite close to what you describe. Do you reproduce using this sample or can you modify it to reproduce your issue?
Finally, telling the Android version of the devices where you reproduce would help too.