Develop Reference

html/css gallery div - how to display text in on line

Can someone help me set (time + manufacturer name in one line)
and below
(price and add to cart) also in one line?
Unfortunately I don't know why but I can't insert all the code.
Here is Currently result:
except result:
Can someone help me set (time + manufacturer name in one line)
and below
(price and add to cart) also in one line?
here is my code:
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 480px;
}
#media only screen and (max-width: 600px) {
div.gallery {
margin: 8px;
border: 1px solid #ccc;
float: center;
width: 370px;
}
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
div.desc1 {
padding: 10px;
text-align: center;
color: black;
}
div.desc2 {
font-size: 14px;
text-align: center;
color: black;
}
div.desc3 {
font-size: 18px;
padding: 2px;
text-align: right;
color: black;
}
div.desc4 {
font-size: 16px;
text-align: right;
color: grey;
}
#clock1 {
text-align: left;
font-size: 18px;
color: black;
margin-top:5px;
overflow: hidden;
}
#pricebox {
text-align: left;
font-size: 20px;
color: black;
margin-top:20px;
overflow: hidden;
white-space: nowrap;
}
.button {
background-color: #d03a0a; /* Green */
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {border-radius: 16px;}
</style>
<! Produkt 1 -->
<div class="gallery">
<div class="desc1">#BOX1</div>
<img src="https://underbox.pl/pub/media/wysiwyg/tshirt_karl.png" alt="Cinque Terre" width="800" height="600">
<div class="desc"><div id="clock1">timmer</div><div class="desc3">KARL LAGERFELD</div><div class="desc4">Zestaw 3x Polo</div><div id="pricebox"><s>309,00zł</s> <font color="red">198,00zł</font></div><button class="button button4">Szybki zakup</button></div>
</div>

Adding width:50%; float:left; to each of the first two div elements is one way to solve it. And adding a common class to the second row with width:33%; float:left; puts the second row items together (after moving the button up into the same div as the prior two items).
Also, the font tag and the s element are deprecated. Styling should be done with CSS.
.red { color:red; }
.right { text-align:right; }
.third { display:inline-block; width: 33%; float:left; font-size:1.5em;}
.strike { text-decoration:line-through; }
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 480px;
}
#media only screen and (max-width: 600px) {
div.gallery {
margin: 8px;
border: 1px solid #ccc;
float: center;
width: 370px;
}
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc1 {
padding: 10px;
text-align: center;
color: black;
}
div.desc2 {
font-size: 14px;
text-align: center;
color: black;
}
div.desc3 {
font-size: 18px;
text-align: right;
color: black;
width:50%;
float:right;
}
div.desc4 {
font-size: 16px;
text-align: right;
color: grey;
}
#clock1 {
text-align: left;
font-size: 18px;
color: black;
overflow: hidden;
width:50%;
float:left;
}
#pricebox {
text-align: left;
font-size: 20px;
color: black;
margin-top:20px;
overflow: hidden;
white-space: nowrap;
}
.button {
background-color: #d03a0a; /* Green */
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {border-radius: 16px;}
<div class="gallery">
<div class="desc1">#BOX1</div>
<a href="img_5terre.jpg" target="_blank" rel="noopener">
<img src="https://underbox.pl/pub/media/wysiwyg/tshirt_karl.png"
alt="Cinque Terre" width="800" height="600">
</a>
<div class="desc">
<div id="clock1">timer</div>
<div class="desc3">KARL LAGERFELD</div>
<div class="desc4">Zestaw 3x Polo</div>
<div id="pricebox">
<span class="third strike">309,00zł</span>
<span class="red third">198,00zł</span>
<span class="third right"><button class="button button4">Szybki zakup</button></span>
</div>
</div>
</div>

Change button background colour [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I'm currently trying to complete a quiz page on European countries.
When the button is clicked I would like its background to change to red if wrong or green if right.
My JavaScript isn't working and I'm not sure why. Could anyone give me an alternative or tell me where I have gone wrong?
The way I had planned it logically was, when the button is clicked, turn red if wrong and green if right, then stay that way while the rest of the quiz is being completed.
var A1btn = document.querySelector("#A1btn")
function changeA1BG() {
A1btn.style.background = "green"
}
A1btn.addEventListener("click", changeA1BG)
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
#a {
height: 240px;
float: left;
width: 665px;
background: #FFDCDC;
}
#b {
background: #F4FFDC;
height: 240px;
float: left;
width: 665px;
}
#c {
background: #DCFFF7;
clear: left;
height: 240px;
float: left;
width: 665px;
}
#d {
background: #EADCFF;
height: 240px;
float: left;
width: 665px;
}
#GeoPic {
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
height: 100px;
}
.A1btn {
background-color: white;
color: black;
font-size: 17.5pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
.A2btn {
background-color: white;
color: black;
font-size: 17.5pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
.A3btn {
background-color: white;
color: black;
font-size: 17.5pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
.A4btn {
background-color: white;
color: black;
font-size: 17.5pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
.A5btn {
background-color: white;
color: black;
font-size: 17.5pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
.A6btn {
background-color: white;
color: black;
font-size: 17.5pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
.A7btn {
background-color: white;
color: black;
font-size: 17.5pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
.A8btn {
background-color: white;
color: black;
font-size: 17.5pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Europe Quiz</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Europe Country Quiz</h2>
<div id="a">
<img id="GeoPic" src="C:\Users\rache\OneDrive - Ulster University\Year 2\COM414 Int Tech\Assessment 2\Site\Images\France.png">
<p> </p>
<button class="A1btn">France</button>
<p> </p>
<button class="A2btn">Spain</button>
</div>
<div id="b">
<img id="GeoPic" src="C:\Users\rache\OneDrive - Ulster University\Year 2\COM414 Int Tech\Assessment 2\Site\Images\Germany.png">
<p> </p>
<button class="A3btn">Italy</button>
<p> </p>
<button class="A4btn">Germany</button>
</div>
<div id="c">
<img id="GeoPic" src="C:\Users\rache\OneDrive - Ulster University\Year 2\COM414 Int Tech\Assessment 2\Site\Images\Ireland.png">
<p> </p>
<button class="A5btn">Ireland</button>
<p> </p>
<button class="A6btn">Portugal</button>
</div>
<div id="d">
<img id="GeoPic" src="C:\Users\rache\OneDrive - Ulster University\Year 2\COM414 Int Tech\Assessment 2\Site\Images\UK.png">
<p> </p>
<button class="A7btn">Russia</button>
<p> </p>
<button class="A8btn">UK</button>
</div>
<script src="GeogQuiz.js"></script>
</body>

You're selecting the element by id but only assigned a class to the element
Try:
var A1btn = document.querySelector(".A1btn")

In querySelector, you are calling an id and not class. Your button is a class.
Your code:
document.querySelector("#A1btn")
What it should be:
document.querySelector(".A1btn")
Your button:
<button class="A1btn">France</button>

Your query selector (var A1btn = document.querySelector("#A1btn")) is looking for an element with an id of A1btn. However, the button in your HTML only has a class selector on it.
Use var A1btn = document.querySelector(".A1btn").
Additionally, you're using background-color in the .A1btn style, while you're setting background to green via javascript. That might be causing a collision depending on the browser.

Unable to scroll custom Scrollbar in VueJS

I am developing an application using VueJS and Bootstrap. I am developing a scrollbar for a component with the id="show".
When the button with id="infoButton" is clicked, the details section opens up, like this
What I want is, only the component with id="show"(the center component) scrollable
Here is the code for it:
import GridView from 'src/components/Dashboard/Views/GridView.vue'
import ListView from 'src/components/Dashboard/Views/ListView.vue'
import DetailsView from 'src/components/Dashboard/Views/DetailsView.vue'
export default {
methods:{
changeView(){
if(this.$store.state.gridView){
this.$store.state.gridView = false;
}
else if(!this.$store.state.gridView){
this.$store.state.gridView = true;
}
},
openDetailsSection() {
this.buttonClicked = true;
if(!this.$store.state.detailsSectionOpen){
this.$store.state.detailsSectionOpen = true;
}
this.$nextTick(() => {
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
showSection.style.width = "80%";
showSection.style.transition = "0.5s";
})
},
closeDetailsSection(){
this.buttonClicked = false;
if(this.$store.state.detailsSectionOpen){
this.$store.state.detailsSectionOpen = false;
}
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.style.width = "0%";
showSection.style.width = "100%";
}
},
data(){
return {
buttonClicked: false,
folderDetails : {},
}
},
components: {
ListView,
GridView,
DetailsView
}
}
<style>
#infoButton:focus,
{
outline: none;
box-shadow: none!important;
}
.context-menu-item:hover {
background-color: #E91E63 !important;
}
.plus-circle-btn{
font-size: 70px;
color: #E91E63;
border: none;
cursor: pointer;
}
li .btn:hover{
color: #E91E63;
}
.details-ul li{
width: 261px;
height: 29px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 14px;
text-align: left;
line-height: 1px;
padding: 5px;
}
.color{
background-color: #DCF3FD;
}
#context-menu-icon{
color: #424242;
}
.header-rectangle {
height: 155px;
background: #F5F5F5;
border: 1px solid #E0E0E0;
border-radius: 0px;
border-bottom: none;
}
.footer-rectangle {
height: 65px;
background: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 0px;
vertical-align:middle; text-align:center;
}
#image {
height: 16px;
border: 0px;
color: #878D99;
}
.file-name-style{
height: 26px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 5px 15px;
}
.file-size-style{
height: 26px;
color: #9E9E9E;
font-family: 'Source Sans Pro';
font-size: 12px;
text-align: left;
line-height: 1px;
padding: 10px 15px;
}
.breadcrumb-hr {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 25px;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.breadcrumb-hr-details {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.details-section-hr{
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.folder-rectangle {
height: 63px;
background-color: #FFFFFF;
border: 1px solid rgb(189, 189, 189);
border-radius: 0px;
}
.folder-selected {
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
.file-selected {
height: 63px;
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
#folder-image{
width: 29px;
height: 20px;
color: #878D99;
font-size: 30px;
}
.context-menu{
width: 197px;
height: 400px;
background: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 5px;
box-shadow: 0 0 5px #333;
}
.context-menu-span{
padding-left: 10px;
color: #424242;
}
.btn{
background-color: none;
border: none;
outline: none;
color: grey;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
.folder-name-style{
text-align: left;
margin-bottom: 0px;
margin-top: 13px;
margin-left: 15px;
padding-left: 10px;
padding-right: 10px;
margin-right: 15px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.folder-size-style{
text-align: left;
margin-left: 15px;
margin-bottom: 13px;
margin-top: 8px;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
color: #9E9E9E;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
}
#no-padding{
padding: 0px;
}
/* show */
#show{
overflow-y: scroll;
}
/* Custom scrollbar */
#show::-webkit-scrollbar {
width: 10px;
}
/* Track */
#show::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 5px;
}
/* Handle */
#show::-webkit-scrollbar-thumb {
background: red;
border-radius: 5px;
}
/* Handle on hover */
#show::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
</style>
<template>
<div>
<ol class="breadcrumb" id="topButtons"
style="display: flex;margin-top: 8px;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="breadcrumb-item active" style="margin-right: auto; margin-left: 15px; padding-top: 13px; color: #424242;
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 10px 0px;">
Files
</li>
<li class="pull-right">
<button class="btn">
<i class="fa fa-sort-amount-asc">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="!$store.state.gridView" #click="changeView" class="btn">
<i class="fa fa-th-large"></i>
</button>
<button v-if="$store.state.gridView" #click="changeView" class="btn">
<i class="fa fa-list-ul">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="!$store.state.detailsSectionOpen" class="btn" id="infoButton" #click="openDetailsSection">
<i class="fa fa-info-circle"></i>
</button>
<button v-else-if="$store.state.detailsSectionOpen" class="btn" id="infoButton" #click="closeDetailsSection">
<i class="fa fa-info-circle"></i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr" style="margin-bottom: 0px;margin-left: 30px;margin-right: 30px;">
<div class="content" style="padding-top: 0px;margin-bottom: 15px;padding-bottom: 8px;" id="show">
<div class="container-fluid">
<div>
<!-- Grid view section begins here -->
<grid-view v-if="$store.state.gridView &&
!$store.state.detailsSectionOpen"
:folders="folders"
:recentFiles="recentFiles"
:files="files"
:buttonClicked="buttonClicked">
</grid-view>
<!-- If the details section is open, give a scroller -->
<grid-view v-else-if="$store.state.gridView &&
$store.state.detailsSectionOpen"
:folders="folders"
:recentFiles="recentFiles"
:files="files"
:buttonClicked="buttonClicked"
id="grid-view">
</grid-view>
<!-- List View section begins here -->
<list-view v-if="!$store.state.gridView &&
!$store.state.detailsSectionOpen"
:folders="folders"
:recentFiles="recentFiles"
:files="files">
</list-view>
<!-- If the details section is open, give a scroller -->
<list-view v-else-if="!$store.state.gridView &&
$store.state.detailsSectionOpen"
:folders="folders"
:recentFiles="recentFiles"
:files="files"
id="list-view">
</list-view>
</div>
</div>
</div>
<details-view
v-if="$store.state.detailsSectionOpen"
#folderDetailsSent="folderDetails = $event"
#fileDetailsSent="fileDetails = $event"
id="details"
>
</details-view>
</div>
</template>
Although the scrollbar appears between for the component with id="show", the scrollbar thumb is not visible, and I am unable to scroll it.
Can someone please help me out? Thanks in advance.

How to display array data in custom table?

I created a custom table to display some key-value-pairs. It works fine for simple examples with 2 Strings but there are also pairs with an array as value. The entries should get listed one below the other in the same table row. It should look something like this:
It seems that the array is not recornized as in the HTML Code
<span ng-show="Array.isArray(data[attr.id])">
Can you guys help me to display the data properly?
Here is my Code:
var app = angular.module('TestApp', []);
app.controller('TestCtrl', ['$scope' ,function($scope){
$scope.isArray = angular.isArray;
$scope.query = {};
$scope.query.attributes = [{'name': 'key_1', 'id': 'key_1'},
{'name': 'key_2', 'id': 'key_2'}];
$scope.data = {'key_1': 'value_1', 'key_2': ['value_2', 'value_3', 'value_4', 'value_6', 'value_7', 'value_8']};
}]);
.content-wrapper{
font-family: 'Roboto';
background: #EDEFF2;
height: calc(~"100vh - 198px");
width: calc(~"100vw - 300px");
float: left;
.content-navbar{
//background: green;
.content-navbar-content{
padding-top: 20px;
margin-left: 20px;
font-size: 25px;
}
}
.content-controlls{
padding-top: 20px;
padding-bottom: 20px;
margin-left: 20px;
//background: blue;
}
.content-contentview{
padding-top: 20px;
margin-left: 20px;
padding-right: 300px;
//background: yellow;
.table-bordered{
border: none;
//border-top: 1px solid #999999;
font-size: 13px;
.table-header-roboto{
color: #999999;
}
.table-body-roboto{
color: #4D4D4D;
#info{
font-size: 18px;
color: #4D4D4D;
padding-top: 2px;
padding-left: 10px;
}
#file{
font-size: 18px;
color: #606166;
padding-top: 2px;
}
.status{
width: 50px;
}
}
}
}
}
.header-status,
.header-info,
.header-task {
display: inline-block;
width: 50px;
padding-left: 5px;
padding-right: 5px;
font-size: 13px;
height: 24px;
display: flex;
align-items: center;
}
.header-task {
border: none;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.row-status,
.row-info {
display: inline-block;
width: 50px;
padding-left: 6px;
padding-right: 5px;
}
.header-status span {
margin-left: 0px;
}
.header-info span {
margin-left: 4px;
}
.row-task,
.header-task {
width: 1102px;
padding-left: 6px;
padding-right: 5px;
}
.custom-header-content {
border: none;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
padding-top: 5px;
padding-bottom: 5px;
color: #999999;
display: flex;
align-items: center;
}
.custom-header-content span {}
.custom-row-content {
border: none;
height: 48px;
border-bottom: 1px solid #CCCCCC;
color: #4D4D4D;
display: flex;
align-items: center;
}
.row-status span i {
padding-bottom: 0px;
margin-top: 3px;
margin-left: 8px;
}
.row-info span i {
padding-bottom: 0px;
margin-top: 3px;
margin-left: 8px;
}
.custom-table {
width: 1200px;
margin: 50px;
}
body {
background: #EDEFF2;
font-family: 'Roboto';
font-size: 13px;
}
.view-navigation {
padding-left: 50px;
//padding-top: 10px;
padding-bottom: 10px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently
not supported by any browser */
}
.view-navigation .counter {
font-size: 13px;
line-height:21px;
vertical-align: top;
color: #4D4D4D;
margin-left: 15px;
}
.view-navigation span {
padding-bottom: 0px;
display: inline-block;
}
.view-navigation .material-icons {
font-size: 21px;
vertical-align:top;
color: #A8A8A7;
cursor: pointer;
cursor: hand;
}
#hoverfinger{
cursor: pointer;
cursor: hand
}
.key, .value{
display: inline-block;
padding-left: 5px;
padding-right: 5px;
font-size: 13px;
height: 24px;
display: flex;
align-items: center;
}
.key{
width: 450px;
font-weight: bold;
}
.value{
width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="TestApp">
<div class="custom-table" ng-controller="TestCtrl">
<div class="custom-row">
<div class="custom-row-content" ng-repeat="attr in query.attributes">
<div class="key"><span>{{attr.name}}</span></div>
<div class="value">
<span ng-show="isArray(data[attr.id])">
<span ng-repeat="objects in data[attr.id] track by $index">
{{objects}}<br>
</span>
</span>
<span ng-show="!isArray(data[attr.id])">
{{data[attr.id]}}
</span>
</div>
</div>
</div>
</div>
</div>
UPDATE
The rseults are now displayed one below the other but if the length of the array grows, the array-objects are displayed floating over the border of the row. So how to change the height of the row according to the length of the array?

Array.isArray(data[attr.id]) won't do the trick.
Instead You can put angular.isArray on the scope like below.
$scope.isArray = angular.isArray;
and use it inline as
<div ng-show="isArray(array)"></div>
Here is the Working fiddle
Hope this helps :)

How do I get a div to move with window resize without pushing other divs out of the way?

I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>

In order to achieve this, I increased the width of the wrapper and moved the new div into it.