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.
Related
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.
In the Aurelia SPA template it assumes that every page will be inside app.html and use the same nav-bar at the top. But I'll have many pages that don't want the nav-bar at the top and actually not use app.html at all. I was looking at main.js and it looks like I could hook into bootstrap() and change the aurelia.setRoot() for certain pages (I'm just guessing here), but then I start mucking up the main.js file and it won't be long before it gets really messy and maintenance headache. I really just want to have some pages use their own format altogether and ignore the app.html formatting without doing any crazy configurations.
My initial thought is maybe app.html should just be an empty file and make every page decide whether or not it wants the nav-bar and include it on the individual pages. But now I'm duplicating the code across many pages and if the standard page layout changes I have to change all the individual pages. Not sure the best way to go about his. Any suggestions?
I actually disagree with Gilbert's answer. Using .setRoot is a best practice; the root is just the parent view/viewModel pair and you will often have different parents. This is essentially what you're doing when you're creating an empty app view/viewModel, creating a new parent that doesn't do anything. But adding an unnecessary, unused layer is just extra complication.
One of the best use cases for this is a login page. The login page is totally different from your normal app page--there's a login prompt, no navigation bar, etc. Therefore, make a "login" app root and a "app" app root and switch back and forth between them. I've built a template called Sentry that demonstrates how to do this.
Sentry in action
Sentry on GitHub
Using set root, like you said, is a bad idea. Similar to what you said, you can make app.html contain just the router view tag. Different parts of your app, that you want to share a similar page layout, will be gruped under different routes. Now each of theses routes will point to another router that will have its different styles in the view
Just think of it as an empty app.html with child app.html's that have styles in them(e.g. Different navbars, page layout etc)
I'm trying to implement web solution with sitecore 7.x as a content manager. My web application is a MVC solution. I've installed Sitecore and set up MVC project.
The problem is that AB/MV tests don't work when using *.cshtml layout with #Html.Sitecore().Placeholder(...) and ControllerRenderings.
I have Item defined with layout set to LayoutMVC.cshtml file.
#inherits System.Web.Mvc.WebViewPage
#using Sitecore.Mvc
<html>
<body>
MAIN:#Html.Sitecore().Placeholder("main")END
</body>
</html>
I render ControllerRendering into main placeholder and I want to add variation to component rendered here. Basicaly I can add a variation using Page Editor and everything is fine until I click save in Page Editor. Then the test is saved but I cannot see first variation anymore. I see the content from the original item. I can choose variations but instead of Variation1 there is a Default content.
When I start a test it doesn't work at all. Always renders original Item.
The same test works when I use /sitecore/Layout/Layouts/Sample Layout which is an aspx layout but I need to use MVC #Html.Sitecore().Placeholder(...) method as I want to render placeholders dynamically later.
Additionaly DMS works fine for this configuration. I can personalize content.
This appears to be a bug. I reproduced the behavior in v7.2 update 2. I just logged the issue with Sitecore Support and will report back with their comments.
Update
Sitecore Support has confirmed that this is a bug. I'm putting a fix together. Stay tuned.
The hotfix is available here: https://github.com/BenGGolden/Sitecore.Mvc.TestingHotfix
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
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