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.
Related
I'm trying to add a label (title) inside the border of my container. Although there are many implementations of input fields with this feature, I haven't found any for normal containers. Here's a screenshot of what I'm referring to:
I considered adding a background to the text, but since the container's background is different from the background behind it, this won't work as the colors will clash. Does anyone have any ideas on how to achieve this in React Native?
I haven't implemented this in react-native so I can't say if this will work for you, but I have done this in a web app before using a linear-gradient background on the label with a little padding-left and padding-right:
label {
background-image: linear-gradient(transparent 50%, #666 50%);
padding-left: 3px;
padding-right: 3px;
}
The hex value would be the background color of your input.
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 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.
There is simple form and some textfields on this form. I have to set colors
(background and font) in two of them on runtime.
I tried to do it two ways:
1) fieldInstance.addClass('aaa') with css like this
.aaa .x-form-field {
background-color: black;
color: red;
}
2) fieldInstance.setFieldStyle('font-weight: bold;color: red;background-color: black;');
both methods are working because I see the bottom age of both is
fields is thick in black color, and both fields are working the same (almost) way.
Before enter and after exit background color is white.
When I start to edit this fields, background of first
is always white, background of the second is black until
I leave the field.
Could you explain me whats wrong?
For <input> element applied many classes beside x-form-field, like x-form-text and some of them define color and background-color aswell. So I guess that some of that classes may be more specific than .aaa .x-form-field. Try to use !important within your CSS rules:
.aaa .x-form-field {
background-color: black !important;
color: red !important;
}
I think that the 1st function append a class to the Others already presents.
In the second case you replace values of style already setted.
Maybe to have the same issue you need to modify the x-form-field fields, instead of append Others.
I Always use the second option if i have to modify style on Runtime.
maybe posting other code i can see better where the problem could present
Can I have a multi line toolbar?
I need a fixed header for all my pages, but the ons-toolbar have only one line. I need two of it in my header.
It is possible to do that?
Thank you!
You can put an extra <div> with the appearance of a toolbar with class="navigation-bar": http://onsen.io/reference/css.html#toolbar
It is also possible to change the CSS of your current toolbar to make it bigger, if you want. The anwer of this question may be helpful: Doesn't show div in onsen ui and angularjs
Hope it helps!
Edit: some CSS to do this...
Fix the position to the top under a main toolbar: position: fixed; top: 44px;
Change the page content so the new toolbar does not overlap with it:
ons-toolbar ~ .page__content {
top: 88px;
}
Working here: http://codepen.io/frankdiox/pen/YXKyjX