I am using react-indiana-drag-scroll, and I am doing a Horizontal scroll, but the last item ( the 30th) 's right red shadow cannot show on screen
I tried to add padding/ margin/ border, still does not work.
sandbox: https://codesandbox.io/s/react-indiana-drag-scroll-default-forked-1xcxt
It's not the issue of react-indiana-drag-scroll. It's the peculiarity of browsers behavior [1], [2].
There are many different solutions to solve your exact problem.
Emulate margin by :after pseudo-element (example):
.container:after {
content: "";
flex: 0 0 10px;
}
.row:last-child {
margin-right: 0;
}
Use inline-block (example):
.container {
display: block;
white-space: nowrap;
}
.row {
...
margin: 10px;
display: inline-block;
}
Other solutions could be found by the links above.
Related
I am working on this page: link to page.
Inside h2 I have before and after elements. In IE they are too big, original width and height these images are not working. When I am trying to resolve this problem, in FF and Chrome everything is getting even worse.
In Edge things are a little bit different - I have figured out a way to make images smaller, but before element is inside h2 text.
Here are the examples:
Normal (from FF and Chrome)
A little strange (from Edge)
So crazy (from IE)
CSS code:
h2{/*How I am displaying h2 elem */
text-align: center;
width: 80%;
margin: 45px auto 115px !important;
text-transform: uppercase;
color: #fff;
}
h2::before {
content: url(img/pepper.svg);
margin-right: 10px;
position: relative;
height: 50px;
}
h2::after{
content: url(img/apple.svg);
margin-left: 10px;
position: relative;
height: 50px;
}
#supports (-ms-accelerator:true) { /*Trying to resolve problem in Edge */
h2::before {
position: absolute;
}
h2::after{
position: absolute;
}
}
Try making the positon of before and after leftmost and rightmost.
If it doesnt work,try making pixels to %.
As #ankit says, removing width: 80% is doing right on IE. Also removing part with supports resolved problem with Edge.
Another approach (assuming you have control of the HTML): add an empty right after the input, and target that in CSS using input+ span:after
.field_with_errors {
display: inline;
color: red;
}
.field_with_errors input+span:after {
content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" /><span></span>
</div>
I'm using this approach in AngularJS because it will add .ng-invalid classes automatically to form elements, and to the form, but not to the .
Is it possible to implement vertical layout with CSS only, and not with HTML elements?
I have a list of divs inside one div. By default the next element is right to the last, when there's no place on right, it is placed below.
I'd like to achieve the same with CSS style settings. Is it possible?
By CSS-only I mean, we have div and its children, and do not add anything special such as:
line-breaking elements ( <br/>, <div style="clear:both;"/> )
UL tags
tables (yes, still used, f.g. JSF almost exclusively based on them)
So:
<div id="menu">
Page 1
Page 2
Page 3
</div>
And CSS implementing vertical layout:
#menu { ??? }
#menu a { ??? }
Is there a ??? that I could use to achieve what I want?
Display anchor tags as block elements.
#menu a {
display: block;
}
Do you mean something like this?
http://jsfiddle.net/7Y9jS/
#menu {
width: 300px;
}
#menu a {
display: block;
background: #ccc;
color: #000;
padding: 10px 0;
text-align: center;
margin-bottom: 2px;
}
<div id="menu">
Page 1
Page 2
Page 3
</div>
set display block to a
#menu a {
display: block;
}
use float left
#menu a {
float:left;
}
and then add the class group to your #menu
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
As a part of learning CSS (& practically applying it — by creating simple themes), today I wanted to know some proper ways of clearing floats in CSS.
I wanted to see how Twitter does it, so I downloaded Bootstrap, went through the bootstrap.css file, and found what I was looking for (I found two code blocks):
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
&
.container {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.container:before, .container:after {
display: table;
content: "";
}
.container:after {
clear: both;
}
I immediately tried it out, and that specific part of my code looked like so:
<p class="sample-preview">
<span class="sample-preview">PREVIEW</span>
<em>This is italicized aka emphasized</em>, and so is <em>this</em>.<br />
<strong>This is bold aka strong emphasis</strong>, and so is <strong>this</strong>.<br />
Use <strong><em>italics and bold together</em></strong> if you <strong><em>have to</em></strong>.
</p>
+
p.sample-preview {
border: 1px solid #FFCCC9;
background: #FFEBE9;
outline: 2px solid #FFEBE9;
padding: 10px;
}
span.sample-preview {
display: inline-block;
float: right;
margin:0;
font-weight: bold;
font-size: 12px;
background: #FFCCC9;
padding: 2px 5px;
}
.sample-preview {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.sample-preview:before, .sample-preview:after {
display: table;
content: "";
}
.sample-preview:after {
clear: both;
}
Although I am not entirely sure, I think this code is causing a weird bug on the page I tried it. Why do I think so? Everything seemed fine when I removed display: table; from the code using Firebug.
You can take a look at the page here and the bug is — the first pink box is taller than the content. What am I doing wrong?
The issue is that you're also clearing the floated menu to the right.
There's two solutions for that:
the usual is to float your content area itself to the left. This means that everything inside it is in a different float context. Your clear will only affect the elements inside of it.
another trick that works is specifying overflow: hidden on your sample-preview paragraph. This is probably easier to do. Specifying the overflow property on an element (but not set to visible) causes it to behave like a float container.
Cfr: http://www.brunildo.org/test/clear.html, http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
I should also note that with this overflow trick, you don't need the clearfix at all.
The html is:
<div class="choose-os">
<p>
Microsoft Windows
Apple Mac OS
</p>
</div>
The CSS is:
.choose-os {
margin: 20px 0;
padding: 20px;
background: #e7eefa;
}
.choose-os p {
margin: 0;
}
.choose-os p a {
display: inline-block;
text-indent: -100000px;
height: 56px;
width: 308px;
}
.choose-os p a.windows {
background: url(../images/button-windows-bg.png) 0 0;
}
.choose-os p a.macos {
background: url(../images/button-macos-bg.png) 0 0;
}
.choose-os p a:hover {
background-position: 0 -56px;
}
Any suggestions would be greatly appreciated as to have the background image also appear on IE7.
The text-indent: -100000px; in combination with inline-block is what's causing the two elements to not be visible in IE7, due to a bug.
You need to find some other way to hide the text for IE7 (or not use inline-block at all, see below for this more suitable fix).
Options include the method in the comment by #Sotiris, or:
.choose-os p a {
display: inline-block;
height: 56px;
width: 308px;
text-indent: -100000px;
/* for ie7 */
*text-indent: 0;
*font-size: 0;
*line-height: 0
}
Which uses the *property: value hack several times to hide the text in IE7.
The problem does seem to be related to the use of display: inline-block.
So, another workaround (which I prefer to my previous one) is:
.choose-os {
margin: 20px 0;
padding: 20px;
background: #e7eefa;
overflow: hidden
}
.choose-os p a {
float: left;
margin-right: 4px;
text-indent: -100000px;
height: 56px;
width: 308px;
}
To display inline-block properly in IE7, add the following styles to .choose-os p a
zoom:1
*display:inline
(The star is important! It's ignored by modern browsers, but not IE6/7)
IE7 doesn't respect inline-block, so you have to do a little magic to make it work. There's a great description here: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
[edit] If text-indent is also part of the culprit, you may be better of sticking with display:block and setting float:left on your elements. Probably multiple valid paths to take :)
IE7 has some serious limitations in CSS. I would recommend avoiding the shorthand notation and explicitly declaring each property, then validate the CSS sheet here.
I've been working on this for a while, and just can't seem to figure it out.
I have a series of position: relative spans which are wrapped around some text and a position: absolute span set to right: 0;. I would expect the second span to be stuck to the right of the first span, even if the first span is broken onto two lines — but alas, I've only been able to get this to work in Safari.
To see an example, take a look here: http://workingonit.andrewleclair.com/slashtest/.
I found this page: http://www.brunildo.org/test/inline-cb.html which suggests that this technique, although technically correct, is not well-supported. What I'd like is for each / to be stuck to the end of each li even if it wraps to multiple lines..
Any ideas? Thanks.
It looks your header is too small. Try to remove the width. If i do so it looks fine in FF 3.6.
#header {
float: left;
margin-right: 48px;
margin-top: 26px;
/*width: 334px;*/
}
Another way is to add white-space: nowrap to your li.
li {
color: #888888;
list-style-type: none;
white-space: nowrap;
}
Edit:
Try this instead...
.slash {
color: #BBBBBB;
padding: 0 2px 0 19px;
}
.header {
background-color: yellow;
border: 1px solid red;
}