I have four buttons which are right-aligned on the navigation bar and title in center. The title text is bigger and it's overlapping with right buttons. How can I set title width so that it shows the three ellipses when text is overflowing?
You can use CSS like the example below:
#wrapperDiv {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
I arrange a fiddle: https://jsfiddle.net/svpbe351/
Related
click one of the card
the card expands and pops up
tried to scroll but only scrolling the background page while I wanted to scroll down to view more text
I already tried overflow:hidden which doesn't scroll ( and the scroll bar is ugly)
How can I solve this ? thank you very much !
https://codesandbox.io/s/framer-motion-animatesharedlayout-app-store-demo-i1kct?from-embed
It looks like a few things are preventing the scroll:
height: auto sizes the container to fit the content.
overflow: hidden instead of scroll.
pointer-events: none prevents the element from getting the scroll events.
Changing this block in styles.css:
.open .card-content {
height: auto;
max-width: 700px;
overflow: hidden;
pointer-events: none;
}
to this:
.open .card-content {
max-width: 700px;
overflow-y: scroll;
}
seems to work.
For example for same component at some places I want to use border while at other places border-bottom
How can I achieve this?
Also can anyone please tell me what this code in styled component means:
color: ${prop('theme.color.blue', '#0F0F3A')};
Each properties can take 4 values. Set width to 0 if you don't want the border.
div {
padding: 20px;
border-style: solid dashed dotted solid;
border-width: 10px 20px 30px 40px;
border-color: blue yellow green red;
}
<div> I AM A DIV</div>
Edited; see bottom of post
I have a layout that works perfectly in everything except Internet Explorer 7.
I have a container div that has a width and hasLayout (I've tried zoom and various other things that ought to set this, but nothing changes). Inside are three floated elements, one left and two right. Below them is an element that is clear: both and it actually is doing that, but the container is ending at the shorter float even when I set a height for it including a height taller than the originally/naturally taller one.
Here's what it looks like: http://tinypic.com/r/ea3vpy/8
It should look exactly like that, except with the two elements that are awkwardly not in the layout inside the content area.
I've tried adding empty divs with clear: both, I've tried clearfixes, I've tried floating the container. I even added a container around the two right floating divs and floated that instead of them, but it didn't change anything. Overflow is not really an option because then I have to either cut off the content or have scroll bars inside the layout.
Here's the relevant CSS:
#content {
width: 669px;
height: 100%;
padding: 20px;
padding-top: 0;
position: relative;
display: table-cell;
vertical-align: top;
background-color: #F7F8F7;
text-align: left;
}
#content { /* To make it play nice with the sidebar */
_width: 709px;
*display: inline;
*position: absolute;
*left: 0;
*zoom: 1;
}
p#indexwelcome {
max-width: 330px;
min-height: 440px;
float: left;
}
#dogimg {
width: 323px;
max-width: 100%;
height: 246px;
margin-left: 10px;
float: right;
}
#loginbox {
max-width: 323px;
margin: 20px 0;
padding: 10px;
position: relative;
float: right;
}
#itemsbox { /* the one with the bananas */
width: 644px;
height: 142px;
margin-top: 20px;
position: relative;
clear: both;
}
And the HTML:
<div id="content">
<h1>Heading</h1>
<p id="indexwelcome">Text paragraphs here</p>
<img src="images/dog.jpg" id="dogimg" alt="dog" />
<div id="loginbox">
<p>Login box stuff</p>
</div> <!-- loginbox div -->
<div id="itemsbox">
<!-- banana images here -->
</div> <!-- itemsbox div -->
</div> <!-- content div -->
EDIT: So I fixed the issue although it's not quite ideal. Setting the content and sidebar to height: auto (as opposed to height: 100%) made them expand for their content.
However that page container (the green space) still won't expand even with height: auto. I have to set a specific min-height or height, which isn't great because the page content is dynamic, so other pages have extra space if their content is shorter than what it's set for and it'll be the same original problem if the content is larger. And then of course the content and sidebar boxes still aren't the same length (but that's a whole other issue).
Here's the page CSS:
#page {
width: 1025px;
height: 100%;
min-height: 650px;
margin: 15px auto;
padding: 10px 0;
position: relative;
background-color: #7B9F73;
*min-height: 990px;
}
I am creating a full width grid of images that use media queries to change how many columns of images there are. You can see a working demo here: http://vitaminjdesign.com/grid/
Using img{max-width: 100%} the images stretch to the width of its container. This works great, and the demo is working. As you can see, there should be a 1px space between each image. I am using the border-box model so the space is created by using padding-right.
BUT, if you resize the window, you will notice that the 1px margin between images sometimes change, and appear to have these inconsistent amounts of white space between/below images.
Upon inspection of each image, the browser is rendering the images at slightly different sizes (1px difference, but no more). This creates these uneven lines. The question is, if every image is EXACTLY the same size, how are they being rendered at slightly different sizes (which is turn causes this layout problem)? If you inspect each image, you will notice that the sizes are sometimes different, and sometimes the same (depending on the screen width).
CSS Below:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#work{width:100%; clear:left;}
#work li{width:20%; height:auto; padding-right: 1px; padding-bottom: 1px; float:left; position: relative; transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;}
#work li a{display: block; position: relative; width: 100%; height: auto;}
#work li img{display: block; max-width: 100%; height: auto; }
I will not list the media queries here, but all they do is change the width of the list items.
Any thoughts as to why this is happening and how I can fix it?
The issue is on your media-queries and nth-child selectors. But I'm not really sure why setting border-right: none; is adding 1px of height for the grid. To solve the problem just delete the border-right: none; inside this selectors:
#work li:nth-child(3n+3) {
border-right: none; //Delete this
}
#work li:nth-child(2n+2) {
border-right: none; //Delete this
}
Removing the margin attribute on the * selector solves the problem for me.
* {
-moz-box-sizing: border-box;
font-weight: normal;
padding: 0;
}
The problem is because each list item has a calculated width. BEcause all of the columns EXCEPT the last column have a padding-right / border-right, they effectively have a different width, thereby making the image a different width/height. By removing the rule for zero padding/border on the last item of the column, all of the images have the exact same width and height.
this is driving me crazy...might be something very simple and I just need another set of eyes to look at it...
I have this in my CSS:
#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
padding: 11px 0;
font-size: 0.875em;
}
and call it here in my HTML:
<div id="recipient">
<h3>Meet the 2010 Recipient!</h3>
<img src="images/2010_headshot.jpg" alt="foo" />
</div>
Pretty simple, right? In Firefox it renders about 20px longer in height than IE7 (I can tell by where the bottom of this div hits next to other elements on the page). I am running in standards mode, and have looked at the Firefox version in Firebug and the IE version with Firebug Light and the IE Dev Toolbar -- don't see anything weird in either... the top of the div starts in the right spot, so it doesn't look like the margin collapsing...
If I manually add padding/height to the CSS, I can get IE7 to line it up at the right height, but then the div in Firefox is too long! It's not a critical part of the design, but it's bugging the sh!t out of me!!
Thanks in advance...
It's IE and the different way it's handling the default h3 margins inside a floated element
usually this can be fixed by giving the offending element (any element which has default margins!) explicit margins, but in this case it's not working because of the top padding of the container ?
The best fix I can come up with is to remove the top padding from the #recipient div and explicit;y make the top/bottom margins on the h3 11px, this makes for nice even spaces through the effect (btw this extra bit only happens if the div is taller than the min height) - here's some working code - I also put a background color on the h3 which if you do in your code will show the 15px or so extra gap..
CSS:
#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
margin: 0;
font-size: 0.875em;
padding-bottom: 11px; /* bottom padding only */
}
h3 {
margin: 11px 0; /* explicitly set these */
background: #fcf;
}
HTML: (with placeholder image for testing)
<div id="recipient">
<h3>Meet the 2010 Recipient!</h3>
<img src="http://placekitten.com/350/200/" alt="foo" />
</div>