I want to render child route with child layout only, without inheriting root layout.
/routes/+layout.svelte
/routes/child/+layout.svelte
/routes/child/+page.svelte
I tried child/+layout#.svelte to break inheritance, but with no luck. I don't want to use layout groups or if-else statements in parent layouts.
Is there option to break parent inheritance in elegant way?
This is certainly doable with some CSS tricks. Refer to the following post for a good solution: Is there a way to make a child DIV's width wider than the parent DIV using CSS?.
The simplest solution is to drop in a +layout.svelte file with the following contents:
<main>
<slot />
</main>
<style>
main {
height: 100vh;
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
</style>
This can be done with any container in the current context of the svelte component, too.
Related
Let's say I have the code from here:
https://stackblitz.com/edit/react-nqkupy?file=demo.tsx
which is the code from the material ui docs, "Responsive drawer" section:
https://mui.com/material-ui/react-drawer/#responsive-drawer
but I added an image as a logo at the top of the menu.
How can I remove the space above the logo?
Thanks.
Just remove the <Toolbar /> if you don't use it. Or move the logo above <Toolbar />.
You can do the following :
img {
position: relative;
left: 3.5em;
bottom: 1em;
}
/** Also Use a Class Selector if you don't want to alter all <img> elements on page.**/
Add this to your CSS File. This should work although you might need to play around with some media queries in order to make it responsive.
It also centers the logo, looks better IMO.
I'm new to React and wanted to ask what's the cleanest way to implement a background design like this. I want to know how you could change the background to blue and have the images overlap into the white area or the rings in the corners. So what is the best approach? And I don't want to use a background image
Background I want to implement
position: fixed;
background: "your image or some colors";
width: 100%;
height: 100vh;
Other contents should appear accordingly if you apply proper z-index
There are several options.
You can add !important behind the code that wnna be overwrite.
add z-index for the each element. note : the higher z-index number of the element, it will be place at the top.
in-line style. where you can add tag style={{ your style here}} within your element. example
<div style={{z-index : 10, backgroundImage : black}} > Text here </div>
manual CSS with tag backgroud-image.
I'm fairly new to ReactJS and am using styled components to display an image. The code I have in my App.js is <StyledImage src={mainimg} alt="hi"></StyledImage> which displays an image on the left side of the screen. My styling is
export const StyledImage = styled.img`
width: 80%;
`;
I've tried justify-content, alignitems... I'm not sure what exactly to type to get it aligned on the right side of its container. Any advice?
Use float: "right" as a style.
Ok so, you need to set the justify-content and align-item properties to the parent node of your image to move the child inside your parent. If you don't want to set any properties to the parent then use the position: absolute or position: fixed to your image.
I have read Antd's layout design documents and the docs on Grid and Layout. What I don't understand is how to accomplish the following design in Antd:
I'd like my app to have a single centered column.
On a wide screen (landscape clients), the center column should be fairly narrow. In terms of grid, maybe 8 units.
On a narrow screen (portrait clients), the center column should use a relatively large
width. In terms of grid up to 24 units in case of very narrow/small screen sizes.
Basically this sounds like I'm looking for the good old container with a max width. I could obviously come up with some custom CSS to style a custom <div>, but this makes me wonder:
Am I missing something, or is there really no way to achieve that with Antd's layout system natively?
If so, am I doing something wrong in terms of modern UI design philosophy?
We have done this. Not exactly via Ant Design, but used a lot of Ant Design inside this.
I am not sure what other solutions are, but this is how we did it. The container you talked about was the parent container of our website, with everything else rendered inside this.
We created a routing inside the main container (as bottom tabs, so was convenient for us) and set its max-width to 420px. Since everything was contained in the bottom tabs, our app was centered when on landscape clients, and looked to fill the width on portrait mode.
Code for clarity. (its a react app)
App Container CSS:
.App {
text-align: center;
height: 100vh !important;
}
Parent Container CSS:
.parentcontainer {
height: calc(100vh - 50px);
max-width: '100%';
display: inline-block;
width: 100vw;
}
Tab CSS:
position: 'fixed',
padding-bottom: '10px',
bottom: '0',
width: '100%',
max-width: '420px',
This worked for us, and the behavior is what you desire.
Is it possible to configure Froala editor so that it always matches the size of the parent component in height and width?
Currently it goes beyond the boundaries of the parent component as the amount of text increases, not matter what layout I am using.
I have checked the list of available options and examples, but did not find an appropriate settings. The only option I can use now is explicitly set height and width for a Ext.froala.Mixin.editor config.
I am using ExtJS 7.2, modern toolkit.
Fiddle
I expect a scroll inside a Froala editor component, but instead a Froala editor component exceed height of the parent component.
Set overflow: auto; for flora wrapper:
.fr-box.fr-basic.fr-top .fr-wrapper {
overflow: auto;
}
Fiddle
UPDATE for extjs v7.5.0, froala v4.0.8:
.x-froala .fr-wrapper {
flex: 1 1 auto;
overflow-y: auto;
height: 0px;
}