I am trying to use kendo-popup with the input anchor but it doesn't work for me properly.
I want from app.component.html to have:
<div class="first-container flex-column">
<!-- a lot of elements -->
</div>
<div class="second-container flex-column">
<!-- a lot of elements -->
</div>
<kendo-popup [anchor]="anchor">
<div class='content'>
<!-- User-defined content -->
Popup content.
</div>
</kendo-popup>
And the #anchor id can be deep inside one of the containers.
I want to create generic kendo-popup and it should open the popup each time near to other element (that has the anchor).
If I put #anchor inside an element in one of the containers it's not popup near that element, and it popup in a place that not related to this element.
How should I do it?
BTY, I tried first using ngbPopover of ngBootsrap but it requires to 'wrap' the html element that we want the popover on, this doesn't work for me because I want to put the popover/popup code in generic place that I will use for multiple elements.
Thanks!
Related
I am working on fixing a bug for a frontend built using Fluent UI. I have a ChoiceGroup in which I have rendered two div tags each having text. I want the screen reader to read both the texts when the first div is chosen. The only way I can narrate both text is by having them inside the same div but then I cannot style them the way I want to style them.
Similar question but related to Bootstrap: Adding aria-label to text elements
So you have something like this?
<div>
text1
</div>
<div>
text2
</div>
What do you mean by "chosen" in "when the first div is chosen"? Is it an interactive element?
In my previous answer that you alluded to, all the elements to be read were contained in a parent container. It was a <button> in that case.
Normally, if you want all the text to be read, then the focus needs to move to the parent element so that all the child elements will be read, so you'd need a parent <div> and the focus would have to move to it.
<div>
<div>
text1
</div>
<div>
text2
</div>
</div>
Alternatively, for interactive elements, you can have aria-labelledby (or aria-describedby, depending on the nature of the second <div>) to have an element's text announced with another element. Something like this:
<div id="new1" aria-labelledby="new1 new2">
text1
</div>
<div id="new2">
text2
</div>
However, using aria-labelledby directly on a <div> without a subsequent role is not really supported.
And when I said the "nature" of your second <div>, if the second div acts like an extension of the first text, then aria-labelledby (with two IDs) seems appropriate. But if the second text is more of a "further description" of the first element, then aria-described might be more appropriate.
<div aria-describedby="new2">
text1
</div>
<div id="new2">
text2
</div>
Without further details of your code, a more specific answer can't be given.
I'm confused. I've thought it's possible to pass SpringBoot/Thymeleaf objects from the html page to the Modal form. I've come across many examples using ajax to pull data from the REST endpoint instead.
Is using ajax to pull in objects into Modals, the only method?
Thymeleaf is a server side templating language... the concept of a modal form usually means showing/hiding a window opens and closes on the client side (meaning JavaScript that runs when a user clicks a link or a button ). If you don't want to use an API to pull that data (which I think makes the most sense), then you have to create a hidden modal for every row on your page. For example:
<div th:each="item, i: ${items}">
<a href="#"
onClick="openModal(this.getAttribute('data-modal'))"
th:data-modal="|#modal${i.index}|">
Edit modal #<span th:text="${i.index}" />
</a>
<div th:id="|modal${i.index}|" style="display: none;">
<p>I am a modal form for element <span th:text="${i.index}" />!</p>
<input type="text" th:value="${item.value}" />
</div>
</div>
You can see how this works... creating a hidden div/modal form for every row (so you don't have to call an API to get the form values), but it comes with a lot of extra HTML.
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 the header and the main image on a page to stay connected to each other so that when the picture resizes it doesn't become too far off from the header.
But whenever I try to look up the answer, the word "fix" throws off the whole search.
Basically I have two images with divs as containers but I don't know the key words to make them stay/move together.
Try simply wrapping them inside an extra div:
<div id="Wrapper">
<div id="Header">Header Text Here </div>
<div id="Image"><!--- Image Tag here ---> </div>
</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!