inside a ScrollContainer i placed a Carousel that created different carousel-items with dynamic height (show 3 content div as default). The problem is that my carousel container height is set to the height of the highest item-content (height = 2000px), therefore i can scroll down to the page even if my content div height is around 600px.
How i can avoid such a behavior.
<ScrollContainer vertical="true" horizontal="false" height="100%" width="100%">
<Carousel
showPageIndicator="false"
width="100%">
Related
I am building a button, using vml because it's the only way to make it rounded on Outlook emails. I need its width to depend on its content. However I can't find a way to do so. The only width I am able to give it is a fixed width.
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
style="width:200px; height:41px; v-text-anchor:middle;"
arcsize="10%"
stroke="f"
fillcolor="#d62828">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
Découvrir
</center>
</v:roundrect>
Is it possible to make its width depend on its content width? And if not, is it possible to make it equal to 100% of its parent (I tried mso-width-percent but it depends on the viewport width, not the parent width)?
I am unsure on how to add "spacing" between my slides in pure react carousel.
Is there any easy option how to add gaps between slides ? I've tried several approaches. I need correct padding when sliding one by one. When using margin, applying on slide or inner element, slider get broken, pushing last slide on new line block.
Pure React Carousel components behave like a suite of HTML tags. A good analogy for the suite of Pure React Carousel components are the Table tags in HTML: table, thead, tbody, tr, th, tr, tfoot, colgroup, etc. The table tags are bare-bones, and only use default styles. You must apply css to them in order to customize your carousel.
Pure React Carousel is responsive by default. Meaning, it will stretch to the full width of its parent container unless the parent container uses CSS to restrict the width of Pure React Carousel.
The slides in Pure React Carousel have an intrinsic height by default. Meaning, just like an image tag, the height of each slide gets taller the wider each slide becomes. Just like the height of an image with no height attribute set gets taller the wider the image becomes in a browser.
The <Slide /> component has a child div with the class .carousel__inner-slide. To give your carousel the "illusion" of spacing between cells, create a css rule for .carousel__inner-slide in your project. That or pass the <Slide /> component a class name via the innerClassName prop.
Example:
.carousel__inner-slide {
width: calc(100% - 20px);
height: calc(100% - 20px);
left: 10px;
top: 10px;
background-color: burlywood;
}
View a demo:
https://codesandbox.io/s/withered-wood-4bx36?fontsize=14&hidenavigation=1&theme=dark
This worked for me:
.carousel__inner-slide {
margin-right: 20px;
}
<window height="300px">
<borderlayout >
<north height="60px" ></north>
<west width="200px" ></west>
<center></center>
<east width="200px" ></east>
<south height="40px"></south>
</borderlayout>
</window>
Currently i have to set the window height to a pixel value for this to work properly..
So if my screen resolution height is 300px then it will cover the complete screen.
But will not fill up the complete screen for different resolutions...
How to make this hardcoded value to be dynamic based to user screen resolution ?
I cannot remove window tag.
zkfiddle example
<window height="100%">
should do the trick.
Maybe Media Queries could be interesting for you too.
I am using TabPanel in my GWt application
<g:HTMLPanel>
<div class="center">
<g:TabLayoutPanel ui:field="tabPanel" barUnit="PX"
barHeight="40" width="100%;">
<g:tab>
<g:header>
DashBoard
</g:header>
</ g:TabLayoutPanel>
using this for my tabpanel height
.gwt-TabLayoutPanel {
min-height:500px;
}
its working fine , BUT i want this height to be 100%, But when I make it to 100% ,The whole TabPanel disappears ,
Any solution for that ..coz when my stuff hights increase , the lower are start cutting off ..
thanks
Put your TabLayoutPanel in a LayoutPanel or any other panel that provides size to its children. For example, if you put your panel directly into the RootLayoutPanel, it will take 100% of the screen automatically, and it will resize with the browser window.
The problem with 100% height is it will be 1px if the parent container does not have a height set.
You might find the following article intresting as a possible workarround.
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
I'm having an issue resizing the child widget inside a SplitLayoutPanel. I have a table in the South region of my layout. When I drag the splitter to increase the size the table doesn't resize. It stays at it's fixed height which causes white space under neath the table. When I shrink the South panel the table appears to "hide" behind the footer div image I have at the bottom of the Window. Is there a way to resize the table as the panel increases/decreases in size?
How I my South Panel is laid out. The "South" panel is real just the center panel filling out the rest of the space.
That center panel has a SimplePanel.
Attached to the SimplePanel is a LayoutPanel. I'm using that because there is a button bar above the table and SimplePanel only takes one Widget so I had to nest the widgets inside something else.
LayoutPanel's height and width are set to 100%
I'm guessing what needs to happen is the layout panel height needs to adjust. I'm not sure.
If need be I can post code. I'm also using the MVP/Activity/Places method
UPDATE
SplitLayoutPanel UI:
<g:SplitLayoutPanel>
<g:north size='250'>
. . .
</g:north size='250'>
<g:center>
<g:SimplePanel ui:field="south"/>
</g:center>
</g:SplitLayoutPanel>
Table Layout:
<g:LayoutPanel width="100%" height="100%">
<g:layer top='0px' height='125px'>
ButtonBar is here
</g:layer>
<g:layer top='30px' bottom='5px'>
<g:HorizontalPanel width="100%" height="100%">
<table:CustomTable height="500"/>
</g:HorizontalPanel>
</g:layer>
</g:LayoutPanel>
The Table Widget is placed into the center panel of the SplitLayoutPanel.