I'm trying to create a row that spans the width of my device that the user can tap to take then to a specified link.
I've created an image that is the 'disclosure indicator' (chevron) found on table rows in iOS. I just can't figure out how I can set my multi-line text to the left of the chevron, and keep the chevron to the right of the text and centered. (see image).
Any ideas?
Thanks
You can use transform to vertically align the chevron.
Fiddle
div {
position: relative;
border: 1px solid black;
padding: 10px 40px 10px 10px;
}
div:after {
content: '›';
font-size: 40px;
color: #444;
right: 20px;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Related
I've got a fairly simple CSS where I want to display a border slightly off center to the right and bottom, I'm using the pseudo-selector :after to display it.
The problem i'm having is that the border it's displaying is running to the height of the outer div that's dictated by the amount of text displayed, rather than the img itself (which is what I want it to do).
If I put another div inside to wrap around the image it doesn't seem to make a difference, the same if I make the pseudo-selector after the image and convert the image to a block.
Js Fiddle to show all you lovely smart people that might be able to help me!
If I put another div inside to wrap around the image it doesn't seem to make a difference
That’s because that div does not actually wrap around the image taking its dimensions – but is as high as your whole outer container, because that has display: grid
You’d need to wrap .projectimage into an additional div, so that that becomes the grid item that takes full height, and the .projectimage element can then gets is height from the image it contains.
.project {
width: 60%;
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 auto;
padding: 50px 0;
}
.projectimage {
position: relative;
display: inline-block;
}
.projectimage img {
position: relative;
z-index: 2;
}
.projectcontentleft {
padding-right: 50px;
}
.projectimage img {
width: 100%;
height: auto;
}
.projectimage:after {
content: " ";
position: absolute;
left: 30px;
bottom: -30px;
border: 10px solid rgba(214, 23, 71, 0.07);
display: block;
width: 100%;
height: 100%;
transition: all 300ms linear 0s;
z-index: 1;
}
<div>
<div class="project">
<div class="projectcontentleft">
<h3><strong>Header</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3><strong>Appeals</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="projectimage-holder">
<div class="projectimage">
<img src="http://www.bbbhire.co.uk/images/services2.jpg" />
</div>
</div>
</div>
I have a modal I created using ReactDOM.createPortal();. It works well except I can't seem to style the modal in a way that works on both Chrome and Safari.
html:
<body>
<div id="main">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
</div>
<div id="portal">
<div>
<div class="modal-wrapper">
<div class="modal-card">
<div class="row">
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="background-overlay"></div>
</div>
</div>
</div>
</body>
scss:
#portal {
.modal-wrapper {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
overflow: hidden;
max-height: 100%;
.modal-card {
background: white;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
z-index: 10;
max-width: 800px;
margin-top: 10px;
width: 50%;
overflow: auto;
padding: 10px;
max-height: 90%;
}
.close-button {
position: relative;
}
.background-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: black;
opacity: 0.5;
}
}
}
Please see https://jsfiddle.net/alisonmtague/am5jfr37/26/ using both safari and chrome.
On Safari the .background-overlay overlays the .modal-card and you are unable to scroll the modal (background page scrolls instead). I expect the contents of the modal I'm creating to be pretty large so I need the modal to be scrollable. Ideally I would also like the #main div to not scroll when the modal is open.
Changing the z-index does not solve things
When you open the modal, apply a class to your <body> (i.e. fixed) and:
body.fixed {
overflow: hidden;
position: fixed;
}
Obviously, you need to remove it when closing the modal.
Additionally, your modal scroll container should have:
{
-webkit-overflow-scrolling: touch;
}
..., besides overflow-y: auto; and a fixed height, smaller than 100vh. That's about it.
Note: Depending on device, Safari version and iOS version you might not need both (second one being the real important one), but with both you get max compatibility.
Ref: "On Safari the .background-overlay overlays the .modal-card and you are unable to scroll the modal":
Assuming adding position: relative; to .modal-card wouldn't work: what is stopping you from placing .background-overlay as first child of .modal-wrapper and .modal-card as second?
Hi I am trying to format my web paragraphs so that the text is justified and the last line is centered. I found the CSS property "text-align-last" which allows me to specify the alignment for the last line.
The problem is that this property is not supported by Chrome and Safari (yet...?).
Anyone have an alternative or a trick to do that?
The W3C manual: http://www.w3schools.com/cssref/css3_pr_text-align-last.asp
Thanks
I don't think it's possible in CSS alone.
Here's a JavaScript solution, in which a clone lies behind the element. The element has text-align: justify and the clone has text-align: center.
The code then reduces the height of the original element so that only the clone's last line displays.
var p= document.getElementById('lorem'),
clone= document.createElement('p');
clone.textContent= p.textContent;
clone.className= 'clone';
p.parentNode.insertBefore(clone, p);
p.style.height= p.offsetHeight - 14 + 'px';
#lorem, .clone {
position: absolute;
line-height: 14px;
font: 14px arial;
width: 500px;
}
#lorem {
text-align: justify;
overflow: hidden;
background: white;
}
.clone {
text-align: center;
}
<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
My margins when using flexbox (current version or display: flex;) seem to be doubled and I can't figure out why. All the other margins between sections on the page show up as 10px as they have been set, but the ones for the flexbox content show up with around double that. I have already tried setting the wrapper div (#output) to margin: 0px; and padding: 0px; but that doesn't have any effect. Is this a flexbox 'feature'? Or is there something wrong with the margin/padding settings for my CSS?
The HTML:
<div id="all_content">
<section id='search_box'>
<h1>Auto Primer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div id="output">
<nav id='user_input'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</nav>
<section id='gene_selected'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
<section id='primers'>
<h2>Primers</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id='how_to'>
<h2>How To Use Auto Primer</h2>
<p><span id="form_out"></span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
The CSS:
div#all_content {
width: 1200px;
margin: 0 auto;
padding: 0px;
}
section#search_box {
padding: 10px;
margin: 10px;
background: #ebf4fb;
border:2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
div#output {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
nav#user_input {
background: #ebf4fb;
border: 2px solid #b7ddf2;
width: 275px;
padding: 10px;
margin: 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
section#gene_selected {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
margin: 10px;
background: #ebf4fb;
border: 2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
section#primers {
padding: 10px;
margin: 10px;
background: #ebf4fb;
border: 2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
section#how_to {
padding: 10px;
margin: 10px;
background: #ebf4fb;
border: 2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
EDIT:
I managed to get the margins to look the same by giving the left flex element:
margin: 0px 5px 0px 10px;
and the right flex element:
margin: 0px 10px 0px 5px;
instead of margin: 10px; as all the other elements on the page use. While this works I'm still a little at a loss as to why flexbox does this.
EDIT:
Here's a jsfiddle demonstrating the problem: fiddle. Updated and simplified further.
The issue is that margins are applied twice on your side by side flex sections. You can fix this by simply distributing the margins properly between the side by side elements.
Based on CSS3 Definition:
http://www.w3.org/TR/css3-flexbox/#item-margins
The margins of adjacent flex items do not collapse. Auto margins absorb extra space in the corresponding dimension and can be used for alignment and to push adjacent flex items apart; see Aligning with ‘auto’ margins.
This is what happens in your case, that the margins on your side by side flex items do not collapse, but on your other flex items, they do collapse so the margins are not applied twice on those flex items.
I'd like to set the textarea's rows and cols attributes via CSS.
How would I do this in CSS?
<textarea rows="4" cols="50"></textarea>
It is equivalent to:
textarea {
height: 4em;
width: 50em;
}
where 1em is equivalent to the current font size, thus make the text area 50 chars wide.
see here.
width and height are used when going the css route.
<!DOCTYPE html>
<html>
<head>
<title>Setting Width and Height on Textareas</title>
<style>
.comments { width: 300px; height: 75px }
</style>
</head>
<body>
<textarea class="comments"></textarea>
</body>
</html>
I don't think you can. I always go with height and width.
textarea{
width:400px;
height:100px;
}
the nice thing about doing it the CSS way is that you can completely style it up. Now you can add things like:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
As far as I know, you can't.
Besides, that isnt what CSS is for anyway. CSS is for styling and HTML is for markup.
I just wanted to post a demo using calc() for setting rows/height, since no one did.
body {
/* page default */
font-size: 15px;
line-height: 1.5;
}
textarea {
/* demo related */
width: 300px;
margin-bottom: 1em;
display: block;
/* rows related */
font-size: inherit;
line-height: inherit;
padding: 3px;
}
textarea.border-box {
box-sizing: border-box;
}
textarea.rows-5 {
/* height: calc(font-size * line-height * rows); */
height: calc(1em * 1.5 * 5);
}
textarea.border-box.rows-5 {
/* height: calc(font-size * line-height * rows + padding-top + padding-bottom + border-top-width + border-bottom-width); */
height: calc(1em * 1.5 * 5 + 3px + 3px + 1px + 1px);
}
<p>height is 2 rows by default</p>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>height is 5 now</p>
<textarea class="rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>border-box height is 5 now</p>
<textarea class="border-box rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
If you use large values for the paddings (e.g. greater than 0.5em), you'll start to see the text that overflows the content(-box) area, and that might lead you to think that the height is not exactly x rows (that you set), but it is. To understand what's going on, you might want to check out The box model and box-sizing pages.