I have many boxes with different sizes; the sizes are unknown. I would like to use a CSS specification that does the same as text-align:justify does words. For example:
I would like to have a solution in CSS or CSS3. If not possible, JS is acceptable.
Possible CSS solution
If the boxes are set to display:inline-block, you can apply text-align:justify just like you would with text. Be aware, however, thattext-align:justify doesn't have any effect on the last line of text. So if there's only a single line that needs to be justified, nothing will happen.
One workaround for this, if you can modify the HTML, is to add a trailing element with 100% width, to ensure that the content you want to justify isn't the last line. If you're not able to modify the source HTML, a trailing element can be appended using JavaScript.
Here's a jsfiddle demonstrating this. Tested in IE6/7/8/9, Firefox, Chrome, Safari. (Note: had to add a between the boxes to get it to work in IE6/7).
Here's a little example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#container {
width: 500px;
margin: 0 auto;
font-size: 0; /* Fixed space caused by line breaks */
}
#container .inner {
display: inline-block;
background: red;
width: 25%;
border: 10px rgba(255,255,255,1) solid;
padding: 5px;
text-align: center;
font-size: 16px;
}
</style>
</head>
<body>
<div id="container">
<div class="inner">Lorem</div>
<div class="inner">Ipsum</div>
<div class="inner">Dolor</div>
<div class="inner">Sit</div>
</div>
</body>
</html>
This is considered slightly cheating. I'm using the white borders as margins between the elements. It would only work well if you had a solid color background on the parent.
Points to note:
box-sizing: border-box on all element, ensures that width: 25% includes padding and borders inside.
Using a white border to simulate the effect of a margin.
Using font-size: 0 on the parent, and font-size: 16px on the children, eliminates the white space caused by line-breaks between inline-block elements.
Related
UPDATE: It looks like this is a specific bug on the Safari iOS ONLY. Website when loaded as a web app (save on home) does not display
the same gap/buffer. You should only be able to solve this.
JSBIN - View it on Mobile safari vs other browsers.
Live output: http://output.jsbin.com/winuta/
JSBin: http://jsbin.com/winuta/edit?html,js,output
Original Post
This is a very basic stripped down version of a text area in a DIV with Fixed to bottom.
I'm using the Flat Bootstrap Admin V3 template, which has to be debugged for a long time since many of the messaging portion is buggy.
My page displays correctly on all browsers except for Mobile Safari which created a buffer/gap between the keyboard and the body when my text field is focus.
I manage to work out most of the bug however when it comes to mobile, i have this problem on iOS Safari where when I focus on the text area, it creates extra buffer under the webpage (I use body max-height at 100VH - Buggy i know, but i already resolved the issue using JS and $(window).innerHeight() which works great), no matter how I do.
I tried adjusting all the different div height including body height to minus another 60px away using JS and it still leaves the gap. All other browsers it will stick to right above the keyboard, but not iOS safari.
Any one can shed some light?
The text area code
<div class="footer">
<div class="message-box">
<textarea id="draftmsg" placeholder="type something..." class="form-control"></textarea>
<button id="sendmsg" class="btn btn-default"><i class="fa fa-paper-plane" aria-hidden="true"></i><span>Send</span></button>
</div>
This template is base mostly on flex but for the footer i using
.footer {
position: relative; /*Relative to the text display area which occupies whole viewport minus footer*/
bottom: 0;
}
Above image shows how it should look normally without keyboard and
user cannot scroll past the text area since text area sticks to
bottom.
but the image shows the gap between keyboard and text area in mobile
safari
Above image shows other mobile browsers Chrome and Firefox displays
fine without the extra buffer.
UPDATES (Answers to questions from comments)
My meta header has already set as follow
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Complete CSS for footer
.app-messaging .messaging > .footer {
width: 100%;
padding: 8px;
background-color: #dfe6e8; }
.app-messaging .messaging > .footer .message-box {
background-color: #FFF;
border-radius: 2px;
box-shadow: 0 1px 1px #c8d1d3;
width: 100%;
height: 80px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
border-top: 1px solid #dfe6e8; }
.app-messaging .messaging > .footer .message-box textarea, .app-messaging .messaging > .footer .message-box button {
margin-bottom: 0;
border: 0;
height: 100%;
border-radius: 0; }
.app-messaging .messaging > .footer .message-box textarea {
-ms-flex: 1;
flex: 1; }
.app-messaging .messaging > .footer .message-box button {
border-left: 1px solid #dfe6e8;
color: #29c75f; }
.app-messaging .messaging > .footer .message-box button .fa {
margin-right: 1rem; }
#draftmsg {
line-height: normal;
padding-bottom: 0;
margin-bottom: 0;
}
My mobile web debugging is very spotty, and I'm a backend developer mostly so please excuse me if I'm wrong...
I believe it may be because of the bottom: 0. Change it to a top: property to check. That may not help much, since you do need to put it on the bottom, but if it is the issue, then consider switching to flexbox to position it if possible.
If not, the fix might involve setting "height=device-height" in the viewport meta tag. But if I remember correctly, that only works if the item in question is at/near the bottom.
Hope this helps...
First, do you have media queries which may be non-intuitively applying?
Second, as you're using flex box, to the end of aligning all elements within the footer container at the bottom of the page: why not make the .footer container
display: flex
flex-direction: column-reverse;
Third: Consider using
margin-top: auto;
to force the element to the bottom of it's parent container, similarly to:
justify-content: flex-start;
That said, if you aren't using justify-content on the container, this might be the root of your issue.
Finally, and not the most maintainable and ideal solution, but should make due, if you can determine that the element is positioned in this way due to a brower issue beyond your control, you have options as well. OS detection and negative margin come to mind. With javascript, setting negative margin-bottom could reposition your element as needed.
//safari
var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
//ios
var isIos = navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)
//Version
var isIosVersion= /(iPhone)*(OS ([7-9]|1[0-9])_)/i.test(navigator.userAgent);
I have a button html element on my page and want to use the JQuery button so I do
$( "#myButton" ).button();
This works great, but I want to edit the style of the button, namely (as it says in the title) I want to make the button shorter with smaller text and center the text vertically. I've tried
#myButton {
height: 22px;
font-size: 16px !important;
}
And this works in terms of making my button and text the size I want them, but it doesn't center the text vertically in the button. I've tried setting padding-bottom: 2px;, I've tried setting line-height: 22px;, and I've tried setting vertical-align: center;, but none have worked. The button still looks like: Any help would be greatly appreciated. Thanks!
Try to use padding: 0; instead height: 22px; and your height will be defined by your font-size attribute.
Example: https://jsfiddle.net/dmonti/mz8k7kkw/
For centering small elements relative to a parent I usually just use absolute positioning:
HTML
<div>
<span>Process</span>
</div>
CSS
div {
position: relative;
border: 5px solid grey;
background: black;
color: white;
width: 200px;
height: 300px;
}
span {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
The important things to note here are that your "Process" element is self-contained (inside it's own span element), and that its parent element's position property is set to relative.
The CSS transform property might look a little confusing, but it essentially keeps the element perfectly centered inside of it's parent, no matter how it's resized.
Fiddle
In my fiddle, you can see how it centers by adjusting the div's height property in the css.
Hope this helps!
The grey border shouldn't be visible, it should be covered by the black border and I don't understand why it won't... here's the CSS code:
#portrait{
width:120px;
height:100px;
top:20px;
border: solid black 1px;
margin: 0px;
padding: 0px;
cursor:pointer;
}
#prof_picture{
width: inherit;
height: inherit;
border: none;
}
HTML (inside a table):
<td id="portrait">
<img id="prof_picture"></img>
</td>
and javascript
$("#prof_picture").attr('src',"profile/loading.gif");
I had to make the DOM inherit part of the attributes because when using that javascript line the image would assume its natural width and height and I wanted it just to fit the portrait. When I did this, the strange border appeared. Do you know why?
Add font-size: 0; to #portrait{}
Try setting your image to become a block element:
#prof_picture { display:block; }
Alternatively you could set it to align to the bottom (will work only if its an inline (or inline-block) element), although i think there may be cases or environments where this could produce unwanted results.
#prof_picture { vertical-align: bottom; }
Images are, by default (unless specified otherwise), inline elements. Most browsers will reserve some extra space here, but you could also counter this by setting the parent's line-height to zero.
#portrait{
line-height: 0;
}
Setting line-height: 0;, font-size: 0; or display: inline; on #profile Fixes it in the fiddle http://jsfiddle.net/CyV7j/6/
There is 4px of extra space added around the img element because of the way inline elements (line an img) are rendered inside of a table row.
Please consider styling with classes instead of ids. And restricting the use of tables to tabular data and not for the layout of photos.
I suggest you get rid of the border: none; by #prof_picture. You can also try to write the border on #portrait li this
border: 1px solid black;
As it is the right way to write a border.
If you are using certain browsers.... you need to set this in the css:
img{
outline:none;
}
I'm trying to overlay text on an <input type="text"> (for cross-browser placeholder support). I've found that my positioning is always off by a couple of pixels, because of some kind of padding which can't be removed by setting padding: 0;. The suggestions here and here do not solve the problem.
You can see this padding in the following screenshot from Chrome, as the white space between the blue highlight and the yellow border:
How can I a) remove this space; or b) measure it using Javascript?
If you replace the default borders with your own, the padding goes away (at least for me, on Chrome/Mac):
This is the CSS I used:
input {
padding: 0;
outline: none;
border: 1px solid red;
}
http://jsfiddle.net/NZZ5B/
You need to reset everything. So it is best recommended to use:
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
Hope this helped.
I have a div with absolute position
inside some other divs.
http://jsfiddle.net/d8GYk/
<div style="position: absolute;
display: block;
outline: 0px;
margin: 0px;
padding: 0px;
top: 0;
text-align: left;
font-size: 11px;
font-family: arial;
cursor: default;
border: 1px solid rgb(170, 170, 170);
overflow-x: hidden; white-space: pre;
overflow-y: auto;
left: 0px;
height: 132px;"><div>a a END</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div></div>
As you can see the first div is not completely visible
That's because the vertical scroll bar covers it.
If I set overflow-y:scroll. The problem goes away.
However I don't want to do it because this div is autogenerated (via javascript) and in many cases I don't need the vertical scroll bar (for example if the list has one or two or three items)
Can somebody suggest how to resolve this problem ?
if the scrollbar may or may not show, use a content container with a wrapper that may or may not scroll. html:
<div class="container">
<div class="entries">
<div>ab a</div>
<div>ab</div>
...
</div>
</div>
and css:
.container {
height: 100px;
overflow-y: auto;
}
.entries div {
white-space: pre;
}
Demonstrator: http://jsfiddle.net/gFrbM
That said, if you absolute need pre white space handling, AND your lines are very long, you'll either need to turn on scroll for both directions, not just y, and that's a good indication that the way you're trying to present content is not a good way to go about it. The UX will be poor for your users, and depending on the content you're listing in these entry divs, there will be much better ways to show that data.
Du you really need "white-space: pre;"?
If you remove this part i think it is going to work
Use a margin-right for each div inside the container:
.container div{margin:0 20px 0 0}
http://jsfiddle.net/Karzin/d8GYk/2/
Add this to css
{padding-right: 20px;}
Reason: The border of the scroll is covering your div text. you need to give some space for the same.
http://jsfiddle.net/d8GYk/3/