I am Trying to make a responsive Crystal reports in Visual studio. I given bootstrap table-responsive class to the parent div of Crystal report. In desktop devices its working perfectly. But in android devices table-responsive class is not working. and crystal report width exceeds outside the parent div. scrolls still works but page full scrolls. how can i solve this issue?
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="panel-body">
<div style="" class="table-responsive">
<CR:CrystalReportViewer ID="CRViewer" runat="server" AutoDataBind="true" EnableParameterPrompt="False" ReuseParameterValuesOnRefresh="True" ToolPanelView="None" EnableDatabaseLogonPrompt="False" HasCrystalLogo="False" HasToggleGroupTreeButton="False" HasToggleParameterPanelButton="False" HasDrilldownTabs="False" HasDrillUpButton="False" HasRefreshButton="True" HasPageNavigationButtons="True" HasPrintButton="True" DisplayToolbar="True" />
</div>
</div>
</div>
</div>
Related
When I use framework7-icons on the web, they render just fine, but when I launch my project on my Galaxy S8, the name of the icon is displayed instead of the actual icon.
On the web:
On my Galaxy S8:
My code:
<div id="app">
<div class="page">
<div class="row">
<div class="navbar">
<div class="navbar-inner">
<div class="left"><i class="f7-icons size-28">menu</i></div>
</div>
</div>
</div>
</div>
</div>
Before copying build folder to cordova, in build/static/Css folder, open the css files and search for src:url(/static/media/MaterialIcons-Regular.e79bfd88.eot) and replace it with src:url(../media/MaterialIcons-Regular.e79bfd88.eot). This will work for sure.
Im building an App in Android and i have a div that have many divs inside, but when the amount of divs overflows the container size the screen does not scroll. I have tryed a lot of things:
- Overflow:auto and chidren with position:relative, doesnt work, not even a little.
- IScroll: It only works when i load it on the index.html and call it there. But the container im using is created later, when i go to another page, so when i call if from there it does not work at all.
- Other many CSS styles and properties and none worked.
Here is the divs hierarchy:
<div id="pageContent">
<div id="wrapper">
<div id="container" style="height: 100%; overflow:auto">
// HERE I LOAD THE PAGE
<div id="search" style="height: 100%">
</div>
<div id="mapHeader" class="resultsModeBar">
</div>
<div id="pharmacyResultsList" style="padding: 15px;">
<div id="pharmacyResultListHeader" class="rounded" style="background-color:#f0f0f1;margin: 0 auto;padding: 10px;margin-bottom: 10px;">
</div>
<div id="pharmacyResultListBody" class="rounded" style="border: 1px solid;border-color:#EA600A;margin: 0 auto;">
// HERE ARE THE DIVS THAT I WANT TO SCROLL
</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. Thanks.
If this app is built as a webpage, you should be able to open it in an installed browser or using a WebView and have it scroll correctly.
Beyond that, I'm not entirely sure I understand what you're trying to do, but here are my thoughts:
If you want "HERE I LOAD THE PAGE" to stay in place, you can do it one of two ways. Either wrap the part you want static in a position: fixed span
<span style="position: fixed">// HERE I LOAD THE PAGE</span>
or you can put the text that you want scrollable into a ScrollBox! ScrollBoxes have defined widths and heights and will basically define a section of the page to be scrollable.
<div style="height:120px; width:120px; overflow:auto;">
<div id="pharmacyResultListBody" class="rounded" style="margin: 0 auto;">
// HERE ARE THE DIVS THAT I WANT TO SCROLL
</div>
</div>
Check it out live here.
I'm designing a page containing footer which contains long text box depending on the mobile device and a button adjacent to it, which will remain fix without considering the mobile device.
Following is the code:
<div data-role="footer" data-position="fixed"
data-theme="e" style="position: fixed;" class="ui-grid-a">
<div class="ui-block-a">
<input type="text" id="addComment" name="addComment" data-inline="true"></div>
<div class="ui-block-b">
</div>
</div>
Can we manipulate the ui-block-a width, to capture 80% of the width and remaining 20% only for the button??
Or is there some other possibility?
I want to make the appearance of the footer resembling as it is instagram while viewing comments or adding comments.
Use this
<div class="ui-block-a" style="width:80% !important">
jsFiddle
I'm trying to do a slide transition but all I see is a fade. Slide works on a Chrome browser but it does not work when loaded onto the phone.
<body onload="onLoad()">
<div data-role="page" id="index">
<div class="fixed-top-bar" data-role="header">Title1</div>
<div class="body-container" data-role="content">
<div class="container">
<ul>
<li>page</li>
<li>World</li>
<li>This</li>
<li>Is A</li>
<li>List</li>
</ul>
</div>
</div>
<div data-role="footer"></div>
</div>
<div data-role="page" id="second">
<div class="fixed-top-bar" data-role="header">Title2</div>
<div class="body-container" data-role="content">
<div class="container">
<ul>
<li>page</li>
<li>World</li>
<li>This</li>
<li>Is A</li>
</ul>
</div>
</div>
<div data-role="footer"></div>
</div>
</body>
There is the body of my html. currently do not have any custom js. Anyone know why I'm not seeing a slide transition?
Edit: I am having this problem on an Android 2.3.6 device. Motorola Atrix 4G to be exact.
Edit: I tried playing around with other transitions other than slide. None of them seem to work. It only gives me a fade.
Edit: I tested my code on iOS and it seems to work just fine. Not sure why it isn't working on Android.
I missed out one very important piece of information on the JQuery Mobile website.
To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).
That pretty much answers the question...
I have the following HTML, mostly generated on the fly using JS, as a dynamic popup that appears when you click in several points on a map.
<div class="bubble">
<span class="topPaisCont"></span>
<span class="globalContent">
<h1>ASIA</h1>
<div class="contPais">
<a href="#" target="_blank">
<img src="images/flags/asia.png" style="visibility: visible; "> Asia
</a>
<br>
<!-- A few more <a>s with the same structure -->
</div>
</span>
<a class="close"></a>
</div>
I'd post an image but it seems I can't since I'm a new user...
The scrollable list of links is rendered correctly in most PC browsers and also on the iPhone and iPad, where it can be scrolled swiping one or two fingers.
However, I can't make it work on Android, where it can't be scrolled down.
Can you help with this? Is it the way it's implemented?
I can post the CSS if needed.