I have a dynamic list, containing varying no. of items, being displayed based on some selection.
If the list has more than 7 items, on hovering, the list shows a scroll bar. (If there are fewer items, there will be no scroll bar.)
I have found the element of the scroll bar based on its class name but tring to scroll using webdriver fails.
Here is the code:
//hover
Actions action = new Actions(driver);
WebElement placesList = driver.findElement(By.id("divPlaces"));
action.moveToElement(placesList).perform();
//scroll the list
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true)", element);
HTML code:
<div class="blk">
<div class="smlhead">
Places
</div>
<div id="divPlacesCont" class="sbarPrnt" style="height: 179.219px;">
<div id="divPlaces" class="tilewrap sbarcont" style="height: 179px;">
<div class="blksmlr smlhead sngline">
hyd
</div>
(removed 7 more items for simplicity...)
<div class="sbar" style="display: block;">
<div class="sbarpos" style="height: 152.576px; top: 0px;"></div>
</div>
</div>
</div>
</div>
Update: I got a thought to share. The list element is always visible on the left of the page (and I need not move/scroll to this element to make it visible as actions.moveToElement() does). When I hover, scroll bar within this list appears and I can click the bar, drag it down to see (last) items.
With the above code, it is moving the "frame" up i.e. everything from 'Country' to the list below move a bit up but still the last hidden item in the dynamic is not visible.
Related
I am building a lightning web component that uses a combobox. It seems to be having its dropdown portion cut short by the bounds of its container.
I've tried adding height, z-index, overflow, and margin modifiers to the style sheet for the input element and its container, and the only thing that's had a visible effect is adding margin to the combobox's container, which just makes more space for the dropdown to show its contents but doesn't solve the problem.
Here is an excerpt of the html file:
<div class="slds-col slds-grid">
<!-- Complete Task -->
<div class="slds-grid slds-col slds-size_2-of-4 slds-p-right_small slds-truncate">
<div class="slds-col">
<div class="slds-border_bottom" style="background-color: #ecd4b566">Log a Call</div>
<div class="slds-grid_vertical slds-p-top_small">
<div class="slds-col">
<lightning-combobox
class="spencer_combobox"
variant="label-hidden"
placeholder="-- Call Result --"
options={callResults}
value={selectedResult}
required
onchange={handleResultSelection}>
</lightning-combobox>
</div>
<div class="slds-col">
<lightning-textarea maxlength=255 placeholder="Write comments here" onchange={handleComment} value={commentValue}></lightning-textarea>
</div>
<div class="slds-col">
<lightning-button class="slds-col" variant="Brand" label="Complete Task" onclick={handleCompleteTaskClick} disabled={buttonDisabled}></lightning-button>
</div>
</div>
</div>
</div>
I expected the dropdown to be visible on top of the other elements, but it ends up hidden or cut off.
Here is a screenshot; the dropdown menu isn't being cut off by the next element below it, it's actually getting cut off by its own bounds.
Figured it out.
I put slds-truncate in the class of the container, and that comes with overflow:hidden, so I was able to just remove the truncate or edit the style sheet to fix the problem.
I use ionic for my mobile app. I have a Directory with a list of employees. It works fine except that the last employee name gets cut or is not visible.
I use collections-repeat inside ion-scroll. Above this I filter directive. The filter directive should not be scrollable.
I tried setting bottom:50px for the last item in the list, it brings up the last item, but writes over the item above it.
Any suggestions on how to fi this would be break
<ion-content scroll="false">
<filters on-query-change="onQueryChange()" class="filter-directive"></filters>
<hr class="hline">
<ion-scroll class="scroll-length">
<div
collection-repeat="contact in contacts track by contact.id"
item-width="100%"
item-height="getHeight(contact)"
ng-show="(contact.fullName || contact.isDivider)>
<div id="company-directory-item-divider"
class="item item-divider fw-semibold dark"
ng-if="contact.isDivider">
{{contact.letter}}
</div>
<div
class="item item-icon-right tn-nav-item"
ng-click="gotoEmployeeInfo(contact)"
ng-if="contact.fullName">
<span ng-bind-html="contact.fullName"></span>
<div class="tn-nav-item-subtitle dark"> {{contact.workShortLocDesc}}</div>
<i class="icon ion-ios-arrow-forward"></i>
</div>
</div>
<ion-scroll>
</ion-content>
Looks like the div with collection repeat should be the first element inside ion-content for this to work:
So this is how I finally fixed it:
Got rid of ion-scoll
made ion-content scrollable
Put the filter directive and hline between ion-header and ion-content and set it to position absolute (along with some margin top styling)
styled ion-content with margin-top to bring it lower (so as not to write over the filter)
This worked.
I am using Angular ui-router to navigate pages and flexbox as a grid type solution. I am attempting to reproduce Google Image Search Result look where the black expanding div opens under the selected image. I also need the route to change when the image is selected which I have working. However the div opens after all the divs in the row. Now after the row which the selected item is located. Any help on a ng-if, directive or script that could help me do this would be greatly appreciated.
EDIT: After thinking about it more I think I would need a script/directive that detected divs in selected's row and then inserted the ui-view div after the row.
Here what I have so far:
HTML:
<div id="container">
<a ng-repeat="item in professionals | filter:{cat: cat} | filter:query"
ui-sref="bids.item({item: item.link})"
ui-sref-active-eq="selected">
<div>
...
</div>
</a>
<div ui-view></div>
</div>
CSS makes div a flex element and wraps the square `a` divs contained.
Partial that opens when clicked includes:
<div class="expand" data-ng-if=" need something to the extent of open only below selected items row">
I'm using angular-dragdrop to move images from on div to another div. As each div has its own $scope list, when I drop an element from one to another list, the list which receives the item is updated.
However when I drop an item into the droppable area, it goes to top-left corner. It does not stay where I dropped
this is my html
Draggable
<div class="sand-image" ng-repeat="item in filtered = (products | filter: {cat : config.category.id}:true) |
itemsPerPage: pageSize"
current-page="currentPage"
data-drag="true"
data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
ng-model="products"
jqyoui-draggable="{index:$index,applyFilter:'{{getIndex(item)}}',
placeholder: 'keep',deepCopy :true}"
></div>
Droppable
<div class="wrap" id="sand-ground"
data-drop="true"
ng-model='box'
jqyoui-droppable="{multiple:true, deepCopy:true ,onOver :'stop',containment :'position'}" >
<!-- item html -->
<div class="draggable" ng-repeat="item in box track by $index" resizable ><img src="{{item.url}}" ></div>
The item in the second list ( dropable ) has a directive ( resizable )to set some info to the item.
How can I make the dropped item stay on dropped position?
$scope.dropAction = function(event, ui) {
console.log('left:', ui.position.left, 'top:', ui.position.top, ui);
// update model
var newItem = {
left:, ui.position.left,
top:, ui.position.top
};
$scope.someList.push(newItem);
};
Since you can capture the position in your drop function, I decided to just update a model that manages the positions of each draggable item. In your drop function:
jqyoui-droppable="{onDrop: 'dropaction($event)'}"
Then in your markup you can repeat through the items and use the stored property to position them with inline ng-style.
ng-repeat="item in someList" ng-style="{'left': item.left, 'top': item.top}"
These are the basics of what I did and you will most likely have to expand it to fit your usage. In my case, this captures pixels and I am converting to percentages in order to get responsive positions. I also launch a $uibModal that takes more information about my item before I place it.
I'm developing an Angular single-page app with a responsive layout. The current page I'm working on uses a tile-based layout that auto wraps extra tiles to the next row. The HTML is below and, in the responsive layout, it can show 1, 2, or 3 tiles per row depending on the width of the row (it positions them using floats).
<div class="tiled_panel">
<div class="tile_1">...</div>
<div class="tile_2">...</div>
<div class="tile_3">...</div>
<div class="tile_4">...</div>
<div class="tile_5">...</div>
...
</div>
Now each tile will be given a "Learn More" button. The design calls for a block to expand between the row of the selected tile and the row below. This block will be the full width of the row and will be closed when the user closes it or clicks on a different Learn More button.
My first thought was to arrange the HTML as below using ng-if to hide or display the expander divs but I can't figure out the CSS needed to have it display between the rows.
<div class="tiled_panel">
<div class="tile_1">...</div>
<div class="expander_1">...</div>
<div class="tile_2">...</div>
<div class="expander_2">...</div>
<div class="tile_3">...</div>
<div class="expander_3">...</div>
<div class="tile_4">...</div>
<div class="expander_4">...</div>
<div class="tile_5">...</div>
<div class="expander_5">...</div>
...
</div>
My second thought, since I'm using Angular, was to somehow use transcluding or including to insert the relevant HTML into the appropriate spot. Again, I can't figure out how to identify where I need to insert the HTML?
I've tried searching around for other people's solutions to similar problems since I figured its not that unusual a requirement but I haven't yet been able to find anyone else who is doing this.
Can anyone else suggest what I need to do to identify the where to insert the HTML or how to generate the CSS? Or even suggest another solution that I haven't considered yet?
Although I have 70% understand of what you mean, I think ng-class can simply solve what you've faced. The solution code is like below. And I setup jsfiddle.
Html looks like this.
<div ng-app="" ng-controller="MyCtrl">
<div class="tiled_panel">
<div>Tile 1 <a href ng-click="change_tile(1)">More</a></div>
<div class="expander" ng-class="{'close': opentile===1}">Expander 1<a href ng-click="change_tile(-1)">Close</a></div>
<div>Tile 2 <a href ng-click="change_tile(2)">More</a></div>
<div class="expander" ng-class="{'close': opentile===2}">Expander 2<a href ng-click="change_tile(-2)">Close</a></div>
</div>
</div>
Your controller code looks like this.
$scope.change_tile = function(value){
$scope.opentile = value;
}
$scope.change_tile(0);
Css looks like this.
.expander{
visibility: hidden
}
.close{
visibility: visible
}