Horizontal scroll in rich:panel to default right to left - xhtml

I have a rich:panel with a style="overflow: scroll" tag inside. By default, the scroll slides left to right. I am constantly adding a new dataTable to a dataGrid with the click of a button and I want the user to always see the most recent one, and since I have it set up so that each dataTable is added as a column to the dataGrid, the most recent one will always be on the right side of the dataGrid. Is there a way I can default the scroll to go right to left? Or maybe creating the columns from right to left?
Here is the code for my panel:
<rich:panel id="PREV" rendered="#{yieldSearch.update}" style = "overflow: scroll">
<rich:dataGrid id="PT" value="#{yieldSearch.storeYieldTest}"
var="_yield" columns="#{yieldSearch.columns}">
</rich:dataGrid>
</rich:panel>
and here is my button:
<h:commandButton id="NXT" value="Add New Store" rendered="#{yieldSearch.update}" action="# {yieldSearch.newStore()}" >

It is little bit difficult to answer because you haven't provided any code sample.
However I think you can use javascript for this. I assume your panel structure is as below.
<rich:panel id="myPnl"........>
<rich:dataGrid id="myGrid".............>
.........
</rich:dataGrid>
</rich:panel>
And I assume you add dataTables in to the dataGrid by clicking a <a4j:commandButton> and calling an action. If so add an oncomplete event to the <a4j:commandButton> as below.
<a4j:commandButton value="Add new data table" reRender="myPnl" oncomplete="#{rich:element('myPnl')}.scrollLeft += #{rich:element('myGrid')}.offsetWidth;"/>

Related

dividing the panels using flex

I am new to css and flex. Below is the working url in stackblitz.
https://stackblitz.com/edit/angular-ivy-bh8m8u?file=src/app/app.component.html
I have a left panel and main panel and a click button on the top of the page.
Requirement 1 On the click of the button i want to open the side panel. For some reason the side panel is not opening.
Requirement 2. I want to update the css to use flex if is possible because i am new to flex also
Please help.
Your sidePanelOpen variable isn't updating, and your sidePanel element is translated -150%, so it's off to the left of the screen
Never done any Angular but using the power of logic I've figured out half your answer. Now all you need to do is read a quick CSS tutorial
You originally were just setting this variable true. Using ! you can negate the sidePanelOpen value and get a toggle action going
.ts
openSideBar() {
this.sidePanelOpen = !this.sidePanelOpen;
console.log(this.sidePanelOpen);
}
Here you had the toggled class being set on the wrong element.
.html
<div [ngClass]="{'toggled' : sidePanelOpen}" class="sidebar" id="sidePanel">
<div>
<span id='close'>x</span>
<h4>Bangalore </h4>
</div>
</div>
Lastly, the toggled class won't do anything unless you have some css to hide your side panel
.css
#sidePanel.toggled {
display: none;
}

Side Nav panel in Angular

I am trying add a button (to open the side panel) , but for some reason it shows up on the top left of the page. I want it to appear on the middle (right side) so when the user clicks on it the panel displays. I also want the current content on the page to zoom in when the side panel opens so the user is able to see both panel and the current content.
descripition of what you want talk
<div>
<button mat-button (click)="left.open()">Field Definitions</button>
</div>
what is the correct CSS to?
I believe you're looking for this, it's an example provided in the Angular Material Documentation.
There are several ways to position the sidenav toggle button, you can either use CSS Flexbox or just add float: right property to the button. I would choose the first method combined with the use of mat-toolbar.

jsp table items get hidden behind overlapping table

I have a jsp page with a menu bar in the top portion of the page and a table on the bottom portion of the page. The menu bar is expanded with menu items (<ul>) that contains a list of items. The table on the bottom portion has a header row like this:
<td style='text-align:center; position:relative; vertical-align:middle;'>
<span style="position:absolute;top:0;right:0;">
<img title="Close" alt="Close Column" src='<%=servernamepath%><%=closeButtonPath %>' />
</span><span style="width:100%;clear:both;"></span>
<b><a title="Sort" href="javascript: setSortableFieldAndSubmit('field1');" tabindex="80">Field1</a></b>
</td>
And the issue that I'm facing right now is if the list of items in the menu is large enough such that the list of items goes down and reaches the header row of the table (or go pass the header row), it will be hidden behind it; the header column appears in front of the item in the menu list. I thought adding z-index to the header row would fix the issue but that didn't work. Is there something that I'm missing in the CSS portion?
You had the right idea with the z-index property, but it should be set both for your header row and your bottom table, otherwise I don't think it's going to work properly.
I made a fiddle with part of your example with two tables, and one getting bigger and displayed above the other when you hover over it.
You might also be interested with this article explaining very well how it works.

CSS / JS for image-in-grid alternative for radio button selector?

Are there any CSS toolkits that let you reproduce radio button functionality but using photos / images laid out in a grid? For example, a grid of auto models on a rental car site, where the user needs to select a preferred vehicle for their rental application by clicking on the car's picture.
This is similar to HTML selection menu widgets, except:
The layout is a grid, not a line of items (i.e. needs to wrap).
The currently-selected item is persistent and always visible, optionally with a checkmark (or other icon-based indicator to show selection)
It would be great if the grid laid itself out intelligently (recalculates rows and columns) when the browser resizes.
It would also be nice to have the option to choose between single-selection (radio button) and multiple-selection (checkbox button) modes.
I thought this would be straightforward but I've had a really hard time finding anything like this. The JQuery UI button functionality is close but (I think) doesn't provide image-centric buttons or a reflowing grid.
This should work for you. You wrap each of your cars in a DIV, put a checkbox inside, and then wrap the image in a label for the checkbox. Clicking on the image checks the box.
The jQuery then changes the class of the wrapping DIV to selected so that you can style it to make it obvious that the car is selected.
jQuery
jQuery(document).ready(function ($) {
'use strict';
$('input:checkbox').click(function () {
$(this).closest('.photo').toggleClass('selected');
});
});
HTML
<div class="photo">
<input type="checkbox" name="image[0][status]" value="1" />
<label for="image[0][status]">
<img src="#" />
</label>
</div>

Styling form in jQuery-Dialog

On my jQuery - Dialog I have a form with multiple form fields. There I have a link to add "Attributes". Now I want to have this on the left side of the dialog and on the same line like the submit button. The div "somediv" must be an inline-element.
How can I achieve that?
jsFiddle - http://jsfiddle.net/Auzx6/
(Please expand the "Result" frame a lot.)
Thank you very much!
Adding a <br clear="all" /> before the div actions (<div class="actions">) should make the trick.
The clear="all" will clean all the previous floats.
Then if you want it on the left side just add this css rule "text-align: left" on that div.

Resources