I'm using Application Express 20.1 to set up a simple hub for routing people to other APEX apps/websites. I would like to use a card list with some custom icons that my management put forth. I've:
Uploaded the images to the static application files
Created the static list and tagged the list items with the image from the static application files in the Image/Class field
Set the template options to 'display icons' in the list region attributes
But when I run the page the images don't show where the icon normally would. I've changed the icons to fa images, just to make sure they work and they do. Am I missing a step or is there some kind of file requirement for these images to be used as a list card icon? Thanks in advance.
To accomplish this you have to create a new template for cards lists or modify the existing one.
In the template definition found in Shared Components > Templates, find the item you're looking for (in this case it's Cards) and click on it. Within that you'll need to change the "List Template Current" and "List Template Noncurrent" sections. Below is how the template is originally configured:
<li class="t-Cards-item is-active #A04#">
<div class="t-Card">
<a href="#LINK#" class="t-Card-wrap" #A05#>
<div class="t-Card-icon u-color #A06#"><span class="t-Icon #ICON_CSS_CLASSES#"><span class="t-Card-initials" role="presentation">#A03#</span></span></div>
<div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3><h4 class="t-Card-subtitle">#A07#</h4></div>
<div class="t-Card-body">
<div class="t-Card-desc">#A01#</div>
<div class="t-Card-info">#A02#</div>
</div>
<span class="t-Card-colorFill u-color #A06#"></span>
</a>
You will need to change the t-Card-icon section so it references an image source rather than the Icon CSS class.
<li class="t-Cards-item is-active #A04#">
<div class="t-Card">
<a href="#LINK#" class="t-Card-wrap" #A05#>
*<div class="t-Card-icon u-color #A06#"><img src="#IMAGE#"></img> </div>*
<div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3><h4 class="t-Card-subtitle">#A07#</h4></div>
<div class="t-Card-body">
<div class="t-Card-desc">#A01#</div>
<div class="t-Card-info">#A02#</div>
</div>
<span class="t-Card-colorFill u-color #A06#"></span>
</a>
Changing the image source to #IMAGE# will reference whatever you have set up in your list configuration for that list item in the Image/Class field.
Related
I am developing a food website using Spring boot, Thymleaf and Bootstrap. I need to display menu items in a webpage. To display it I am fetching the data from a database and then iterating over it to display. However, I am not able to display it in a single column like this. Any suggestions on how to handle this?
Code:
${menu.mainMenuName}"
You need to move your "th:each" statement to the div tag. It will be something like:
<div th:each="menu: ${mainMenu}" class="col-md-12">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
Note that ${menu.mainMenuName}" is redundant with th:text="${menu.mainMenuName}
I found the solution for it. Problem with my previous approach was it was creating col-md-2 for every link hence it was getting displayed in single line to fix it below approach was followed:
<div class="col-md-2">
<div class="main-menu" th:each="menu: ${mainMenu}">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
</div>
when i add a custom option in my magento product, im using magento 1.7.02 my theme broken for some reason, i tried change something in the view.phtml (template/catalog/product) but without success...
i dont know where i can change there to fix, i tried change the position from the custom option, but nothing worked
Some ideas please?
Product With Custom Option
Product without Custom Option
*the code in view.phtml
<!-- AddThis Button END -->
</div>
</div>
<div class="clearer"></div>
</form>
I can see a solution for that two tabs Product Description and Product tags are showing well
open http://www.boutiquekawaii.com/corsets/corset-test.html
go to inspect by right click and select Inspect
Now down there in Elements tab search for this class product-shop span8
you will find a div like this
<div class="product-shop span8">
....
<div class="clearer"></div> <!-- you need to move this -->
</div>
and in that div there is a div like this <div class="clearer"></div> which should not be there.That div should be after
like this
<div class="product-shop span8">
....
</div>
<div class="clearer"></div> <!-- and place it here before </form> tag -->
</form>
And you will have this result. Just like your other page.
So open that file template/catalog/product/view.phtml find <div class="clearer"></div> and change it like i said.
I want to use "semantic-ui" accordion with "rtl" icon in default accordion's icons looks like > and i want my accordions icons looks like this <
please help me to do this.
You can simply change the icon class that you are using to achieve your requirement.
I have used "angle left icon" for rtl. There are many more icon to show rtl, here is the link that contains list of supported icon by default in semantic.
<div class="ui styled accordion">
<div class=" title">
<i class="angle left icon"></i>
Title1
</div>
<div class="content">
<p>Title Content</p>
</div>
</div>
NOTE:
Make sure you are using icons from the correct version. Some of the legacy version icons doesn't work with the latest semantic version.
I want to use a widget twice on my Dashing dashboard, but with different options. I'd like to set those options in the html like so:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="myweather" data-view="myweather" data-offset="0">
</li>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="myweather" data-view="myweather" data-offset="1">
</li>
The theory being I can have both Now and In-One-Hour weather widgets, but I can't workout how to get the offset value in the job file so that I can use it for fetching the data.
Adding this as an answer since I do not have 50 points to just comment.
I don't believe this is possible. The way dashing works is that all communication goes from the server, a.k.a. jobs, to the web client. Notice how the jobs are started even before you load one page, so they do not know what channels are currently displayed. You can create multiple channels (myweather-offset-0, myweather-offset-1, etc) and send_event to all of them.
Yes, it is possible. But, I am not sure how you are planning to use.
You would have to modify the .html file of the corresponding widget to pass values.
For example, in my 'list' widget's .html I can do (added second tag)
<h1 class="title" data-bind="title"></h1>
<h1 class="title" data-bind="myown"></h1>
In my .erb I can bind myown like this (at the end).
<div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office" data-myown="some random string"></div>
I am having the hardest time aligning things in Oracle Apex...basically some pages look ok, but some look like this:
This is considering that all of my pages have the same template/region/col settings:
What am I doing wrong?!
EDIT:
I did get the positioning to become a little better:
Here's the template info:
It might be your page template. I've imported the Green Spring theme and tried it out. Since you're using tabs and only using the apex templates, you might've chosen the One level tabs - Left sidebar (fixed width / DIV based). That would explain why your 'Add New User' region is being 'pushed' to the right. When you add another region, it will probably too get pushed.
Your menu region, which is not being set off, might be placed in another position in the template, before the sidebar.
Check both regions' display point: are they the same?
Has your page template a fixed width sidebar?
So here is the code for the body template of the One Level Tabs - Left Sidebar (fixed-width / DIV based) template:
<div id="header">
<div id="logo">#LOGO##REGION_POSITION_06#</div>
#REGION_POSITION_07#
<div id="navbar">
#NAVIGATION_BAR#
<div class="app-user">#WELCOME_USER#</div>
#REGION_POSITION_08#
</div>
</div>
<div id="tabs">
<div class="frame">
<div class="bg">
<div class="tab-holder">
#TAB_CELLS#
</div>
</div>
</div>
</div>
<div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
<div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
<div id="body">
<div id="two-col-sb-left">
<div id="left-sidebar">#REGION_POSITION_02#</div>
<div id="main-sb-left">
#BOX_BODY##REGION_POSITION_03#
</div>
</div>
</div>
So what you did after your edit, was probably putting the 'Add new user' region to Page Template Region Position 1, just like the Menu region, stacking them up.
The default place would have been in <div id="main-sb-left">
I'd say that your actual problem still lies with the page template. You should try this: go to shared components > templates, and make a copy of the One Level Tabs - Left Sidebar (fixed-width / DIV based) template (done by clicking the 2 page icon next to it). Then edit this copy (just call it one level template test), and change the body div like this.
<div id="body">
#REGION_POSITION_02##BOX_BODY##REGION_POSITION_03#
</div>
Then alter your page template, and set your 2 regions to position #03, and set the template to Reports Region. Your regions will be aligned all the way left, under eachother, and no whitespace to the left.
Honestly, that'd be the easiest way to solve the empty sidebar space. There are no other regions in the body that omit the sidebar. At least in this theme!