Text lines background color - swiftui

I'm trying to recreate the HTML span background coloring effect in SwiftUI. Not the whole bounding view should be colored, only the text lines. Can this be done easily in SwiftUI / UIKit / Core Graphics ?
div {
max-width: 400px;
line-height: 2;
font-family: sans-serif;
}
span {
background-color: blue;
color: white;
padding: 0.3em;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, nulla eget consequat finibus, tortor erat scelerisque ipsum, nec dictum justo quam in ipsum. Nulla nec eleifend felis. Sed vel semper mauris, a placerat elit.</span>
</div>
struct ContentView: View {
var body: some View {
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, nulla eget consequat finibus, tortor erat scelerisque ipsum, nec dictum justo quam in ipsum. Nulla nec eleifend felis. Sed vel semper mauris, a placerat elit.")
.foregroundColor(.white)
.background(Color.blue)
.frame(maxWidth: 200)
.lineSpacing(6)
}
}
SwiftUI Preview:

Closest solution this moment seems to be to ‘hack it’ using AttributedString, which is not the most elegant… And adding padding between background and text seems impossible.
struct ContentView: View {
let text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, nulla eget consequat finibus, tortor erat scelerisque ipsum, nec dictum justo quam in ipsum. Nulla nec eleifend felis. Sed vel semper mauris, a placerat elit."
var attributedString: AttributedString {
var attributedString = AttributedString(text)
attributedString.foregroundColor = .white
attributedString.backgroundColor = .blue
return attributedString
}
var body: some View {
Text(attributedString)
.frame(maxWidth: 300)
.lineSpacing(6)
}
}
Really wish it were possible to use the text baselines as a CGPath and add multiple rectangles.

Related

Match string from ">" up to the last dot

I have to select only the characters contained from > to the last dot (not the first dot).
I tried this pattern
^>[a-zA-Z]+$
but something doesn't work. Can I get some help? Thank you.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
I made an example using javascript to have a working demo but since I had to use a strategy where the commonly used . (dot) should match also line breaks, in this case I was forced to use [\s\S] instead.
the regex ^>[\s\S]+\.\n expects to find a > at the beginning of the line followed by any character until the last dot found followed by a new line.
This demo feeds the regex match with the full text and returns just the middle part as you were expecting:
const subject = `
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.`;
var re = /^>[\s\S]+\.\n/im;
var match = re.exec(subject);
if (match != null) {
result = match[0];
} else {
result = "";
}
console.log(result);
C# .Net Solution
(>[\s\S]*\.)
Or if you don't want to capture the > and . then you can use a positive look behind and positive look ahead.
To match all characters and whitespace in between we can use [\s\S]* This works by default in .Net due to aggressive matching
(?<=>)([\s\S]*)(?=\.)
Try this fiddle: https://dotnetfiddle.net/3ukM0X
public static void Main()
{
string content = #"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
"">""Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.";
var regex = new System.Text.RegularExpressions.Regex(#"(?<=>)([\s\S]*)(?=\.)");
Console.WriteLine(regex.Match(content));
}
Returns:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
If there can not be any > chars in the paragraph, only at the start, then you can use:
^>[^>]*\.
^ Start of string
> Match literally
[^>]* Match optional chars other than >
\. backtrack to match the last occurrence of the dot
See a regex demo
If you want to allow the > char in the paragraph (but not at the start as that denotes the start of the paragraph) you can match all lines after it that do not start with <
^>.*(?:\r?\n(?!>).*)*\.
See another regex demo

Styling a List substituting Unicode, can't get it aligned

I've read 6 or 7 different threads on Stackoverflow dealing specifically with substituting a Unicode symbol for standard list bullets. Everything does what it's supposed to but I can't get it aligned. Help appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=us-ascii"
http-equiv="Content-Type">
<title>Stylin’ Lists</title>
<style type="text/css">
ul {
list-style: none;
margin-left: 0px;
padding-left: 20px;
text-indent: -20px;}
li {padding-left: 20px;}
li:before {
content: "\25AC";
padding-right: 10px;
color: DODGERBLUE;}
</style>
</head>
<body>
<h2>Stylin’ Lists</h2>
<div style=
"font-family: Helvetica, Sans-Serif; font-size: 16px; line-height: 18px; font-weight: Bold;">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Quisque sed felis.</li>
<li>Etiam augue pede, molestie eget, rhoncus at,
convallis ut, eros. Aliquam pharetra. Nulla in tellus
eget odio sagittis blandit. Aliquam sit amet felis.
Mauris semper, velit semper laoreet dictum, quam diam
dictum urna, nec placerat elit nisl in quam. Etiam
augue pede, molestie eget, rhoncus at, convallis ut,
eros. Aliquam pharetra. Nulla in tellus eget odio
sagittis blandit. Maecenas at nisl. Nullam lorem mi,
eleifend a, fringilla vel, semper at, ligula.</li>
<li>Molestie eget, rhoncus at, convallis ut, eros.
Semper laoreet dictum, quam diam dictum urna, nec
placerat elit nisl in quam. Aliquam pharetra. Nulla in
tellus eget odio sagittis blandit. Maecenas at nisl.
Nullam lorem mi, eleifend a, fringilla vel, semper at,
ligula. Consectetuer adipiscing elit. Quisque sed
felis.</li>
<li>Placerat elit nisl in quam. Nullam lorem mi,
eleifend a, fringilla vel, semper at, ligula. Etiam
augue pede, molestie eget, rhoncus at, convallis ut,
eros. Aliquam pharetra. Nulla in tellus eget odio
sagittis blandit. Maecenas at nisl.</li>
</ul>
</div>
</body>
</html>

Regex - Extracting individual notes from a prepending notelog

Got a situation where currently notes logged by users are saved to a single file, with a timestamp, userid, and the note.
I would like to extract each instance of a note, and put it into a spreadsheet.
For the usernames, I have \([\w']+?, [\w']+?[ \w]{0,2}\) : (http://regexr.com/3fjf5)
The dates will be similarly trivial.
The part with which I'm struggling is grabbing the text following the timestamp and username. I tried using a negative lookahead for timestamp/username, but this will not work for the final line in the log, as it is not followed by a timestamp/username combo.
I have a solutions that involve appending a delimiter, or making two passes with regex, but I'm curious whether this can be done in a single pass.
Here's a sample of the text:
br><br>13/03/2015 10:00 (Stone, Fred B) : Lorem ipsum dolor sit
amet   - Lorem ipsum dolor sit amet,.  Lorem ipsum dolor sit amet,
consectetur adipiscing elit. In velit massa, porta et arcu hendrerit,
pellentesque pellentesque orci. Etiam ac ante pharetra, elementum nunc in,
gravida lacus. Quisque sollicitudin, tellus at imperdiet condimentum, orci ante
accumsan elit, sit amet lacinia enim purus eu nisl. Phasellus ullamcorper
vestibulum tortor id fringilla.<br><br>2015-03-13T10:00:13 (Stone, Fred
B) : Quisque ipsum risus, cursus at purus in, dignissim molestie risus.
Aliquam vitae auctor odio. Morbi condimentum sapien a augue accumsan, vitae
consequat tortor feugiat. Nam quis consequat lectus. Duis nisl justo, imperdiet
et ipsum nec, cursus volutpat leo.<br><br>13/03/2015 09:58 (Stone, Fred B)
: <br> Quisque ipsum risus, cursus at purus in, dignissim molestie risus.
Aliquam vitae auctor odio. Morbi condimentum sapien a augue accumsan, vitae
consequat tortor feugiat. Nam quis consequat lectus. Duis nisl justo, imperdiet
et ipsum nec, cursus volutpat leo<br> Quisque ipsum risus, cursus at purus in,
dignissim molestie risus. Aliquam vitae auctor odio. Morbi condimentum sapien a
augue accumsan, vitae consequat tortor feugiat. Nam quis consequat lectus. Duis
nisl justo, imperdiet et ipsum nec, cursus volutpat leo<br><br>11/03/2015
11:12 (Smith, Mark L) : Assigned to: Stone, Fred B L<br>Quisque
ipsum risus, cursus at purus in, dignissim molestie risus. Aliquam vitae auctor
odio. Morbi condimentum sapien a augue accumsan, vitae consequat tortor feugiat.
Nam quis consequat lectus. Duis nisl justo, imperdiet et ipsum nec, cursus
volutpat leo<br><br>11/03/2015 11:09 (Johnson, Rod R) : <br> Quisque
ipsum risus, cursus at purus in, dignissim molestie risus. Aliquam vitae auctor
odio. Morbi condimentum sapien a augue accumsan, vitae consequat tortor feugiat.
Nam quis consequat lectus. Duis nisl justo, imperdiet et ipsum nec, cursus
volutpat leo<br><br>19/02/2015 15:30 (Smith, Mark L) : Assigned to:
Stone, Fred B LQuisque ipsum risus, cursus at purus in, dignissim molestie
risus. Aliquam vitae auctor odio. Morbi condimentum sapien a augue accumsan,
vitae consequat tortor feugiat. Nam quis consequat lectus. Duis nisl justo,
imperdiet et ipsum nec, cursus volutpat leo
Resulting matches (italicized) should look like:
13/03/2015 10:00 (Stone, Fred B) : Lorem ipsum dolor sit
amet   - Lorem ipsum dolor sit amet,.  Lorem ipsum dolor sit amet,
consectetur adipiscing elit. In velit massa, porta et arcu hendrerit,
pellentesque pellentesque orci. Etiam ac ante pharetra, elementum nunc in,
gravida lacus. Quisque sollicitudin, tellus at imperdiet condimentum, orci ante
accumsan elit, sit amet lacinia enim purus eu nisl. Phasellus ullamcorper
vestibulum tortor id fringilla.
2015-03-13T10:00:13 (Stone, Fred B) : Quisque ipsum risus, cursus at purus in, dignissim molestie risus. Aliquam vitae auctor odio. Morbi condimentum sapien a augue accumsan, vitae consequat tortor feugiat. Nam quis consequat lectus. Duis nisl justo, imperdiet et ipsum nec, cursus volutpat leo.
etc.
Even returning each note (including the timestamp and UID) in a match would be acceptable. e.g.
13/03/2015 10:00 (Stone, Fred B) : Lorem ipsum dolor sit
amet   - Lorem ipsum dolor sit amet,.  Lorem ipsum dolor sit amet,
consectetur adipiscing elit. In velit massa, porta et arcu hendrerit,
pellentesque pellentesque orci. Etiam ac ante pharetra, elementum nunc in,
gravida lacus. Quisque sollicitudin, tellus at imperdiet condimentum, orci ante
accumsan elit, sit amet lacinia enim purus eu nisl. Phasellus ullamcorper
vestibulum tortor id fringilla.
i hope this can help you (I'm not sure i did understand you):
/\d{2,4}[\/-]{1}\d{1,2}[\/-]{1}\d{2,4}[:0-9T&#;\s]*?\([\w']+?, [\w']+?[ \w]{0,2}\)/g
http://regexr.com/3fjvl
You can make the regex more specific if you want so.
Your input string maybe something like this: (first < was missed in your sample)
var mytext = "<br><br>13/03/2015 10:00 (Stone, Fred B) : Lorem ipsum dolor sit amet   - Lorem ipsum dolor sit amet,.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit massa, porta et arcu hendrerit, pellentesque pellentesque orci. Etiam ac ante pharetra, elementum nunc in, gravida lacus. Quisque sollicitudin, tellus at imperdiet condimentum, orci ante accumsan elit, sit amet lacinia enim purus eu nisl. Phasellus ullamcorper vestibulum tortor id fringilla.<br><br>2015-03-13T10:00:13 (Stone, Fred B) : Quisque ipsum risus, cursus at purus in, dignissim molestie risus. Aliquam vitae auctor odio. Morbi condimentum sapien a augue accumsan, vitae consequat tortor feugiat. Nam quis consequat lectus. Duis nisl justo, imperdiet et ipsum nec, cursus volutpat leo.<br><br>13/03/2015 09:58 (Stone, Fred B) : <br> Quisque ipsum risus, cursus at purus in, dignissim molestie risus. Aliquam vitae auctor odio. Morbi condimentum sapien a augue accumsan, vitae consequat tortor feugiat. Nam quis consequat lectus. Duis nisl justo, imperdiet et ipsum nec, cursus volutpat leo<br> Quisque ipsum risus, cursus at purus in, dignissim molestie risus. Aliquam vitae auctor odio. Morbi condimentum sapien a augue accumsan, vitae consequat tortor feugiat. Nam quis consequat lectus. Duis nisl justo, imperdiet et ipsum nec, cursus volutpat leo<br><br>11/03/2015 11:12 (Smith, Mark L) : Assigned to: Stone, Fred B L<br>Quisque ipsum risus, cursus at purus in, dignissim molestie risus. Aliquam vitae auctor odio. Morbi condimentum sapien a augue accumsan, vitae consequat tortor feugiat. Nam quis consequat lectus. Duis nisl justo, imperdiet et ipsum nec, cursus volutpat leo<br><br>11/03/2015 11:09 (Johnson, Rod R) : <br> Quisque ipsum risus, cursus at purus in, dignissim molestie risus. Aliquam vitae auctor odio. Morbi condimentum sapien a augue accumsan, vitae consequat tortor feugiat. Nam quis consequat lectus. Duis nisl justo, imperdiet et ipsum nec, cursus volutpat leo<br><br>19/02/2015 15:30 (Smith, Mark L) : Assigned to: Stone, Fred B LQuisque ipsum risus, cursus at purus in, dignissim molestie risus. Aliquam vitae auctor odio. Morbi condimentum sapien a augue accumsan, vitae consequat tortor feugiat. Nam quis consequat lectus. Duis nisl justo, imperdiet et ipsum nec, cursus volutpat leo" ;
//Define Regex patterns:
var dataReg = new RegExp(/(?:^|<br><br>)(\d{2}\/\d{2}\/\d{4}) (\d{2}):(\d{2})\s*?\((\w+,[\w\s]+?)\)\s*:\s*([^]+?)(?=<br><br>\d{2}\/\d{2}\/\d{4} \d{2}:\d{2}|$)/g) ;
//Extract Notes and Data:
var myData = [] ;
while ((myData = dataReg.exec(mytext)) !== null) {
console.log(myData);
}
Description of Regex Pattern: (regex Demo)
/: regex pattern starts
(?:^|<br><br>): start search from beginning or new <br><br> that comes date and time after it.
(\d{2}\/\d{2}\/\d{4}) (\d{2}):(\d{2}): extract date,hour and minute separated.
\s*?: pass spaces
\((\w+,[\w\s]+?)\): extract username inside the parenthesis (..)
\s*:\s*: pass the :
([^]+?): capture all user notes
(?=<br><br>\d{2}\/\d{2}\/\d{4} \d{2}:\d{2}|$): stop capturing when next note or end of string is reached
/g: Global flag means do not return after first successful result
Note:
[0] is all matched string
[1] is date , [2] is hour, [3] is minutes, [4] is username
[5] is user's note

Non-id/permalink Dynamic routes with Ember-data and Fixtures

So I'm trying to get my routing to work so that I have permalinks in my url for sharing. I.E. "/getting-started".
I can't seem to figure out how the model/serialize works, so how does ember-data know how to find my object with a string? I already did an attempt at the queryFixtures and it returns the right model but it isn't set
Here is my code:
Router:
App.Router.map (match) ->
#resource 'topics', {path: "/support"}, ->
#route 'topic', {path: '/:permalink'}
# Support Routes
App.TopicsRoute = Ember.Route.extend
model: ->
this.store.find('topic')
App.TopicsTopicRoute = Ember.Route.extend
# serialize: (model, params) ->
# return { topic_id: model.get(params.topic_id) }
model: (param) ->
#get('store').findQuery App.Topic, {permalink: param.permalink}
setupController: (controller, model) ->
controller.set("content", model)
actions:
error: (error) ->
console.log error
App.ApplicationAdapter = DS.FixtureAdapter.extend
queryFixtures: (fixtures, query, type) ->
fixtures.filter (item) ->
for property, value of query
if item[property] == value
return item
else
false
And my fixtures:
App.Topic = DS.Model.extend
name: DS.attr('string')
permalink: DS.attr('string')
position: DS.attr('number')
# Fiture data
App.Topic.FIXTURES = [
{
id: 1
name: "Getting Started"
permalink: "getting-started"
position: 1
articles: [
{ name: "test 1", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." },
{ name: "test 2", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." },
{ name: "test 3", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." }
]
},
{
id: 2
name: "Frequently Asked Questions"
permalink: "frequently-asked-questions"
position: 2
articles: [
{ name: "test 1", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." },
{ name: "test 2", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." }
]
},
{
id: 3
name: "Tips & Tricks"
permalink: "tips-tricks"
position: 3
articles: [
{ name: "test 1", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." }
]
}
]
For this answer I will assume you're using the version 1.0.0 of Ember and the Beta version 1.0.0 of Ember Data.
For the router you described, you should setup the following Route objects:
App.TopicsIndexRoute = Ember.Route.extend
and
App.TopicIndexRoute = Ember.Route.extend
otherwise Ember will have issues passing the correct model to the routes.
Now in the TopicIndexRoute (TopicsTopicRoute in your code) you use the model hook, which is called ONLY when entering the URL or reloading the page and NOT when coming to the route through the {{link-to}} helper (http://emberjs.com/api/classes/Ember.Route.html#method_model).
When you're going to the TopicIndexRoute from a {{link-to}} helper, the "ember magic" match the dynamic segment (http://emberjs.com/guides/routing/specifying-a-routes-model/#toc_dynamic-models) to the corresponding model only if it's the model's ID. I don't know how to solve this yet. This might help: Using a non-ID dynamic parameter with the ember router v2
I don't know if the fixtures you're using are working but when setting relationships you should use (at least that's how it's shown in the guides: http://emberjs.com/guides/models/connecting-to-an-http-server/#toc_json-conventions) the model ID instead of declaring the instance. It would look like this:
App.Article.FIXTURES = [
{
id: 1,
name: "test 1",
content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et."
},
{
id: 2,
name: "test 2",
content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et."
},
{
id: 3,
name: "test 3",
content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et."
}
]
App.Topic.FIXTURES = [
{
id: 1
name: "Getting Started"
permalink: "getting-started"
position: 1
articles: [1,2,3]
}
]
I hope this helps you.

Problems with bodyline auto sizing

I want to make my bodyline which is basically my container, be at a height of:
bodyline{
height:500px;
min-height:500px;
height:auto !important;
}
but when I set it to this, it does not actually work. my footer is placed in the middle and it messes up the footer divs that are inside that. Does anyone have any suggestions. maybe I made the code wrong or something im not sure really.
example
http://jsfiddle.net/zrUSr/
please help someone.
Live demo
Hey now define your div id overflow hidden in your css as like this
#bodyline {
background-color: #FFFFFF;
border-radius: 10px 10px 0 0;
margin: 0 auto;
min-height: 300px;
overflow: hidden; // add this line
padding-top: 320px; //add this line
position: relative;
width: 1000px;
}
#midSection {
color: #000000;
float: left;
height: auto !important;
margin: 0 auto;
min-height: 100px;
padding-bottom: 50px;
padding-left: 30px;
padding-right: 10px;
position: relative;
top: 320px; // remove this line
width: 600px;
}
Live demo
Ok so I did what some of the people told me what to do above. then found that the
bodyline{
min-height:500px;
height:500px;
height:auto !important;
}
height:auto was not added, so I added it so check out the jsfiddle http://jsfiddle.net/jAXp2/
and find this code
/*Add this as many times as you want to*/
<div id="midSection">
<h2>Updates</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum. Fusce vel lectus arcu. Quisque quis elit et lorem suscipit faucibus a ut odio. Proin ut ante consectetur dui mattis pulvinar non quis neque. Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit. Mauris sagittis aliquam odio vitae pulvinar. Suspendisse id dolor nibh, sed consectetur sem. Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis. Morbi accumsan tempus neque, sed varius lectus molestie imperdiet. Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac. Quisque dolor tellus, porta in ultrices sit amet, luctus sed nunc. Quisque sodales scelerisque orci sed ullamcorper. Nunc nisl arcu, dignissim sed tempor eget, blandit a massa. Praesent ut metus enim, in dictum felis. Integer sagittis ipsum eu mauris lacinia rhoncus. Mauris turpis ligula, dapibus nec rhoncus bibendum, tristique eu nunc. Duis dapibus blandit justo et auctor. Nunc non elit vel diam luctus ullamcorper.
Nulla elementum tristique ultricies. Etiam sit amet felis leo, non imperdiet sapien. Suspendisse venenatis, erat ac mollis sagittis, nulla arcu semper felis, a tempus dolor nibh in est. Nullam. </p>
</div>
/*Add this as many times as you want to*/
add it as many times after it to see it in action.
you will see that it expands the bodyline as long as it needs to be.