I am trying to implement a feature to delete a list item on swipe. I am using a carousel for each item in my list. The issue is that the second carousel-item is not showing: it only leaves a blank space.
Here is my carousel:
<ons-list id ="list" style="margin:0px;padding:0px;">
<ons-list-item modifier="chevron" onclick="menu.setMainPage('default.html', {closeMenu: true, callback: function(){getPageContent(0);}});" style="overflow: hidden;position: relative;width: 100%;">
<ons-carousel class = "list__item_active;" style="height: 100%;position: absolute;right: 0;top: 0;" swipeable auto-scroll>
<ons-carousel-item >
Presentation 1 (sqlite)
<ons-carousel-item>
<ons-carousel-item>
DELETE
<ons-carousel-item>
<ons-carousel>
</ons-list-item>
</ons-list>
The carousel did have more than 2 items, may be an infinity of items.
the problem was about tags that are not closed.
<ons-list id ="list" style="margin:0px;padding:0px;">
<ons-list-item modifier="chevron" onclick="menu.setMainPage('default.html', {closeMenu: true, callback: function(){getPageContent(0);}});" style="overflow: hidden;position: relative;width: 100%;">
<ons-carousel class = "list__item_active;" style="height: 100%;position: absolute;right: 0;top: 0;" swipeable auto-scroll>
<ons-carousel-item >
Presentation 1 (sqlite)
</ons-carousel-item>
<ons-carousel-item>
DELETE
</ons-carousel-item>
</ons-carousel>
</ons-list-item>
</ons-list>
Related
Stack: Bootstrap 5, JQuery, Datatables
The issue: I have a page that uses Bootstrap navtabs. In one tab is a chart, and in another tab is a table created using Datatables. When the table tab has focus, the table styling is fine, even when the data changes. However, whenever another tab has focus and the data changes, the columns in the table cease to be aligned correctly. I think part of the issue is that some of the column titles are dynamic, with dynamic content demarcated by spans.
The data is controlled by a series of select menus, so whenever one of the select menus changes a series of processes is triggered, which includes updated the dynamic content and also refreshing the datatable.
I am not applying any custom classes or additional styling to the table. It looks like the issue is the datatable object trying to calculate col widths properly
Here's an example of the column headers not aligning properly:
Has anyone encountered this before, or have any ideas for how to fix this problem?
HTML:
<!-- Container for dynamic datatables -->
<div class="col-sm-12">
<div class="table-responsive">
<table id="datatable" class="table table-striped table-hover table-bordered table-sm" aria-label="Graduation Rates by Year" style="width:100%">
<thead>
<th>Cohort Year</th>
<th>Ethnicity</th>
<th>Pell Status</th>
<th>1st Gen. Status</th>
<th>Gender</th>
<th>Student Sub-Group: Count Enrolled</th>
<th>Student Sub-Group: Count Graduating within <span class="outcomeYear">6</span>-years
</th>
<th><span class="campus-system">Campus</span>-wide <span class="outcomeYear">6</span>-Year
<span class="outcomeTypeAbbr">Grad.</span> Rate
</th>
<th>Student Sub-Group: <span class="outcomeYear"></span>-Year <span class="outcomeTypeAbbr">Grad.</span> Rate</th>
<th>Gap (Difference from <span class="campus-system">Campus</span> Grad Rate)</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
JQuery:
//Initialize datatable
table = $('#datatable').DataTable({
cache: false,
scrollCollapse: false,
paging: true,
scrollX: true,
pagingType: 'simple_numbers',
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
searching: false,
info: false,
processing: true,
serverSide: true,
stateSave: true,
ajax: {
url: apiURL + '/table-data/',
data: function (d) {
d.campus = $campus.val();
d.studentType = $studentType.val();
d.cohort = $cohort.val();
d.outcomeType = outcomeType;
d.outcomeYear = outcomeYear;
d.outcomeTypeAbbr = outcomeTypeAbbr;
d.maxCohort = maxCohort;
}
}
});
JQuery for data change:
/* I have tried moving the dynamic text updates to before the table reload, and also using drawCallback to do these steps upon table draw. Neither changes anything. */
//Reload datatable
table.ajax.reload();
//Update dynamic text
$('.campus').html($campus.val());
$('.studentType').html($studentType.val());
$('.outcomeType').html(outcomeType);
$('.outcomeTypeAbbr').html(outcomeTypeAbbr);
$('.outcomeYear').html(outcomeYear);
$('.campus-system').html(cTxt);
This answer is actually from user andrewJames. He gave a possible solution in the comments that worked, but is declining to make it the solution.
The reason the column headers were misaligned when the data loaded while the focus was on another tab is that DataTables needs a visible viewport to calculate column widths. andrewJames's suggestion, which I tried with success was to add a table redraw to the tab on an oblick event.
Bootstrap's version of an onlick event for a navtab is actually the "shown.bs.tab" event. Here is my implementation of the solution:
/**
* When a tab is clicked.
*/
$(document).on('shown.bs.tab', '.dashboard-nav-link', function(e){
if(e.target.id == 'datatables_tab')
table.draw('page');
});
[https://i.stack.imgur.com/yKOOF.png]I have to click one of options from left widget (See the Image1.PNG) will display single row as shown in ( See the [https://i.stack.imgur.com/hBNTN.png]Image.PNG) and then mousehover on each and every value and have to capture the tooltip for each values of that particular row..
xpath for the left and right widgets are:
#FindBy(xpath="//*[#id='tabZoneId21']/div/div/div/div[1]/div[5]/div[1]/canvas")
WebElement wbcanvasWidgetLeft;
#FindBy(xpath="//*[#id=\"view5159778620503418402_17231458509407196328\"]/div[1]/div[2]/canvas[2]")
WebElement wbcanvasWidgetRight;
And when I mouse hover on each and every value the following code gets highlights and only the value of ‘left’ gets change otherwise its static for all options.
[![<div class = “ tab-tooltip tab-widget tab-tooltipAR” style=”user-select: none; -webkit-tap-highlight-color: transparent; top: 1px; **left:119px**;”>… </div>
<div class=”tab-tooltipContainer”>
<div class =”tab-tooltipContent” wairole=”alert” style>
<div class=”tab-ubertip tab-widget” style=”min-width: 368px;”>.
<div class =”tab-ubertipContent”>
<div class=”tab-ubertipTooltip”>
<span style =”white-space:pre-wrap;tab-size:10;-moz-tab-size:10”>
<div style=”text-align:left;”>
<span style=””>Health Group </span>
</div>
<table style=”vertical-align:top;padding:0px” cellspacing=”0”>
<tbody>
<tr>
<td style =”white-space:pre”>
span style=”font-family” >97</span>
</td>
<td >
<span style=”font-” >Minimum</span>
</td>][1]][1]
Only the value of ‘left’ gets change for each options with some specific margin.
I have tried with following code which mousehover either 87.7% or 30.2% and displays the tooltip. I am not able mousehover on the first option that is 19.9% and so on in continuous manner.
public void sikuli() throws FindFailed, Exception {
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe[title='data visualization']")));
try{
//Captured image of first option(Health) and clicked on in it
Screen s = new Screen();
Pattern target = new Pattern("Health.PNG");
s.wait(target,20);
s.mouseMove(target);
s.click();
Actions act = new Actions(driver);
act.moveToElement(wbcanvasWidgetLeft).moveByOffset(-50,0).moveToElement(wbcanvasWidgetRight).build().perform();
//Capturing Tooltip
System.out.println(driver.findElement(By.xpath("//div[#class='tab-ubertipTooltip']/span/div[3]/span[1]")).getText());
System.out.println(driver.findElement(By.xpath("//div[#class='tab-ubertipTooltip']/span/div[4]/span")).getText());
}
catch(Exception e)
{
e.printStackTrace();
}
driver.switchTo().defaultContent();
}
Can I use javascript executor with help of style attribute where I set the margin values for ‘left’ but i don't know how to set margin for style attribute while writing xpath.
Any help will be appreciated.
Using Bootstrap 4 with DataTables. I have a hidden card containing a datatable. When loading the page if a saved preference (to show the card containing the table) is checked then I show the card and then adjust the columns and draw:
a piece of $(document).ready:
/* code to create table here */
/* wait for the table initialization to finish before restoring card visibility */
$('#dashboardProfitsTable').on('init.dt', function(e, settings, json) {
$.when(
restorePrefs(currentPrefPage))
.done(function() {
/* did user leave this card visible last time? */
if ($('input[name=ShowProfit]').is(":checked")) {
$('#profitsCard').show();
dashboardProfitsTable.columns.adjust().draw();
}
});
});
and some relevant HTML:
<div id="profitsCard" class="card" style="display:none">
<div class="card-body pt-0 pb-2">
<table id="dashboardProfitsTable" class="table" style="width:100%">
<thead>
<tr>
<th></th>
<th><select id="column1" class="form-control"></select></th>
<th><select id="column2" class="form-control"></select></th>
<th><select id="column3" class="form-control"></select></th>
<th><select id="column4" class="form-control"></select></th>
</tr>
</thead>
After the show() the right side of the select in the right column (Last 30 Days) is clipped by a couple of pixels:
but if I resize the window width even 1 pixel (wider or narrower; doesn't matter) the table recalcs widths and redraws so the right side of the 4th is not clipped:
And after that initial window resize everything is fine at every width. It's just the initial show() that clips the rightmost select. Is there something I can do besides columns.adjust().draw() after show() to get the datatable to recalc as if it was doing a window resize recalc?
I'm using Algolia instantsearch.js for search, and to display my result page, I'm using Bootstrap 3, and I'd like hits to be displayed in 3 columns:
qry | hit1 | hit2
| hit3 | hit4
| hit5 | hit6
(where qry = the search query input widget)
etc..
If it's mobile, it should display as:
qry
hit1
hit2
hit3
etc.
Can someone help me with the html/css I can use to implement this?
Thanks!
Basically, you want to use bootstrap rows and grid layout col-{xs,sm,md,lg}-X (More info about the grid layout here).
One interesting property with bootstrap is that if you declare a block as being col-YY-X, if the screen width is under the dimensions YY is associated with, it automatically expands to the full width.
instantsearch.js's widgets expose a cssClasses parameter that allows you to customize the classes of the underlying markup.
To easily do two columns, all you need to do is declare the root element of the cssClasses as being a .row, and each result as a .col-sm-6 (or .col-md-6 or .col-lg-6 depending on which screen size you want it to apply).
By combining them, you can have some really interesting layouts.
See this JSFiddle
Here, I've extended a bit the idea. Try to resize the view, and you'll see that it automatically picks a number of results to display per line depending on the width by combining multiple col-YY-X classes on the hit widget.
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: '<div class="hit">{{title}}</div>'
},
hitsPerPage: 6,
cssClasses: {
root: 'row',
item: 'col-lg-3 col-md-4 col-sm-6'
}
})
);
As you can see, I've also added an inner class to the item template to be able to use the item as a wrapper with padding inside to avoid having the hits glued to each other. I apply the border to the inner element, because adding margins to bootstrap grid elements is not the right solution.
The layout itself is really simple, you can just nest rows together:
<div class="container-fluid">
<div id="search" class="row">
<div class="col-sm-4">
<div id="input"></div>
</div>
<div class="col-sm-8">
<div id="hits" class="row">
</div>
</div>
</div>
</div>
I am trying to show a component,
<div dojoType="dojox.layout.TableContainer" cols="2" labelWidth="50%" colspan=2 id="durationPane" style="display: none;margin-left: 9px;" showLabels=false>
<div dojoType="dijit.form.DateTextBox" required="true" onChange="var x=arguments[0];x.setDate(x.getDate()+1);dijit.byId('toDate').constraints.min = x;" constraints="{datePattern:'MMM dd yyyy'}" label=" From Date :" id="fromDate" placeHolder="From Date" style="margin-bottom: 50px"></div>
<div dojoType="dijit.form.DateTextBox" require="true" onChange="var x=arguments[0];x.setDate(x.getDate()-1);dijit.byId('fromDate').constraints.max =x;" constraints="{datePattern:'MMM dd yyyy'}" label="To Date :" id="toDate" placeHolder="To Date" name="vpnReport._toDate" ></div>
</div>
dijit.byId('durationPane').show();
But it's not showing.
This is a recurring problem with some Dojo "animation" effects such as show, hide, wipeIn, wipeOut, etc. For some reason, if you want page elements to start hidden, so you can show them latter, you cannot initialize them with "display: none" or "visibility: hidden" in the CSS.
Three different workarounds (all of which imply you do not have "display:none" set in the "durationPane" style):
Add the following CSS to the duration pane: position: absolute; left: -999em; then, when you call .show(), also set style to left:0 - you only need to this the first time you call show, because on the next .hide() / .show(), everything works well. This is probably the worst solution because you have to make your element absolute, which can be messy.
Start with the element visible, and then hide it onload, e.g.
dojo.ready(function() { dijit.byId('durationPane').hide(); });
Start with the element visible, and the add the display:none also onload, e.g.
dojo.style('durationPane', { 'display' : 'none' });
This will do what you want. If anyone out there knows why Dojo has this strange behavior, and if there is a more elegant way to fix this problem, please let us know...