container, by default, puts contents in the centre (with margins on the side) instead of filling up the whole screen.
What is the rationale behind this?
#media (min-width: 768px) {
.container {
max-width: 750px;
}
}
#media (min-width: 992px) {
.container {
max-width: 970px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
Is this a question regarding why, by design, container doesn't fill out the entre screen?
While I can't claim I know for sure, I can imagine this is a decision based upon the fact that you rarely would want your content to start right at the edge of a screen. I can also imagine many people are more comfortable doing a couple of static layouts rather than a completely liquid design, not to mention some layouts can be very challenging to design with a percentage based width.
You could obivously go liquid and use max-width: 100% and apply padding to the container instead. Personally this is my preferred approach.
There's no best practice here, the better approach is largely based on the layout in question.
You can also use the container-fluid class, which makes everything percentage based. So instead of the container having a fixed width and being centered on the page, you then have container-width equal to 100% of the viewport.
Related
So, previously i was using the 'ml-auto' class for my navbar, for my dropdown to push itself all the way over to the left. However, i dont want it to push itself all the way to the left when it goes into a small screen, and the navbar changes into a vertical orientation.
I tried giving my NavDropdown the following class and id
className={styles.naviDropdown}
id='navigationDropdown'
and apply the following style to it
.naviDropdown #navigationDropdown {
margin-left: auto !important;
}
#media (max-width: 768px) {
.naviDropdown #navigationDropdown {
margin-left: 0 !important;
}
}
However, this does not work, despite using the !important tag, which i previously thought was a universal trump card that would override everything else, regardless of the high amount of specificity that i already have, but alas, it does nothing.
So i thought, hmm, maybe i have to go all the way up to my custom.scss, which is theming my bootstrap, and already overriding some stuff.
Well, unfortunately, there isn't a $dropdown-margin-left variable that i can easily just change myself, so i attempted to implement it like this
.dropdown {
#navigationDropdown {
margin-left: auto !important;
}
}
#media (max-width: 768px) {
.dropdown {
#navigationDropdown {
margin-left: 0 !important;
}
I have been enjoying the bootstrap components, but man if they don't make it as hard as possible for you to simply override their css, it's like they want to force you into doing things a certain way.
Edit:
So, ive found out, through the inspector, that for some reason, the id is being applied to the a tag generated by React Bootstrap, not the encompassing div, which is given the proper class. Any ideas what might be going on?
Since your element has both the class and the id, your selector needs to be:
.naviDropdown#navigationDropdown
with no spaces.
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.
I am extensively using the showPopupDialog(...) function of Dialog and it works fine. I remember that in the past it didn't work on Android or there were problems on Android, but now it works pretty well on Android.
But I have a styling problem with Android. Basically I want there to be a Component shown in the middle of the Dialog. This is the easiest case, sometimes I add buttons on the south side. In both situations, however, I can put the content of the Dialog popup exactly on the center on iOS only, while on Android there are problems.
This is my current CSS:
#media platform-and {
PopupContentPane {
margin: 0px;
padding: 1.5mm;
padding-bottom: 3.0mm;
}
}
#media platform-ios {
PopupContentPane {
margin: 0px;
padding: 1.5mm;
padding-top: 0px;
}
}
The main difference between iOS and Android is that while iOS works correctly with this CSS whether the arrow is up or down, on Android, to get the same result of iOS, I would need a CSS made like this:
#media platform-and {
PopupContentPane-ArrowTop {
margin: 0px;
padding: 1.5mm;
}
PopupContentPane-ArrowBottom {
margin: 0px;
padding: 1.5mm;
padding-bottom: 3.0mm;
}
}
Or something similar (with a few more tweaks).
So, on Android, when the arrow is on the bottom I need an extra padding-bottom. That'all, but it's not possible because currently there aren't an UUID for the PopupContentPane when the arrow in on the top and another UUID when the arrow is on the bottom.
Any idea or workaround? Thank you
(I add that so far this is the only situation where I need to use the #media tag of CSS to differentiate iOS styles from Android styles.)
Originally when we wrote the popup dialog it was an iOS only feature since the styling were only on iOS. We used a 9-piece image border to do the popup and we didn't want to replicate that theme element in every one of the native themes so we left it to the developer.
Later on we came up with the ability to show an arrow on a RoundRectBorder. Another advantage was the move on iOS/Android to flat design which made the previously complex dialog style into a simple solid white popup. So we implemented this cross platform in white. But because iOS has the pre-existing image border it's still used on iOS and wasn't removed. We should probably remove it and deal with the minor compatibility issues that arise.
I recently worked on that in InteractionDialog here: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/components/InteractionDialog.java#L786-L815
It might make sense to do something similar for Dialog which doesn't seem to have that code anywhere: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/ui/Dialog.java#L1209
I have a series of text fields in an Android app. I want to align the text vertically to the center (and horizontally to the left), but I can't find the correct approach.
This is my code:
textField.setUIID("TextFieldSome");
textField.getAllStyles().setAlignment(Component.BOTTOM);
This is the css:
TextFieldSome {
background-color: rgba(255,0, 255, 0.2);
color: blue;
font-size: 9pt;
margin-left: 5pt;
margin-right: 15pt;
margin-bottom: 5pt;
text-align: left;
padding-left: 20pt;
}
This is the result:
I have tried WITHOUT css and using these code variations:
textField.getAllStyles().setAlignment(TextField.BOTTOM);
textField.setAlignment(Component.BOTTOM);
textField.setAlignment(Component.TOP);
textField.setAlignment(TextField.BOTTOM);
But the text always aligns vertically to the center and never to the top or bottom.
What am I missing?
The setAlignment method is defined as:
Sets the Alignment of the Label to one of: CENTER, LEFT, RIGHT
We don't support vertical alignment of text in the API. Even center horizontal alignment isn't supported well in text components because of the complexity related to that. The core problem is switching back and forth to native which would make the text "jump".
I'm working in web project(Angularjs) and facing one problem. I have given height: 80% and my screen resolution is 1280 x 1024. but when I opened same project in my laptop(Resolution 1386*768) Div get invisible. I have tried following code
#media (min-height: 500px){
#chatViewList
{
overflow-y: auto;
position: relative;
height: 80%;
}
}
Please suggest andd help me.
Is the height of the parent element fixed? If not you can't use a percentage based height (there are some exceptions but they're unlikely to be practical).
I would suggest using the viewport height unit instead. vh allows you to specify a height in relation to the viewport window.
#media (min-height: 500px) {
#chatViewList {
height: 80vh;
overflow-y: auto;
position: relative;
}
}
Browser support: http://caniuse.com/#search=vh
VH is what you need!
height: 100vh; = 100% of device height
You can of course use like 80vh for 80% of the device height. VH means viewport height
You can set the responsive height of a div when it's part of a parent div that has a defined height.
Or, You can pre-define the height of the div or dynamic specify static values based on various commonly available heights <-- could be an overkill but can work.
Alternatively, try the following links"
https://www.sitepoint.com/community/t/how-to-make-div-height-responsive/30438
OR
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Its not best practice to create media queries to resolution height. how ever as you asked here I guess you trying to create full screen web page. to make it work set you html tag and body tag height 100%
ex:
html, body {
min-height: 100%;
hight: 100%;
}
like this what ever resolution you working on web page hight will remain 100%. then add CSS height as percentage as you wish. And also make sure you set min-height and max-height to all.
This is a little trick that I am using when creating full screen web pages
Hope this will help
for calculating the screen height for every screen we can use this formula.
height:calc(100% - 200px);
which calculate the height and subtracts 200px from it.
we can use any value in place of 200px
example
#div1 {
height:calc(100% - 200px);
}
if the screen size is 1000, Resulting div1 height will be 800