right now the content of dropdowns is by default to the bottom right.
Is there an option to set it so it goes to the bottom left?
(foundation 5)
The "right" style is being applied through JS. To override this just give #contentDrop a style of #contentDrop{left: -100px !important;} or whatever value you would like to pull left. You will need to adjust the .f-dropdown:after{left:XXpx !important;} and .f-dropdown:before{left:XXpx !important;} stylings to bring the little triangle to the right of the dropdown box.
This is a hack because Zurb-Foundation is still working on a solution to this problem. There is an github issue related to this. I found a Hack here that helped me solve it.
Using this information here is how to get the alignment correct. Add a class bottom-align-left to the content dropdown div:
Search
<div id="drop2" data-dropdown-content class="f-dropdown bottom-align-left">
Then add this to your CSS or SCSS file. You will have to play with the number to get it right.
.bottom-align-left {
margin-left: -375px;
}
Now the triangle shows up in the wrong place. To fix this remove the triangle.
Open _settings.scss.
Find $f-dropdown-triangle-size and set it to 0px i.e.
$f-dropdown-triangle-size: 0px;
Related
I had an Inline Dialogue region with a page item being a Popup LOV. I needed to be able to select multiple values and be able to manually add more. But once I switched on multi-select the input field contracted to max-width 4px, the only way I found to fix that was to set the item to Stretch Form Item on and have it stretch out. But now came another problem. Now the manual entry was weird, you could only click on the first 4px(or the 4px after the last value if there were already values in there), and text you were writing was not visible until you stopped writing and clicked away.
So I was wondering how to fix this.
Running on APEX 19.2 btw, maybe this gets fixed in next versions
I found that if I hadnt set the Stretch Form Item parameter, max-width was set to 4px no matter what else I tried. If I did set it though, then flex-grow was set to 0.
So I just had the js that shows the Inline Dialogue fix this with a simple js command:
apex.item("P1_LOV").node.style.flexGrow = 60;
Its a simple fix, but it took me a bit to figure out so I wanted to show the answer here in case it helps anyone else
I don't know why the virtual scrolling I implemented is looking weird.
I have a list of words and I wanna show them in a page. earlier I iterated these words using a for loop but the scrolling performance was horrible in android devices. So I decided to implement basic virtual scrolling as mentioned in ionic's official documentation.
http://rhymebrain.com/talk?function=getRhymes&word=baby
This is the data That I'm trying to iterate. I only need the words, no other info.
Code for my virtual scroll looks like this:
<ion-card *ngIf="words?.length > 0">
<ion-card-header>rhymes with...</ion-card-header>
<ion-card-content>
<ion-list [virtualScroll]="words" [approxItemHeight]=" '500px' ">
<button *virtualItem="let word" ion-button round small>
{{word.word}}
</button>
</ion-list>
</ion-card-content>
</ion-card>
In my web browser, the results I got are terrible. I will share some screens:
Pic 1: User searches for a word to fetch all rhymes but no data is shown even when response is not null.
Pic 2: If I navigate to another page and come back, I see a few of the rhymes.
Pic 3: If I repeat step 2 or scroll a little down, I see few more words. It looks so weird.
I have no idea why virtual scroll is acting like this. Can anyone tell me what mistake I made or a better solution for this?
thanks in advance
There's a few issues with virtual scroll that are unfortunately not documented. Fixing all these should get you in the right direction.
Predefined Height
All ancestors of your [virtualScroll] must have a predefined height. The virtual list will grab the elements height and based on that, populate the cells. If the height is 0, it will populate only a few cells which make up for the buffer space of scrolling quickly. Don't use inline CSS but for simplicity here's an example.
<ion-content>
<div style="height:100%">
<ion-list [virtualScroll]="items" approxItemHeight="50px">
...
</ion-list>
</div>
</ion-content>
Define Approximate Item Height
In the example above you can see I'm setting approxItemHeight. This is an important step that helps the virtual list with it's calculations.
Don't Wrap In If Statement
Unfortunately you can't put your virtual scroll inside an ngIf, ticket. Your virtual scroll needs to be rendered at the beginning of your components life cycle. So if you wrapped your virtual scroll inside of a condition which from the time of the constructor was equal to true, the issue would not exist. However if some point later on the condition becomes true, you'll have to redesign your implementation.
What I did for this was switch from using *ngIf to using [ngClass]="virtualClass". When I want to hide the virtual scroll I will set virtualClass = 'virtual-hide'.
.virtual-hide {
overflow: hidden;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
You can't use display: none since this will not render the virtual scrolls height, same problem we want to resolve. The above CSS should allow for the element to be on screen and take up the correct amount of space while not appearing to actually be there. This code might need to be adjusted based on your implementation.
Ensure Items Exist
Switching to using ngClass from ngIf will mean your virtual scroll is always in the DOM. Because of this, you must make sure that items (the array for [virtualScroll]) is always set. So make sure it's never undefined or null, instead set it to [] if you want it to be empty.
This appears to be a SharePoint 2013 bug.
One of the exciting features of SharePoint 2013 is the Callout. When you have a list of documents, and you want to learn more about the document without having to open it, you can click the three dots Callout button to get a popup that shows pertinent information about the document.
The problem is this information is being cut off when you apply a fixed height to the webparts properties and the height is not enough to accommodate the popup.
It appears to be due to the webpart being converted to an iFrame when a specific height is applied to it. I have been unable to find a CSS fix for this.
You can view an image of the issue here: http://www.pixelwonders.com/fixed-height-webpart.jpg
Anyone know how to fix this?
Thank you in advance for your help!
I had a very similar issue. I have a Google Map web part with fixed height and width in a two column layout, with a list on the right. The filter drop down menu would cut off just like what your image shows.
I was able to correct it by adding a script editor to modify the CSS with overflow: visible !important on both columns. In your image it looks like you have one web part above another, I would think the same rules would apply.
<style>
#WebPartWPQ3{
overflow: visible !important;
}
#WebPartWPQ2{
overflow: visible !important;
}
</style>
My like button has fixed positioned near the edge of the screen. As a result, clicking "Like", the comment pop-up box is half-on-screen, half-off, making posting comments difficult.
Any ideas? See the problem on the following screenshot:
Interestingly, the Google Plus button does not have this problem.
I know this is an ancient post but for anyone else stumbling into it from google:
the solution is to simply add a css class for .fb_iframe_widget and give it a negative top margin with !important.
For example:
.fb_iframe_widget{
margin-top:-163px !important;
}
I am writing out a table using just the template system in Django, and it is not showing the border around empty table cells.
No problem I thought - I've solved this problem before. I put   in any cell that was to be left empty. Django kindly converted the ampersand to & so that I have &nbsp in the empty cells, and it shows the   when viewed in the browser.
I googled it, and tried putting {%autoescape off%} and {%endautoescape%} around the table in question, but it didn't do any good either.
I also tried adding autoescape=False to the context constructor, but that didn't help either.
What's the magic trick to make Django show the border around empty cells?
This is a known CSS/HTML 'problem.' You want to use Django's "default" filter.
{{value|default:" "}}
(I'll be damned if I could get that to come out right. In SO, how do you write "nbsp;" without the & in front causing everything to disappear and be replaced by a blank?)
There is the empty cells CSS property.
http://www.w3.org/TR/CSS21/tables.html#empty-cells
I can't remember if it works in all browsers or not though
Django does in no way control the appearance of your table. Tinkering with autoescape is also superfluous and could turn out dangerous.
Are you using CSS for styling the table? By using a property like e.g.
td {
border: 1px solid red;
}
you can make each cell having a red border. No matter if it's empty or not.
What you really need to do is get a non-breaking space in those empty cells, and prevent Django from escaping the HTML entity. Could you chain a few filters together to achieve what you're looking for?
{{ value|default:" "|safe }}
Edit: I should mention that is the same as , is just doesn't get mangled by the SO parser.