I need to put a horizontal scroll on the following situation to be able to scroll photos(I use jquery mobile and need to run the program on android), any idea ? thanks
<div data-role="content" class="List" >
<table>
<tr> <td>image1</td> <td>image2</td> <td>image3</td> <td>image4</td> </tr>
</table>
</div>
For scrolling you could use something like this
http://code.jquery.com/mobile/latest/demos/experiments/scrollview/
http://code.jquery.com/mobile/latest/demos/experiments/scrollview/scrollview-direction.html ( Horizontal Scrolling )
Related
I have the following for a polymer web application. The whole page scrolls. I would like for the contents of and to scroll independently. foo has a longer view and bar is generally able to fit in the page with maybe a little vertical scrolling.
How do I make the two contents of vaadin-split-layout scroll independently vertically?
<app-drawer-layout fullbleed force-narrow>
<app-drawer slot="drawer">
<app-toolbar>
<div main-title>Models</div>
</app-toolbar>
<section>
<div style="margin-bottom:90px;width:100%;"></div>
</section>
</app-drawer>
<app-header-layout>
<app-header slot="header" fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<iron-icon id="logo" src="icon.svg"></iron-icon>
<div main-title>Spliter Sample</div>
</app-toolbar>
</app-header>
<section>
<vaadin-split-layout orientation="horizontal">
<foo></foo>
<bar></bar>
</vaadin-split-layout>
</section>
</app-header-layout>
</app-drawer-layout>
Thank you for any advice.
You can style the panels of a vaadin-split-layout as any other div as the panels are in the light DOM as you can see when inspecting their examples.
Thus give them an explicit height and an overflow:auto or overflow-y:auto; to enable scrolling. The style rules be placed in your usual CSS.
I applied fadein effect of Angular-Animations to my Angular project based on ASP.NET, and display only the first row faded-in. However, the other rows are not displayed when using *ngIf as shown below:
<ng-template pTemplate="body" let-row let-i="rowIndex">
<tr *ngIf="i==0" [#fadeInOnEnter]>
<td>
<a [routerLink]="['/detail/']">{{ row.Summary }}</a>
</td>
</tr>
</ng-template>
I know that else can be used in this situation, but I do not want to repeat lots of <td> blocks omitted in this example. So, is there a way to display animation only if the condition is true in *ngIf field and display the same block without animation.
Can you just apply the condition to the animation?
[#fadeInOnEnter]="i == 1"
I have a web page that does not appear as it does in design view. It adds padding around table cells with text boxes in, but nowhere else. I want it without the padding.
This is the html:
<asp:Panel ID="PlayerPanel" runat="server" BackColor="#3333CC">
<table id="PlayerTable" style="width:100%;" border="0">
<tr>
<td >Name</td>
<td><asp:textbox id="txtPlayerName" runat="server" Width="400px" AutoPostBack="True"></asp:textbox></td>
</tr>
<tr>
<td >Mobile</td>
<td><asp:textbox id="txtPlayerMobile" runat="server" Width="400px" AutoPostBack="True" ></asp:textbox></td>
</tr>
<tr>
<td >Email</td>
<td><asp:textbox id="txtPlayerEmail" runat="server" Width="400px" AutoPostBack="True"></asp:textbox></td>
</tr>
</table>
</asp:Panel>
In design, it appears without padding. When running, it appears with padding above and below the textbox of about the same height as the textbox.
I have tried setting "padding:0px;" for the panel, the table and the cell, but it still stays the same. What else can I try?
Maybe it's cellpadding directly on the table? look here; try setting that to 0
Maybe it's the browser itself putting some default styling on it - in Chrome, open up inspector (F12 or right click -> inspect element) and there you can see what's being applied to the element.
I found this fix:
p {
margin: 0;
padding: 0;
}
I added this into the css and it fixed the problem. It is one of those 'Well, duh!' solutions.
I've been straggling with this issue for a while.
I have a table view cell, when selected, a subview containing some buttons is added to the cell.
Those buttons are not accessible via Voice Over.
Does anyone know how to solve this issue?
Thanks!
This is not so much of a coding answer but...
You should be fine with what you got.
Safari and Mac VoiceOver can click buttons and links when focus is on a cell. Chrome and VO on the otherhand can not, but if you are a VO user you know that you might have to "interact" with some elements to reach a deeper interactive element. So if you use QuickNav and arrow Left + Down you can press the button in Chrome.
Tested with this code:
<table id="theTable">
<thead>
<tr>
<th scope="col">Hey push it</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button type="button" id="pushMe">Push Me!</button>
</td>
</tr>
</tbody>
</table>
and a lite jQuery to se if somethings happend:
$('#pushMe').on('click',function(e){
$('#theTable').css('background','red');
});
Test for yourself on CodePen: Screen Reader and Table test
I'm working on a page with four (4) separate DIV elements that all are scrolled independently of each other. Using the answer here: `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7 I was able to get most of the pages working. There are still a few pages where the DIV holding the main content cannot be scrolled vertically when a side DIV is expanded.
The page structure looks like this:
...
<div id="paneTop">...</div>
<div id="paneLeft" class="expanded">...</div>
<div id="paneCenter">
<div>
<div style="overflow: hidden;">
<div id="mainContent" style="overflow: auto;">...</div>
</div>
</div>
</div>
<div id="paneRight" class="expanded">...</div>
...
Setting the touchstart event listener on #paneCenter worked for most of the pages but those didn't have the extra layer of divs. I have tried setting the touchstart event listener on #mainContent and all the way up the chain but #mainContent will not scroll when #paneLeft is expanded even though it works when #paneLeft is collapsed and it works whether paneRight is expanded or not.
Note: this issue has only been identified on an iPad running iOS7.
This is the correct behavior. If you want it to scroll vertically but hide it horizontally, then target it specifically: overflow-x: hidden (to hide horizontal excess), and don't set anything to overflow-y. This allows for some good control over elements.