So I'm having an issue with flexbox in css. Particularly when using the flex shorthand property. For example:
If I have flex: 0 0 30%
In IE it just seems to get ignored in certain places. I'm using modernizr so I'm targeting the selector as:
.no-flex{
.st-col-thirds {
width: 33%;
}
}
Which I thought would work... But it doesn't.
Then I tried:
.no-flex{
.st-col-thirds {
min-width: 550px;
margin: 5px;
}
}
This works but it's super hacked and it's not responsive.
This is not a duplicate question.
Related
I tried to use the maxlength attribute of an input element as a CSS width, but it does not seem to work:
input[maxlength] {
width: attr(maxlength em);
}
According to Mozilla I thought this might be the intended use case. Yes I saw the note. Is there any other way to get it working?
This works, but scales too much.
input[maxlength="2"] {
width: 2em;
}
input[maxlength="3"] {
width: 3em;
}
I'm a web designer and I have a doubt.When I create a site, for styling it I use CSS, but the problem is that the browser understand the CSS n different methods. I mean, if I put a rule in css like mydiv { margin-left: 20px; } in firefox I will see it with 5% distant from left. But if I open the site in Chrome I will see it more than 5% distance from left. And I can understand, because there's not the same graphic engine to use. My question is: Is there any method in CSS to maintain the same disntace, width, height and other, in firefox and chrome ( because there are the most used browser) ? I've heard about a -moz-document-url, that say that all rules aplies there will be applied only for Firefox. It is right ?
You can use this reset :
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
padding: 0;
margin: 0
}
NOTE
mydiv { margin-left: 20px; } doesn't exist in css mybe you mean #mydiv
{ margin-left: 20px; } or .mydiv { margin-left: 20px; }
I suggest that you use the Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
I am using ui-grid. I have a lot of rows and that is why I use scrolling. Everything works perfectly ok until I try to change the height of the rows. Then the scrolling becomes a mess. I have added an example here http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview
This is one of the tutorials from the ui-grid website - the only thing I have changed is the CSS. I have added these rules.
.ui-grid-cell-contents {
padding: 1px 1px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
.grid .ui-grid-row,
.grid .ui-grid-cell,
.grid .ui-grid-cell .ui-grid-vertical-bar {
height: 22px !important;
font-size: 12px;
line-height: 20px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
ui-grid-header-cell {
height: 55px !important;
}
.ui-grid-filter-container {
padding: 1px 3px;
}
Scrolling works perfectly ok if the above CSS rules are removed.
So I either need to add more CSS rules or I need to use some API of the grid in order to set row height properly.
Any help will be much appreciated.
How do I change row height and keep scrolling smooth?
UPDATE:
Here is a comparison between a default grid and one with modified CSS:
http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview
try to scroll the rows up and down for each grid. The difference should be pretty obvious.
Take out the:
height: 22px !important;
from the css and add:
rowHeight:22
to the gridOptions.
I have the feeling that this is much smoother.
Forked Plunker
scope.gridOptions = {
rowHeight: 33
}
The best way of changing the row height is from the grid options.
Try add this to your css:
.ui-grid-viewport .ui-grid-cell-contents {
word-wrap: break-word;
white-space: normal !important;
}
.ui-grid-row, .ui-grid-cell {
height: auto !important;
}
.ui-grid-row div[role=row] {
display: flex ;
align-content: stretch;
}
Just alter grid class accordingly.
.grid{
height: 70vh;
}
I want to build my minimal CSS framework. I did a grid system in SASS:
$width: 960px;
width: $width;
.grid-12 { width: $width; }
.grid-11 { width: percentage((($width/12)*11)/$width) }
.grid-10 { width: percentage((($width/12)*10)/$width) }
.grid-9 { width: percentage((($width/12)*9)/$width) }
.grid-8 { width: percentage((($width/12)*8)/$width) }
.grid-7 { width: percentage((($width/12)*7)/$width) }
.grid-6 { width: percentage(($width/2)/$width) }
.grid-5 { width: percentage((($width/12)*5)/$width) }
.grid-4 { width: percentage(($width/3)/$width) }
.grid-3 { width: percentage(($width/4)/$width) }
.grid-2 { width: percentage(($width/6)/$width) }
.grid-1 { width: percentage(($width/12)/$width) }
It works great, but sometimes - in some resolutions, eg. at my mobile with landscape view (960x540) some elements are 1px too short. It happens also when I resize browser.
What can I do?
some of the calculations will result in a number that can NOT be divided by 2
sometimes you will get .5px ...
and because of this . you will sometimes have 1 extra pixel
There is no "fix" for this. That's the way it is with all responsive layouts and grid systems. There are techniques like float isolation that can help keep your rounding errors from multiplying. Otherwise, 10 1px errors can turn into a 10px error. I wouldn't use that everywhere, but it's useful if you have a gallery-style layout with a lot of elements, all the same size, floating next to each other.
The real solution, mentioned in a comment above, is to adjust your design so that 1px rounding errors don't matter. If 1px can ruin your layout, responsive design isn't going to work.
You can't eliminate the rounding errors, but you have some control over where the missing pixels should go. By floating things left or right, and nesting in different ways, you can move the rounding errors where they will be least noticeable. Another solution is to apply layout (instead of float/width) to the last element in a row, and it will expand to fill the remaining space. The easiest way to apply layout is with overflow: hidden;, but that has some drawbacks.
i'm building a custom theme for wordpress and saw this in the default 2010 style.css file:
#wrapper {
margin: 0 auto;
width: 940px;
}
#wrapper {
background: pink;
margin-top: 20px;
padding: 0 20px;
}
now this is the default code (except the pink). when i try and collapse it, which seems logical, it makes quite a difference.
what i can't figure out is WHY you'd declare the same element twice like that? i've never seen that before...
WR!
It proves useful when you want to apply shared properties at multiple elements. Another useful application is adding stylesheets from multiple sources Example:
#head, #foot {
height: 100px;
}
#foot { /*Another foot*/
color: red;
}
Second example: CSS from multiple sources:
/* External stylesheet: common.css */
body {
background: yellow;
}
/* Inline stylesheet, overrides external stylehseet */
body {
background: pink;
}
When two properties have the same specificity, the lastly declared property will be applied.
It just overrides previously declared properties.
wrapper will now have margin:20px auto 0 auto (Top Right Bottom Left).