I have a custom color working with the following code:
However, I can't identify how I might overwrite the size of the carousel viewport although I was able to identify where to change it in the HTML. In the picture below I changed the viewport size to 50% height and 50% width.
So what do I look for in the HTML to identify the function I have to overwrite in CSS? What is that particular function for this example?
It hurts to look at sizes in px (instead of em or rem) - too late in the week think about. If you post some more context (all of your containers and containers of containers) I'd like to try to replicate it on Monday...
A flex container view contains a single component Carousel.
A second Coordinate Container view contains a table (or any other components).
The flex container path is then connected to the coordinate container.
However, the question is in regards to changing the viewport height/width of the Carousel through CSS so the setup shouldn't matter.
Well, first, I think we need to go over what you call 'viewport', I'm not sure you and I have the same definition. I suggest reading this: Viewport concepts - CSS: Cascading Style Sheets | MDN
Then, I don't think style-"width 90%; height: 90%" is valid css. I've never seen anything like that before.
selector {
width: 90%;
height: 90%;
}
would be the usual way of doing this.
If you want to use css on something, the first step is to identify an element with a class/id that you can reliably target to make modifications to a specific element without disturbing everything else.
In your case, if you want to modify what you circled in red:
It's hard to see from your screenshot what is specific enough, as things are cut out.
Maybe the element with data-component="ia.display.carousel" has a usable class. You can also select things based on their data attribute, so there's that.
Using a custom class is also a good way of reducing the scope.
Then you can chain selectors to dig through the tree down to the element you want to target, while being careful that your selectors are specific enough to not target something else.
Maybe .psc-customCarousel .view-wrapper will be enough. Maybe you'll need to be more precise, selecting other elements on the way to reduce the scope step by step.
This should be a good read concerning selectors:
Yes, I didn't know what to call that part of the carousel so I chose the word "viewport".
I will chew on this a bit more.
I can sort of do what I want by targeting "view-container" as my selector.
.psc-customCarousel .view-container{
height: 50%;
width: 75%;
}However, the width seems to have no effect on the outcome.
I have been unable to target the class "view-wrapper" and I feel like I recall reading on the Ignition forums you can't target the view-wrapper the more I think about it.
Looks like targeting display-interaction-container is a slightly better way.
.psc-customCarousel .display-interaction-container{
flex-grow: 0;
height: calc(100% - 10vw);
width: calc(100% - 10vw);
}Where vw represents percentages of the actual viewport.
I will be interested to see some screen shots of what you are going for.
Here is the normal screenshot (all that matters is you have a Carousel component).
I then modified the size and position of the dots on the Carousel component using a transform.
However, this causes some overlap with the other Carousel internal components (see next screenshot).
So my whole issue was rooted in the end-user wanted bigger dots but it didn't look right. This code here applied in the stylesheet:
.psc-customCarousel .display-interaction-container{
flex-grow: 0;
height: calc(100% - 1vw);
width: calc(100% - 1vw);
}Changed the Carousel component to look like this:
Of course you have to change the Carousel component style to 'customCarousel' to make it work.
So now the dots fit in the given height correctly. It is relatively simple to spread them apart to finish the design request change.
Wait, what you actually wanted to do was make the dots bigger ?
vw is actually the view width. Use vh for the height, or vmax / vmin to use whichever is the largest / smallest.
No, the issue was my solution to the dots getting bigger caused another problem I had to fix (with CSS).
Good catch on the vw / vh.
But there might be an other solution to make the dots bigger that didn't mess anything else.
That's what we call an xy problem, and I suggest you read this:
The gist of it is: Don't ask for help with the solution you're trying to implement, ask for help with the problem you're trying to fix (the end goal). Which, here, is bigger dots.
Is there a solution to my X?
I wouldn't call this thread a waste. I learned a tremendous amount about stylesheets in the last two days and documented my solution for others to follow along with.
let's find out !
Me neither.
.dots-container {
height: 40px;
}
[data-component="ia.display.carousel"] .dots-container .dot {
width: 30px;
}
The second one is responsible for the size of the dots, but they get cut because their container is not growing with them, so the first one makes the container bigger as well. There might be ways to make it grow automatically, but... this one works.
Change the values to fit your needs.
Does that solve the X ?
edit:
Note that I didn't try to use the built-in style properties of the dots, which might very well be enough.
Yes, that does solve X better than Y. It didn't occur to me that the dots had their own container.
Modified it a bit to only target carousels that I want changed and not others.
Although will all dots-container's be height 60 now?
Yes, use the same custom class to make sure you're only targeting the same carousels.
This one does NOT work.
This one worked.
This one did NOT work.
This one worked.
This one also worked.
So it seems very strange I can apply a transform with both hierarchies but not the width to the ".dot" class directly.
It's because of css specificity levels.
The first one does not work, because your class is probably applied to something nested inside of the element that has [data-component="ia.display.carousel"]. So the selector doesn't work because there's nothing that matches.
the third one doesn't work because it's less specific than [data-component="ia.display.carousel"] .dots-container .dot.
That selector got the property you gave it, but it was overridden by another one that's more specific.
You can try adding !important at the end of the property to make it take precedence.
the 4rth one works because there's no other more specific selector that has a transform property, so it's not overridden like width is.
The first one you were right. The class is being applied at the same level.
For the third one the !important flag didn't do anything but your explanation makes sense to me.
And the fourth one also makes sense now.
Thanks for all your help. I need to re-read the CSS selectors link you posted earlier.
