Here is the screenshot
I have a 500x400 iframe that hosts my page with a few Foundation dropdown controls, I found in this size no matter how I specify "align:xxx" value in the code, Foundation always renders the dropdown layer as align:bottom which is undesirable. I need "align:xxx" to work no matter what the containing page size is. How do I do that? Hacks or workarounds can do too.
I tried to increase my iframe to 1000x400 and the dropdown renders normally.
If there's an option that I could force align of a dropdown other than align:xxx please point out.
It's because it's in an iframe that is smaller than the medium media query. The default behavior for the small breakpoint is to be 100% width. You may need JS to override this for your use case.
Related
On my page there are several region that are hidden or shown based on a condition.
I set a variable calculation before regions and then on change of that variable I show/hide various regions. Everything works as expected but I've noticed that when I refresh the page, for a split second I see the hidden regions flash and then disappear. Any way to fix that?
What happens is that the DOM is rendered and once the page is loaded, the dynamic action fires. There is a brief moment between the page fully rendered and the dynamic action firing and that is when you see the component flash. All a dynamic action of type "Hide" does, is set the css style display:none; on the component.
A very simple workaround to prevent the flashing is to set "Custom Attributes" to style=display:none; for the region that should be hidden on page load. That way the component will not show but immediately be hidden.
I am changing a Joomla site over from Bootstrap 3x to Bootstrap 4x (front-end only at this time).
I have noticed that lists, ol and ul in Bootstrap 4x have a large padding but when you inspect the code, padding is not in the code. So how is the padding getting into the lists?
Please see screenshot from Bootstrap 4x's own page (Bootstrap 4 Lists) about lists:
Browsers have their own basic stylesheets. See the padding-inline-start property defined by user agent stylesheet?
It's part of your browser's own stylesheet. Typically they're very minimal but they're the reason we have things like css reset.
Edit:
Apparently Firefox does not show user agent styles by default. You can change this behavior by opening inspector settings and enabling "Show Browser Styles" option.
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 am having trouble stopping the first scrolling once the page loads. You can see it here http://foundation.zurb.com/docs/components/joyride.html . After loading the website, joyride window scrolls automatically page littlebit lower
See it better in the old demo http://zurb.com/playground/jquery-joyride-feature-tour-plugin
I need the website to load normally (with top bar) and then activate scrolling after "next" button is clicked.
I am using latest version of Foundation 4 and foundation.min
Currently I am trying the docs page and it does not scroll, so either they fixed it or it was not a problem at all initially.
http://foundation.zurb.com/docs/components/joyride.html
Either ways, I see the best solution for you is to have the first step way above in the page, so that even when it takes focus, there's no page scrolling needed.
Hi I would like to know how to change the template width of a Joomla 2.5 template.
I am facing problem like below.
in different sizes of Monitor (Desktop or Laptop - 15",17",19") - I am getting different blank spaces on both left and right side of the template.
Is that possible to reduce the template width ?
The width of the page is determined by CSS styling so start by using something like Firebug to examine the page and figure out what rule governs the page width. For example there might be a container div that wraps around all the page content, and its width is set at 960px.
Firepage will also tell you the location of the CSS file, for example it might be in templates/template-name/css/theme.css
Sign-in to the backend of your site, then extensions > template manager . In the template manager : styles view, go to the entry for your template and click the link in the right hand column and you will find links to all the css files for your theme. Open the CSS file you located earlier (eg theme.css) and add an over-riding rule. For example
.container{
width:900px;
}
Naturally the normal CSS rules apply here, so you want your new rule to be after the original.
If your theme is responsive, you may have to repeat this process at different window sizes or viewports, and create additional over-riding rules inside #media requests. You will need to figure that out yourself or post a URL.
Good luck