I'm learning Angular. I wanted to create a simple carousel so that I can show my sponsors on homepage. I came across many study materials that talks about bootstrap carousel. But I don't want that. I want to use ngx-owlcarousel-o. I followed exactly as mentioned in their documentation. And sorry, i thought pasting code here can be very confusing for all. To save everyone's time and effort I've created a stackblitz. My problem is that I'm not getting slide in the center. They're aligned to left no matter what css i apply. Please correct me.
This is my card-holder.component.html
<owl-carousel-o [options]="customOptions">
<ng-template carouselSlide>Slide 1</ng-template>
<ng-template carouselSlide>Slide 2</ng-template>
<ng-template carouselSlide>Slide 3</ng-template>
<ng-template carouselSlide>Slide 4</ng-template>
<ng-template carouselSlide>Slide 5</ng-template>
<ng-template carouselSlide>Slide 6</ng-template>
</owl-carousel-o>
And this is the css file:
card-holder.component.css
owl-carousel-o {
align-content: center;
margin-left: 50px;
}
I tried taking help from:
CSS Layout - Horizontal & Vertical Align
angular ngx-bootstrap carousel not centered
I also tried wrapping everything inside a div and the tried:
How to horizontally center a div?
But it is so stubborn. Not ready to move even by 1 pixel. Please help me.
I've edited your stackblitz https://stackblitz.com/edit/angular-qaen88 .
Your should add "center" property to your owl configuration and text-align:center to .owl-item
Related
I am a beginner but usually I somehow find a solution to my problem. But not this time.
I managed to code a box: Centered in the box there is the text "#01 Grunderna". This box looks nice.
#01 GRUNDERNA
However, when the text in the middle of the box is longer like "#02 Profil & Scensamlingar" then the text is overwrapping the box. Moreover, the text is not centered vertically.
#02 PROFIL & SCENSAMLING
Is there a way to be able to adjust this? I tried with font-size but it is still overwrapping the box, it is still not adjusted to the middle and the space between the lines stands the same.
Sorry for my lack of knowledge. Would be awesome to get some help.
By the way: Here you can see the mess
enter image description here
Remove the css rule padding: 1rem 1rem; from .home-service a. And add below css rule:
.home-service {
display: flex;
align-items: center;
justify-content: center;
}
Links in those boxes will be justified vertically and horizontally.
If you are using bootstrap, you may make use of the classes it provides. Check this page: https://getbootstrap.com/docs/5.0/utilities/flex/ especially "Justify content" and "Align items" sections. If you want to dig deeper about how flex in css works, check this link https://css-tricks.com/snippets/css/a-guide-to-flexbox/ then bookmark it for future use:)
Thank you so very much for solving my problem. It is like magic :) You should see my smile!
Anyway, I added it as additional css in the customize theme section as I did not find it in the theme editor yet.
I guess it is better to do the changes exactly as you mentioned in the theme-editor or does it not matter?
I need your help.
The Title in the green Box "News" appears right under this Link.
http://www.mjart.ch/category/news/
But because of this weird Template I'm using, there are sometimes some imperfections. On this Site here
http://www.mjart.ch/portfolio/
the Green title seems to disappear behind the padding border. I really don't know why.
What I found out is that there are 2 different CSS styles. The first one that works is a .blog-title and the second one is a .single-title. But both are same styled. I would be happy about some help.
Hi if you dont want to change the structure of the template you can add this css rules
.page-id-21 .single-page{
margin:0;
}
.page-id-21 .single-page .single-content{
margin-left: 25px;
}
I added a .page-id-21 class, otherwise in the contact page you will add a margin.
This can be a solution, another is to search the correct template page, if it's a premium plugin it will have it, and you dont need to add the css rules.
The HTML scheme is following:
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.item CSS style:
float: left;
And the result:
But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block; instead of float: left;, but the result was basically the same.
Thank you
You can use CSS 3 column-width and column-gap like this..
http://www.bootply.com/118335
I run into the exact same problem and I found this one that worked for me.
https://github.com/kudago/waterfall
It depends only on js no css, though I'm still using bootstrap for other styling. I also use jquery.infinitescroll.js to dynamically load items and after the items are appended, waterfall will do its magic and put everything in place.
The only glitch I found is sometimes items could overlap a bit vertically, as soon as you keep scrolling down they are put correctly. I'm not sure why this is happening, a bit annoying but till I find something better.
Hope this helps.
So, I downloaded a free website template. I modified the layout a little and now I'm having problems getting the top location icons to become smaller and position themselves all in one straight line. I've tried changing the "image image-full" tag in the CSS file from 100% to a smaller percentage. That makes the icon smaller but then the icons won't position themselves to be all on one line. The site is found at http://harmlesscrack.com/br/. I've torn apart this CSS file changing everything I can find that links to the location icons and just about given up on all hope of understanding how they formatted this CSS.
P.S. Please don't flag this for "not being a useful question.' I really do need help here.
Just explicitly set the widths of the <div class="4u">, or alter the .\34 u class. For example, the following will place the 4 containers in-a-row spanning only one line:
// HTML markup
<div class="4u">
...
</div>
// CSS
.\34 u {
width: 24.333333%;
}
In the showcase example for http://fractalsoft.net/primeext-showcase-mojarra/sections/layout/tabbedLayout.jsf
tabs are centered right, I can't figure out how to do it.
I've tried searching and applying ui-tabs styling and I can change size easily but not the tab alignment.
For example this did not work: jQuery UI tabs aligned and sharing bar with a title
This seems to be the relevant css http://code.google.com/p/primefaces-extensions/source/browse/primefaces-extensions/trunk/src/main/resources/META-INF/resources/primefaces-extensions/layout/layout.css?r=1201
and pe-layout-tabbuttons is indeed present when I firebug the code but I can't figure out what to change.
I basically want this:
_________________|tab1|tab2|tab3|
instead of:
|tab1|tab2|tab3|_________________
cheers
It seems that this CSS does the magic:
.pe-layout-tabbuttons {
left: auto !important;
}
To see how to use CSS in JSF see here.