I'm trying to fix an issue with a telerik rad button that occurs when scrolling after documents have been selected for uploading. The Select Files button stays at the top when scrolling which is what I want but the second button (Upload) does not stay at the top and instead scrolls and covers up the files that have been added via the Select Files button.
Here is the part of the code along with an image of the actual upload screen.
<div class="container">
<div class="row" style="padding: 10px 0">
<div class="col-lg-1" >
<telerik:RadAsyncUpload RenderMode="Lightweight"
ID="RadUpload1"
runat="server"
MultipleFileSelection="Automatic"
ManualUpload="False"
DropZones=".DropZone1"
OnClientValidationFailed ="OnClientValidationFailed"
PostbackTriggers="btnUpload"
HideFileInput="False"
UploadedFilesRendering="BelowFileInput"
OnClientFilesUploaded="onClientFilesUploaded"
OnClientFileUploading="onClientFileUploading">
<Localization Select="Select files"></Localization>
</telerik:RadAsyncUpload>
</div>
<div class="col-lg-2">
<telerik:RadButton RenderMode="Lightweight" runat="server" Text="Upload" ID="btnUpload" Enabled ="false"/>
</div>
<div class="col-lg-9"></div>
</div>
<div class="DropZone1">
<p>Drop Files Here</p>
</div>
Related
I have a multiple rows with div:
<div class="item">
<div... >some header and other text</div>
<div class="actions">
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
</div>
</div>
<div class="item">
<div... >some header and other text</div>
<div class="actions">
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
</div>
</div>
So the divs with class item are repeating and can be 10 or more on th epage.
I need to click the second button on the LAST row.
I tried:
cy.get['.item button.btn-action:nth(1)'].last().click()
However this is clicking the 2nd button but in the first row, not the last.
I suppose first I need to select the last div e.g.
cy.get['.item'].last()
and then somehow to select the correct button with nth(), but not sure how when I get only the last div via cy.get.
ok for now I found a solution with find command, seems this is working fine:
cy.get('.item').last().find('button:nth(1)').click()
I am trying to add an image and text as a Bootstrap menu item.
I would like to be able to see the hover effect on this custom menu item in the same way as other items.
Also, my CSS code is pretty dirty; it uses width:300px, div inside links, etc. Can someone please suggest me how to do this better?
My code can be seen here.
<li>
<div class="clearfix">
<a href="/" style="display:block; width:300px; padding-left:20px; color: black;" >
<div class="pull-left">
<img src="http://images.apple.com/iphone/home/images/productbrowser/icon_iphone_6.png" />
</div>
<div class="pull-left" style="margin-left:10px;">
<span><strong>iPhone 6</strong></span>
<br />
<span>Bigger than bigger</span>
</div>
</a>
</div>
</li>
You need to move the <a> tag above the clearfix and then just remove the inline color:black; on the a so that the hover color change works.
<li>
<a href="/" style="display:block; width:300px; padding-left:20px;" >
<div class="clearfix">
<div class="pull-left">
<img src="http://images.apple.com/iphone/home/images/productbrowser/icon_iphone_6.png" />
</div>
<div class="pull-left" style="margin-left:10px;">
<span><strong>iPhone 6</strong></span>
<br />
<span>Bigger than bigger</span>
</div>
</div>
</a>
</li>
JSFiddle here
In regards to css, firstly, I would not use inline styles - put the styles on the style sheet. You should preferably use width: auto; and use floats and padding to position the elements inside the menu item.
I'm using a knockoutjs extension to place a loader on top of an element that is loaded from an ajax request so that a loading gif is show while the request is executing.
The fiddle is very basic:
It loads a list of avatars and shows the loading image while the ajax
request is executing.
Then, when you click an avatar, it's details
are loaded into another placeholder and a loading icon is also shown
while the request is executing.
The problem is, the very first time I click on an avatar, the loading icon isn't shown but all subsequential clicks works.
What am I missing here?
Thanks!
The issue that you are seeing is related to having both with and your custom binding on the same element. When the value is null, the with binding clears the child elements. This removes your loader (although it has already been copied off as part of the "template" used by the with binding), but it is put back when you populate infos. Having them on the same element also means that the bindings fires twice (once from changing infos and once from updating isAvatarLoading.
The easy way to fix this one is to split out the bindings like:
<div class="avatar" style="margin-left: 55px;" data-bind="loadingWhen: isAvatarLoading">
<div data-bind="with: infos">
<div data-bind="text: firstName"></div>
<div data-bind="text: lastName"></div>
<div data-bind="text: age"></div>
<div data-bind="text: description"></div>
<div style="margin-left: 55px;" id="" data-bind="with: image">
<img data-bind="attr: { src: Url }" />
<div data-bind="text: Description"></div>
</div>
</div>
</div>
If you don't want to add another element, then you could use the containerless with syntax like:
<div class="avatar" style="margin-left: 55px;" data-bind="loadingWhen: isAvatarLoading">
<!-- ko with: infos -->
<div data-bind="text: firstName"></div>
<div data-bind="text: lastName"></div>
<div data-bind="text: age"></div>
<div data-bind="text: description"></div>
<div style="margin-left: 55px;" id="" data-bind="with: image">
<img data-bind="attr: { src: Url }" />
<div data-bind="text: Description"></div>
</div>
<!-- /ko -->
</div>
Sample: http://fiddle.jshell.net/rniemeyer/75Lyn/
Is it possible to design page (or region) in Oracle APEX with 4 buttons like those on APEX main page (after login)?
I tried but I have no idea how to do it.
I tried with custom HTML, using tables and HTML buttons, but HTML buttons are not shown.
Thanks in advance.
It's definitely possible, because the APEX interface itself is built in APEX!
This is part of the page source for the page with the 4 buttons:
<div class="apex-list-horizontal">
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-appbuilder-128.gif" width="128" height="128" title="Application Builder" alt="Application Builder" alt="" />
</div>
<div class="label">
Application Builder
</div>
</div>
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-sqlws-128.gif" width="128" height="128" title="SQL Workshop" alt="SQL Workshop" alt="" />
</div>
<div class="label">
SQL Workshop
</div>
</div>
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-teamdev-128.gif" width="128" height="128" title="Team Development" alt="Team Development" alt="" />
</div>
<div class="label">
Team Development
</div>
</div>
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-admin-128.gif" width="128" height="128" title="Administration" alt="Administration" alt="" />
</div>
<div class="label">
Administration
</div>
</div>
</div>
Each button is like this fragment:
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-appbuilder-128.gif" width="128" height="128" title="Application Builder" alt="Application Builder" alt="" />
</div>
<div class="label">
Application Builder
</div>
</div>
So you could create a button template that resembles that:
<div class="noncurrent">
<div class="image">
<img src="/myImages/#BUTTON_ATTRIBUTES#" width="128" height="128" title="#LABEL#" alt="#LABEL#" alt="" />
</div>
<div class="label">
#LABEL#
</div>
</div>
In each button you would define the Label, the Link URL and I have assumed you might use "button attributes" to hold the image name.
Another way to achieve this would be to hold your button defintions (label, URL, image location) in a table and create a report like this:
select label, url, image_loc
from mybuttons
where ...;
Now you can build a report template ("row template" style) where each row has the template:
<div class="noncurrent">
<div class="image">
<img src="#IMAGE_LOC#" width="128" height="128" title="#LABEL#" alt="#LABEL#" alt="" />
</div>
<div class="label">
#LABEL#
</div>
</div>
This menu is built with the Shared Components->Navigation->Lists feature.
Check out this documentation: http://docs.oracle.com/cd/E17556_01/doc/user.40/e15517/nav.htm#CHDEEFAB
or this documentation for APEX 3.2: http://docs.oracle.com/cd/E14373_01/appdev.32/e13363/issue_track_ui.htm#BGBIICHF
You can create a List (Shared Components), and use the 'Horizontal Images with Label' template. Upload your images to #WORKSPACE_IMAGES#, and for each list entry, select the appropriate image in the 'Image' field.
If you create a Page 0 and add this list region there, it will appear on every page of your application.
Here is my code. I build 20 questions dynamically. So I need to create a dialog for each of them. It's a mobile application, built using jquery mobile. So I prefer to use the jquery mobile dialog functionality.
I know for sure it can be done, just not sure how.
<div data-role="page" id="Survey">
<div class="quest">
#Html.DisplayFor(modelItem => item.Text)<div class="quest_com">
Comments</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header">
<h1>
Dialog</h1>
</div>
<div data-role="content">
<div class="center-wrap">
<textarea style="width: 320px" title="Comments">
</textarea><a data-rel="dialog" data-role="button">Save</a>
</div>
</div>
</div>
</div>
You cannot have a page nested in another page for it to work. Your 20 questions should each be setup as their own jQuery Mobile page elements.
<div data-role="page" id="Survey">
...
<a data-rel="dialog" href="question-dialog-1">Question 1</da>
</div>
<div data-role="page" id="question-dialog-1">
...
</div>
Here is a live example of it in action: http://jsfiddle.net/shanabus/ZfBvB/
That should solve what you are looking to do.
Here is the documentation on jQuery Mobile dialogs.