Im looking to split a body of html into an array.
Here is an example of what the code looks like:
<p><h2 class="title">Title 1</h2></p>
<p>Section 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>velit saepe ducimus aspernatur, quam quaerat autem. Consectetur, vitae.</p>
<p><h2 class="title">Title 2</h2></p>
<p>Section 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p><h2 class="title">Title 3</h2></p>
<p>Section 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Basically I'd like to split the sections up using a positive lookbehind with the following pattern <p><h2 class="title">*</h2></p> or any other type of regex pattern.
Essentionally I'm looking to have an array that contains something like so...
<p><h2 class="title">Title 1</h2></p>
<p>Section 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>velit saepe ducimus aspernatur, quam quaerat autem. Consectetur, vitae.</p>
<p><h2 class="title">Title 2</h2></p>
<p>Section 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p><h2 class="title">Title 3</h2></p>
<p>Section 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
This is the code that will alway be constant <p><h2 class="title">*</h2></p>. The content will always be encapsulate within <p> tags.
Here is an example of the script Im parsing the data through...
$(contentArr).each(function(ele, idx){
var content = ele, contentTrun;
var contentRegex = /(<p>.*<\/p>)/im;
var matchContent = contentRegex.exec(content);
//parse block to get it ready for styling and effect
var contentRegex = /((?!<p><h2 class="title".*?\n)<p>.*<\/p>)/igm;
var parsedContent = content.replace(contentRegex, "$1");
//insert parsed content into html block
$("pressBlocks").insert("<div class=\"blockContentOutter\">\
<span class=\"accordionText\">... <a class=\"readMore\">Read More</a></span>\
<div class=\"blockContent\">"+parsedContent+"</div>\
</div>");
});
As I noted in the comments, this is invalid syntax for HTML:
<p><h2>...</h2></p>
The h2 tag will implicitly close the p tag and they will not be nested (and you will have an empty paragraph before the first heading).
You can solve your problem without regular expressions (although you will need to fix the HTML you are inputting):
contentArr = [
"<h2 class=\"title\">Title 1</h2>\
<p>Section 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>\
<p>velit saepe ducimus aspernatur, quam quaerat autem. Consectetur, vitae.</p>\
<h2 class=\"title\">Title 2</h2>\
<p>Section 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>\
<h2 class=\"title\">Title 3</h2>\
<p>Section 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>"
];
$(contentArr).each( function( index, element ){
$( element ).each( function( i, e ){
if ( !$( e ).is( "h2" ) )
return;
$( '<div class="blockContentOuter" />' )
.append( '<span class="accordionText">... <a class="readMore">Read More</a></span>' )
.append( $( '<div class="blockContent" />')
.append( $(e).nextUntil( "h2" ) ) )
.appendTo( '#pressBlocks' );
});
});
.blockContentOuter {
background-color: lightgrey;
border: 1px solid darkgrey;
margin-top: 0.5em;
}
.blockContent {
background-color: white;
border: 1px solid darkgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pressBlocks" />
Well, ..if you really need a splitter and you know that the input format remains unchanged - just split it with something like this:
var splitter = "<p><h2 class=\"title\">";
output = inputHTML.split(splitter);
for(var i=1; i<output.length){
output[i] = splitter + output[i];
}
but really - there're better ways to do it nice :)
eg. with jQuery:
var output = [];
var $input = $('<div/>').append(inputHTML);
$input.children().each( function(){
var $this = $(this);
if($this.find('h2.title').length || output.length==0){
output.push( $('<div/>').append($this) );
} else {
output[output.length - 1].append($this);
}
});
this will give you your paragraphs splitted in divs ready in 'output' array - to do whatever you need with them.
I've just noticed - that #MT0 is absolutely right - it is not correct to wrap h2 element inside of paragraphs - so my code will work - but only if you nest your inputHTML correctly - with div's or sections or other block elements instead of paragraphs:
<div><h2 class="title">Title 1</h2></div>
<div>Section 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div>velit saepe ducimus aspernatur, quam quaerat autem. Consectetur, vitae.</div>
<div><h2 class="title">Title 2</h2></div>
<div>Section 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div><h2 class="title">Title 3</h2></div>
<div>Section 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
Related
I am trying to port an old application that has a Google maps plugin, and uses infobubble.js to display popups on the map to use Leaflet instead.
I have got most of it working, but I'm not sure how to tackle the part that uses infobubble.js. In particular, it uses the tabs features of infobubble e.g. infoBubble.addTab() to attach several different bits of html information to one location / marker.
I've looked through the leaflet plugins at https://leafletjs.com/plugins.html and haven't been able to find anything that looks suitable.
I found the source code for infobubble.js at https://github.com/googlearchive/js-info-bubble, but porting that to Leaflet seems beyond my limited javascript abilities.
I've also considered making a simple replacement, but most references to creating tabbed content seem to suggest using jquery to manage the tabs, but (again, with my limited skills) I'm not sure whether that would work, or how to do that with html that is only displayed in a popup.
You don't need any jquery for that. A small library is enough. Take a look at this tabby and here is an example of how to use it - example
All you need to do when building a popup in leaflejs is the appropriate html and that's it. The only thing you have to do is move the tabs behind the popup outline with css.
/* eslint-disable no-undef */
/**
* tabs in popup
*/
// config map
let config = {
minZoom: 1,
maxZomm: 18,
};
// magnification with which the map will start
const zoom = 15;
// co-ordinates
const lat = 50.0595;
const lng = 19.9379;
// calling map
const map = L.map("map", config).setView([lat, lng], zoom);
// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© OpenStreetMap contributors',
}).addTo(map);
// custom popup image + text
const customPopup = `<div class="customPopup">
<ul class="tabs-example" data-tabs>
<li><a data-tabby-default href="#sukiennice">Sukiennice</a></li>
<li>lorem</li>
</ul>
<div id="sukiennice">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/A-10_Sukiennice_w_Krakowie_Krak%C3%B3w%2C_Rynek_G%C5%82%C3%B3wny_MM.jpg/1920px-A-10_Sukiennice_w_Krakowie_Krak%C3%B3w%2C_Rynek_G%C5%82%C3%B3wny_MM.jpg" width="300">Source: wikipedia.org<div>Kraków,[a] also written in English as Krakow and traditionally known as Cracow, is the second-largest and one of the oldest cities in Poland. Situated on the Vistula River in Lesser Poland Voivodeship... → show more</div>
</div>
<div id="lorem">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, ut.
</div>
</div>`;
// specify popup options
const customOptions = {
minWidth: "220", // set max-width
keepInView: true, // Set it to true if you want to prevent users from panning the popup off of the screen while it is open.
};
const marker = L.marker([50.0616, 19.9373])
.bindPopup(customPopup, customOptions)
.on('click', tabsrun);
marker.addTo(map);
// center map when click on marker
function tabsrun(e) {
if (marker.isPopupOpen()) {
const tabs = new Tabby("[data-tabs]");
}
}
html, body {
height: 100%;
margin: 0;
}
#map {
height: 100%;
}
.tabs-example {
margin-top: -45px !important;
position: absolute;
}
.tabs-example li {
background: #fff;
}
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/tabby#12.0.0/dist/js/tabby.polyfills.min.js"></script>
<link href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/cferdinandi/tabby#12.0.0/dist/css/tabby-ui.min.css" rel="stylesheet"/>
<div id="map"></div>
I have added an example of using a tab to my examples tabs in popup
I want to highlight specific word (for example- green and blue) written in 10 . I have found a Javascript code that is highlighting the words written anywhere on the page in a, p, button etx. But that code is not highlighting the words written in textarea. The code I found is -
'<p>Hello world lorem ipsum dolor sit amet, consectetur adipisicing
elit. Est vel accusantium
totam, ipsum delectus et dignissimos mollitia!</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, corporis.
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem voluptas
perferendis dolores ducimus velit error voluptatem, qui rerum modi? this is amet in the
wall</small>
</p>
<textarea>hello amet this</textarea>
<style>
.highlight {
background: lightpink;
}
</style>
<script>
function highlight(elem, keywords, caseSensitive = false, cls = 'highlight') {
const flags = caseSensitive ? 'gi' : 'g';
keywords.sort((a, b) => b.length - a.length);
Array.from(elem.childNodes).forEach(child => {
const keywordRegex = RegExp(keywords.join('|'), flags);
if (child.nodeType !== 3) {
highlight(child, keywords, caseSensitive, cls);
} else if (keywordRegex.test(child.textContent)) {
const frag = document.createDocumentFragment();
let lastIdx = 0;
child.textContent.replace(keywordRegex, (match, idx) => {
const part = document.createTextNode(child.textContent.slice(lastIdx, idx));
const highlighted = document.createElement('span');
highlighted.textContent = match;
highlighted.classList.add(cls);
frag.appendChild(part);
frag.appendChild(highlighted);
lastIdx = idx + match.length;
});
const end = document.createTextNode(child.textContent.slice(lastIdx));
frag.appendChild(end);
child.parentNode.replaceChild(frag, child);
}
});
}
highlight(document.body, ['lorem', 'amet', 'autem']);
</script>
'
You can't use a tag span in textarea, you can use a contenteditable="true" on a div instead of textarea.
This post post may be useful.
You can't insert tags in a <textarea>.
But instead, if you put a <div>, a <p> or a <span> with the contenteditable="true" attribute, it will look like a <textarea>!That will do the trick!
Here's an example:
div {
width: 100%;
height: 500px;
}
<div contenteditable="true">Write some text here!<br><br>If you think that this is a <textarea>, then you're completely <span style="color: red;">FALSE!</span></div>
So your code will be:
function highlight(elem, keywords, caseSensitive = false, cls = 'highlight') {
const flags = caseSensitive ? 'gi' : 'g';
keywords.sort((a, b) => b.length - a.length);
Array.from(elem.childNodes).forEach(child => {
const keywordRegex = RegExp(keywords.join('|'), flags);
if (child.nodeType !== 3) {
highlight(child, keywords, caseSensitive, cls);
} else if (keywordRegex.test(child.textContent)) {
const frag = document.createDocumentFragment();
let lastIdx = 0;
child.textContent.replace(keywordRegex, (match, idx) => {
const part = document.createTextNode(child.textContent.slice(lastIdx, idx));
const highlighted = document.createElement('span');
highlighted.textContent = match;
highlighted.classList.add(cls);
frag.appendChild(part);
frag.appendChild(highlighted);
lastIdx = idx + match.length;
});
const end = document.createTextNode(child.textContent.slice(lastIdx));
frag.appendChild(end);
child.parentNode.replaceChild(frag, child);
}
});
}
highlight(document.body, ['lorem', 'amet', 'autem']);
.highlight {
background: lightpink;
}
<p>Hello world lorem ipsum dolor sit amet, consectetur adipisicing
elit. Est vel accusantium
totam, ipsum delectus et dignissimos mollitia!</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, corporis.
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem voluptas
perferendis dolores ducimus velit error voluptatem, qui rerum modi? this is amet in the
wall</small>
</p>
<div contenteditable="true">hello amet this</div>
And here is living demo: https://codepen.io/marchmello/pen/OJybjwN
I want to rebuild this without .parent because i have trouble when i connect this in wordpress. I want in js add and remove specyfic classes without using parent. Change parent to specyfic class. How i can do that?
Can i save funcionality of this without .parent function in js?
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
removeNewClass();
var id = this.id;
var $target = $('#' + id + 'show').show();
var newClass = 'long';
$(this).hide().parent().addClass(newClass);
$('.tab').show();
$contents.not($target).hide();
});
$('.close').click(function() {
removeNewClass();
$(this).parent().hide();
$(this).parent().prev('.tab').show();
var $target = $(this).parent();
});
function removeNewClass(){
$contents.each(function() {
var id = $(this).attr('id');
var postClass = 'post' + id.split('tab')[1];
console.log( postClass );
$(this).parent().attr("class", postClass);
});
}
.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}
.long {border: 1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
<h2>Title 1</h2>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
<div id="tab1" class="tab">Show 1</div>
<div id="tab1show" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
<div class="close">close</div>
</div>
</div>
<div class="post2">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
<div id="tab2" class="tab">Show 2</div>
<div id="tab2show" class="tab-content">
content 2
<div class="close">close</div>
</div>
</div>
I had a similar issue recently where I was encountering some weird bugs while using .parent(). To combat this, I used data attributes.
More specifically, I set a data-target attribute on the closing button that contained a query of the element that I wanted to close. This query can then be easily passed to jQuery to find the exact element you want on the page. It's much more accurate and consistent compared to using relative elements.
var $contents = $('.tab-content');
$contents.hide();
var newClass = 'long';
$('.tab').click(function() {
var $target = $($(this).data('target'));
$target.addClass(newClass);
$target.find('.tab-content').show();
$target.find('.tab').hide();
});
$('.close').click(function() {
var $target = $($(this).data('target'));
$target.removeClass(newClass);
$target.find('.tab-content').hide();
$target.find('.tab').show();
});
.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}
.long {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
<h2>Title 1</h2>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
<div id="tab1" class="tab" data-target=".post1">Show 1</div>
<div id="tab1show" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
<div class="close" data-target=".post1">close</div>
</div>
</div>
<div class="post2">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
<div id="tab2" class="tab" data-target=".post2">Show 2</div>
<div id="tab2show" class="tab-content">
content 2
<div class="close" data-target=".post2">close</div>
</div>
</div>
Is that what you're looking for?
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
removeNewClass();
var id = this.id;
var $target = $('#' + id + 'show').show();
var newClass = 'long';
$('.tab').show();
$(this).hide()[0].parentNode.classList.add(newClass);
$contents.not($target).hide();
});
$('.close').click(function() {
removeNewClass();
var parent = $(this.parentNode);
parent
.hide()
.prev('.tab')
.show();
});
function removeNewClass(){
$contents.each(function() {
var id = $(this).attr('id');
var postClass = 'post' + id.split('tab')[1];
console.log( postClass );
$(this.parentNode).attr("class", postClass);
});
}
.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}
.long {border: 1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
<h2>Title 1</h2>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
<div id="tab1" class="tab">Show 1</div>
<div id="tab1show" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
<div class="close">close</div>
</div>
</div>
<div class="post2">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
<div id="tab2" class="tab">Show 2</div>
<div id="tab2show" class="tab-content">
content 2
<div class="close">close</div>
</div>
</div>
I cant figure out how to position 3 elements inside a div container(css grid), and keep the page responsive.
title(purple in the img)
photo
comments(green in the img)
the flow i want to achieve
the problem is, if i change the window size, the comments section do not overflow, instead its in-large the div container.
the problem
instad its need to look like this :
the right way
i succeeded to achieve that with max-height: and overflow:scroll, but i believe there must be an easier way(for the max-height part, of course), and more practical.
.post-container {
background-color: rgb(0, 224, 255);
display: grid;
grid-template-areas: 'title title' 'photo comments';
grid-gap: 10px;
padding: 10px;
}
.Title {
background-color: rgb(47, 0, 99);
width: 100%;
grid-area: title;
color: white;
}
.Photo {
grid-area: photo;
}
.Comments {
background-color: rgb(11, 75, 82);
grid-area: comments;
color: white
}
.post-container img {
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="post-container">
<div class="Title">
<h1>comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit? </h1>
</div>
<div class="Photo">
<img src="https://images.pexels.com/photos/1210543/pexels-photo-1210543.jpeg?cs=srgb&dl=architecture-bay-blue-1210543.jpg&fm=jpg" alt="">
</div>
<div class="Comments">
<ul>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
</ul>
</div>
</div>
</body>
</html>
If you want the image to set the row's height, the other content(ul) needs to be taken of the flow via position:absolute;.
You need also to set the width of this area via a template grid-template-colums.
Once this area(.Comments) has a width(from template) and an height(from img), set it in position:relative; and size the ul via coordonates. Overflow will come next.
demo below of the idea to avoid ul to resize your grid
.post-container {
background-color: rgb(0, 224, 255);
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas: 'title title' 'photo comments';
grid-gap: 10px;
padding: 10px;
}
.Title {
background-color: rgb(47, 0, 99);
width: 100%;
grid-area: title;
color: white;
}
.Photo {
grid-area: photo;
}
.Photo img {
vertical-align: top;
}
.Comments {
background-color: rgb(11, 75, 82);
grid-area: comments;
color: white;
position: relative;
}
.Comments ul {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: auto;
}
.post-container img {
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="post-container">
<div class="Title">
<h1>comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit? </h1>
</div>
<div class="Photo">
<img src="https://images.pexels.com/photos/1210543/pexels-photo-1210543.jpeg?cs=srgb&dl=architecture-bay-blue-1210543.jpg&fm=jpg" alt="">
</div>
<div class="Comments">
<ul>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
</ul>
</div>
</div>
</body>
</html>
<div>
<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>
</div>
without testing, should be something like this. one div that have all inside, the second dont have absolute certain is a block, e other two must be side by side.
you can put the style i have i my div in your class of course.
I am trying to make a onClick() button that when pressed, makes text show. My issue is that when I click the button, the button scoots down when the text shows up.
Is there a way to make the button not move when the text appears? Maybe make it actually be there but hidden and on button unhide it? I don't know, I just don't want it to move when the button is pressed.
angular.module('starter.controllers', ['ionic'])
.controller('HomeCtrl', function($scope) {
$scope.flip = function() {
$scope.coinResult = "Heads";
}
})
<body ng-app="starter">
<head>
<style>
.button-calm {
width: 50%;
}
.coin-result {
text-align: center;
line-height: 100px;
}
.centerItems {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<ion-content>
<div class="centerItems">
<p class="coin-result" ng-bind="coinResult"></p>
<button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>
</ion-content>
</body>
One way would be to fix the height of the text div coin-result and give it overflow-y: auto. This ensures that the button stays put.
Demo below:
.button-calm {
width: 50%;
}
.coin-result {
text-align: center;
line-height: 100px;
height: 100px;
overflow-y: auto;
}
.centerItems {
margin-left: auto;
margin-right: auto;
}
<div class="centerItems">
<p class="coin-result" ng-bind="coinResult">Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>
Let me know your feedback on this. Thanks!