I have just upgraded from React navigation 5 to 6 and looked at the doc for transparent modals. Unfortunately, I cannot get the previous screen to show under the modal. Instead, I get a gray background.
I have made a snack with my code to showcase my result: https://snack.expo.dev/#divone/transparent-modal-not-working
What am I doing wrong? I seem to have all the elements listed in the doc for it to work.
I am on the managed workflow of expo SDK 43.
This works for me. I had a lot of trouble specifying the background colour without it ignoring transparency and completely covering the background in a solid colour. It seems like you need to specify this information for a group, rather than for the specific screen.
You were also assigning properties which the typescript compiler did not think were valid for React Navigation 6. Check that your text editor is showing the compiler errors as you type.
<Stack.Group
screenOptions={{
presentation: "transparentModal",
contentStyle: { backgroundColor: "#40404040" },
}}
>
<Stack.Screen key="ModalScreen" name="ModalScreen" component={ModalScreen} />
</Stack.Group>
Related
what I would like to do in RED BOX:
hello. obviously I am new and very much a beginner.
I am using ember.js for my application frontend and bootstrap to ease the styling process. I want to build a top fixed menu bar like the picture attached and a left navigation bar with scrolling like the picture attached. maybe because I am new thats why I am unable to use the manuals properly to land me at this point.
if anyone choose to help, need to know 1st that if there are already defined builtin components in ember.js to solve this issue (I am using ember v3.18), I am unable to find any.
2nd, if 1st question answer is no, then how can I build it - or are there any suggestive codes available online for me to learn from?
I'm developing a GDK app where I need to provide an user experience to display status text similar to video recording status that Glass provides ( displaying "Recording" status then displaying progress indicator and finally showing 'Complete' text ). Appreciate your input.
Right now, you'll need to write your own UI logic to do this (perhaps by using a Dialog with a custom layout that has the appropriate centered label and icon, with a progress bar at the bottom, and changing the label and dismissing the dialog when the action is complete).
You may want to follow issue 271 in our issue tracker, which covers the progress indicator part of this flow.
Tony is right. There is no way to do this naively but you can build it yourself. You can create a layout that is build exactly like the menu is built in the GDK, and then just update the setcontentview() with a new layout each time you want to move to the next card. Also you can build a layout with the holo horizontal progressbar to get the general idea but it won't be like the one Google uses.
Also wanted to add that I have built a repo that you can drop into your project for this. Here is the link: https://github.com/w9jds/GDK-ProgressBar
To enable horizontal scrollbars in a table I need to style the containing DIV with "overflow: auto", highlighted in blue.
I tried it with FireBug and got the desired result. Just can't figure out out how to put the setting into APEX.
Using the theme "Blue Responsive".
I've played with this a bit in Apex 4.2.2, it should work the same in 4.2.1 I think. That particular div doesn't come from any template but you can target it with some CSS.
In the page properties, for CSS Inline, I entered the following and it seemed to work:
#report_2583625959157728_catch {overflow:auto}
(I think I've transcribed the correct id from your screenshot - you may need to check)
Unfortunately this means you'd have to do this for each report in your application individually where you want the scrollbar to appear.
Note: I haven't tested this in IE, however - last time I was mucking around with scrolling areas I found it incredibly frustrating to get it working in IE without breaking other functionality in the region - especially for Interactive reports.
You can add to Region Header:
<div style="overflow:auto;">
and to Region Footer
</div>
You can also add your css line to a report region template, if you want the scrollbar to be added to each report.
Other wise you're better of putting the overflow on a class and add it to your application's stylesheet, eg:
.myClass {overflow:auto}
you get more flexibilty to style your region this way. You can add the class to your report by setting the region attributes to class="myClass".
Note that instead of "auto", you can also try to use the element option "scroll", check the w3schools docs: http://www.w3schools.com/cssref/pr_pos_overflow.asp
I just upgraded from version 4.1 from a month or so back and suddenly my section (horozintal-nav) is being hidden on screen sizes above 768px. Prior to the upgrade it would display as a horizontal nav above 768px and as an accordion on smaller screens.
I am using compass and sass.
I have also tried cutting and pasting their example code from their documentation into the top of my page and I get the same behaviour with that as well.
The CSS that hides the control...
/* line 49, ../../../../../lib/gems/1.9.1/gems/zurb-foundation-4.3.1/scss/foundation/components/_section.scss */
[data-section='horizontal-nav']:not([data-section-resized]):not([data-section-small-style]), .section-container.horizontal-nav:not([data-section-resized]):not([data-section-small-style]) {
visibility: hidden;
}
Is anyone else having this problem?
Seems I just needed to add data-section-resized attribute to my container.
<div data-section="horizontal-nav" data-section-resized>...</div>
So simple fix, but that isn't in the zurb documentation - does anyone one know what that attribute is for?
I ran into this problem as well. The above answer didn't quite work for me because all my tabs were squashed to the top right, overlapping each other.
This thread helped me sort it out:
https://github.com/zurb/foundation/issues/3555
This isn't broken. Sizing can't be calculated correctly when elements aren't visible. If you're going to hide them and then show, you'll need to call reflow or fire the resize event to get things to calculate the correct sizes.
At least for my case, my items were being loaded AFTER Foundation was able to calculate the widths, so it always went to 0.
Hope this helps!
I'm using the Google Charts API to include various graphs on a webapp I'm working on. I'm using the javascript chart tools (not the image chart tools), and am wondering if it's possible to use a transparent background on a chart (e.g. line graph, pie chart, etc.)?
In the Configuration Options of the chart, specify
backgroundColor: { fill:'transparent' }
This worked for me in Chrome and Firefox.
It took me some time to find out. The doc page says you can only put in HTML color strings and I assumed 'transparent' was not one of them.
Setting a transparent background for Google Charts:
// Set chart options
var options = {'title':'Chart Title',
'width':600,
'height':300,
'backgroundColor': 'transparent',
'is3D':true
};
JSFIDDLE DEMO
backgroundColor: "00000000" worked for me.
If nothing works for you try locating the background rectangle at the end of your drawChart() function and add the fill-opacity attribute.
fill-opacity="0.0"
Example:
$('#mychart').find('svg rect:eq( 1 )').attr('fill-opacity','0.0');
Use the eq:() selector to select the rectangle you want to be transparent.
On the left of the cart there is a dropdown arrow - click that, and go to "cop chart".
When you paste the chart, you can still choose to link it, and it will paste with the background transparent.