I have a header div, inside this is some content. The whole div is text-align:right. I want the content to sit on the right but more importantly sit on the bottom of the div, not the top.
#header {
height:79px;
background:url(images/jtl-logo.png) no-repeat left top;
text-align:right;
padding:0px 9px; }
Surely there must be a way of doing this in the CSS so that content always aligns to the bottom of it's container, it seems like it's incredibly necessary?
The only other way I can think to do it is applying padding to the header to push it down, but that seems a bit ridiculous when this is such a simple thing.
You could wrap up the text in another DIV or SPAN element and then apply CSS positioning to move it to the bottom.
Related
Let's say I have a UIView or UIViewController I want to use in many places throughout the app.
While I don't know how or where it'll ultimately be displayed, I know I always want it to have half the width of its parent, and be pinned to the right.
If I wanted to achieve something like this in HTML/CSS, I would apply the following style:
.floatRight{
position: relative;
width: 50%;
float: right;
}
<div class="floatRight"> foobar </div>
I've tried using NSLayoutConstraints, but as far as I can tell I can only specify constraints relative to other views, which means I have to know where my view will be placed ahead of time.
Is there any way in iOS that I can specify "this view should be this tall and always be as far right as possible" without knowing the parent or surrounding views ahead of time?
While I don't know how or where it'll ultimately be displayed, I know I always want it to have half the width of its parent, and be pinned to the right.
You have to wait until the view has a parent, but that's not difficult. Use a custom UIView subclass. In that subclass, override didMoveToSuperview, and in your override, create and activate the constraints. As you do that, refer to the view's superview as self.superview!; that's all your code needs to know.
I have a site where I have a full width menu, which has negative margins. It works perfect, except on Safari/iOS.
On Safari/iOS I can scroll horizontaly forever....WHY?
background-color: #0a6e96;
margin: -1px -9999rem;
padding: 1.2rem 9999rem;
margin-top: 48px;
Update - Solution
https://css-tricks.com/full-browser-width-bars/
This link has multiple solutions.
To avoid triggering horizontal scrolling, you need to set overflow-x:hidden on both the html and body elements.
I've run into an issue while trying to bottom-align a logo container to the zero-height parent. Preferably, I want to achieve this with pure CSS.
In the attached fiddle, I want to get the bottom of the control-group to be aligned to the top of the zero-height panel element. The markup needs to stay the way it is. Is it possible to do this without specifying static height or top offset? The parent needs to be zero-heght. Otherwise, if its above the content and it will have height, it will overlap the light-blue container, which will have other content. As such, content in the blue div will not be clickable in the part that is overlapped by the panel div. Any suggestions?
The problem can be seen here: http://jsfiddle.net/jQgHy/5/
I'm not sure if this is what you're looking for...
.control-group {
display: inline-block;
position: absolute;
vertical-align: bottom;
text-align: center;
bottom: 0;
}
http://jsfiddle.net/jQgHy/6/
I want to increase the font-size of the text in the JQM data-role=header tag without allowing JQM to increase the height of the header bar from its normal (20px?)
JQM seems to be calculating the height for the bar based on the font-size of the child nodes.
This worked for me: http://jsfiddle.net/shanabus/Z2saQ/
Click the button to see that page 2 is different and works per your question.
I just set the .ui-header class of #page2 to a static 41px tall.
Then set the h1 to something larger like 2em.
Using CSS3 columns to take a somewhat large text document and make it scroll horizontally. I want each column to be close to the size of the iPad screen, as I am displaying the content in a UIWebView.
If I make the -webkit-column-width: property a relatively small number, everything works great. The text stops at the max-height set for the containing and columns out horizontally.
If I make -webkit-column-width anything larger than about 300px, though, this css seems to get completely ignored. The text displays vertically as it would without styling. Any fixes?
Display when -webkit-column-width is 325px. The view scrolls to the right normally:
Display when -webkit-column-width is 500px. Text appears as one column and the view scrolls downward to the end of the document, ignoring max-height:
You are trying to divide, let's say, 600px wide container into X 500px wide columns. Browser renders only one column because it can't put 2 (or more) 500px wide columns in 600px wide container. First of all - by default, the browser will stretch your content vertically, to make it stretch it horizontally you have to specify fixed height for the container and width needs to be set to auto (which is default). Of course you need to adjust this values so columns will fit iPads viewport.
Here is demo of code, that should work properly - http://jsfiddle.net/wojtiku/bFKpa/
#container {
height: 300px;
-webkit-column-width: 150px;
-webkit-column-gap: 20px;
}
NOTE: I don't have iPad, tested on desktop.