I'm trying to order three columns using Bootstrap 3.
I have the following columns on big screens:
-----------------------------
| | Name |
| Video |-------------------|
| | Description |
-----------------------------
I want them to stack like this for mobile:
-----------------------------
| Name |
-----------------------------
| Video |
-----------------------------
| Description |
-----------------------------
I've been trying to stack them using push and pull, but I can only get them to stack like this on my desktop:
-----------------------------
| | Name |
| Video |--------------------
| |
-----------------------------
| Description |
---------------------
I'm having trouble getting description to float up. Sounds like it's a simple problem but I'm having trouble thinking through it. Any help will be greatly appreciated!
I am assuming you have been using bootstrap's col-*-push-* and col-*-pull-* classes. The limitation they have is that, since they apply margins to achieve their effect, they can only move elements horizontally.
You can fix this using the pull-right class, which sets the float direction instead. A sample is shown below.
div { color:white; }
#Name { background:red; height:50px; }
#Video { background:green; height:100px; }
#Description { background:blue; height:50px; }
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div id="Name" class="col-xs-12 col-sm-8 pull-right">Name</div>
<div id="Video" class="col-xs-12 col-sm-4">Video</div>
<div id="Description" class="col-xs-12 col-sm-8 pull-right">Description</div>
Related
I receive VueCompilerError: Element is missing end tag. and VueCompilerError: Invalid end tag.
But I've set the correct closing tag for <q-list> which is </q-list>, am I right? What am I missing?
VueCompilerError: Element is missing end tag.
at /Users/domi/n_node/tfsa_signup/src/pages/Programs.vue:22:17
20 | <p>in {{program.title}}</p>
21 | <q-list v-if="program.courses && program.courses.length > 0">
22 | <q-item #click="setCourse(course)" v-for="course in program.courses"
| ^
23 | :key="course.title" clickable v-ripple >
24 | <q-item-section top avatar>
App • ERROR • UI in ./src/pages/Programs.vue
Module Error (from ./node_modules/vue-loader/dist/index.js):
VueCompilerError: Invalid end tag.
at /Users/domi/n_node/tfsa_signup/src/pages/Programs.vue:36:13
34 | <i class="fa fa-chevron-right"></i>
35 | </q-item-section>
36 | </q-item>
| ^
37 | </q-list>
38 | <q-banner inline-actions rounded class="bg-orange text-white" v-else>
Here is the git repo: https://github.com/ziegenhagel/tfsa_signup/blob/0175b4ab2e796267f33dc63a97e02cf5f3a36481/src/pages/Programs.vue
Thank you very much!
Best dom
I have a json object representing a list of teams and each team has three players. I am using express / pug to create table data.
The input structure is like this:
{ teams: [
team: <string>,
rank: <number>,
members: [
name: <string>,
nationality: <string>,
age: <number>,...
]
],...}
I can see how to generate the cells where the team and all three members are across one row using two each statements:
each val1 in teams
tr
td #{val1.team}
td #{val1.rank}
each val2 in val1.members
td
td #{val2.name}
td #{val2.nationality}
td #{val2.age}
Resulting in one row per team.
|----------|---------–|--------|-----------|-----|--------|-----------|-----|--------|-----------|-----|
| Team | Rank | Name |Nationality| Age | Name |Nationality| Age | Name |Nationality| Age |
|----------|---------–|--------|-----------|-----|--------|-----------|-----|--------|-----------|-----|
But I want to have the three team members above each other like this:
|----------|---------–|--------|-----------|-----|
| | | Name |Nationality| Age |
| | |--------|-----------|-----|
| Team | Rank | Name |Nationality| Age |
| | |--------|-----------|-----|
| | | Name |Nationality| Age |
|----------|---------–|--------|-----------|-----|
this could be done using rowspan cells, but I can't figure out how to map the variables.
<tr>
<td rowspan="3">Team</td>
<td rowspan="3">Rank</td>
<td>Name</td>
<td>Nationality</td>
<td>Age</td>
</tr>
<tr>
<td>Name</td>
<td>Nationality</td>
<td>Age</td>
</tr>
<tr>
<td>Name</td>
<td>Nationality</td>
<td>Age</td>
</tr>
How can I map the json object in PugJS to generate the layout?
regards
Steve
You're very close. It's a matter of getting the indentation right in pug and inserting the rows for each player. Here's a codepen example with the table generated live.
table
each team in teams
tr
td(rowspan= team.members.length + 1)= team.team
td(rowspan= team.members.length + 1)= team.rank
each player in team.members
tr
td= player.name
td= player.nationality
td= player.age
Another way to do this would be to use a tbody element to section off each team, then you can conditionally render the "team" and "rank" cells only in the first row. Setting rowspan="0" on these cells will make them expand the full extent of their tbody section.
Here's a codepen example forked from Graham's pen.
table
each team in teams
tbody
each player, i in team.members
tr
if (i == 0)
th(rowspan='0', scope='row')= team.team
td(rowspan='0')= team.rank
td= player.name
td= player.nationality
td= player.age
Given some data, the above will render:
table,
th,
td {
border: 1px solid black;
}
<table>
<tbody>
<tr>
<th rowspan="0" scope="row">Aberdeen United</th>
<td rowspan="0">1</td>
<td>Adam</td>
<td>Ireland</td>
<td>22</td>
</tr>
<tr>
<td>Bruce</td>
<td>Scotland</td>
<td>23</td>
</tr>
<tr>
<td>Charles</td>
<td>Wales</td>
<td>21</td>
</tr>
</tbody>
</table>
There are three tables.
Tables :
Trip
id | start_destination_id | end_destination_id | arrive_time |
-------------------------------------------------------------------
1 | S | E | 09:00 |
Destination
id | name
---------
S | Start
E | End
Schedule
id | start_destination_id | end_destination_id | should_arrive |
-------------------------------------------------------------------
1 | S | E | 08:00 |
2 | A | E | 10:00 |
Query
SELECT
Trip.*,
Schedule.should_arrive
FROM
Trip
LEFT JOIN
Schedule
ON
Trip.start_destination_id = Schedule.start_destination_id
AND
Trip.end_destination_id = Schedule.end_destination_id
I am trying to include Schedule in Trip.findAll but receive error
Exception: SequelizeEagerLoadingError: Schedule is not associated to Trip!
Is there a way that I can join them together without using foreign keys and raw queries?
Many thanks.
Finally I found a solution (not sure if it is a hack).
Schedule.ts
// add these lines
...
#ForeignKey(() => Trip)
#Column({ type: DataType.VIRTUAL })
private _dummyForTrip: undefined;
...
Then create an association between Schedule and Trip.
Trip.ts
#HasMany(() => Schedule)
public schedules: Schedule[] | null
Then you can include Schedule inside Trip by using include.on
const trips = await Trip.findAll({
include: [{
model: Schedule,
on: {
'$schedules.start$': { [Op.col]: "Trip.start_destination" },
'$schedules.end$': { [Op.col]: "Trip.end_destination" },
}
}],
where: {
id: { [Op.in]: payload.inputTripIdArr }
}
});
In Vue, I'm inserting a value in a 2d array input field and calculating it per row, but the total value that is being returned only calculates the first row, and when I display, the computed value is all the same.
How can i calculate the inputted value so that the value will compute it per row and not just the first value?
This is what i get:
sample image of the value
FIDDLE:jsfiddle
NAME | VALUE1 | VALUE2 | TOTAL
name1 | 1 | 1 | 2
name2 | 2 | 3 | 2
name3 | | | 2
script
data() {
return {
form: new Form({
labStudentScores: [],
})
};
},
computed: {
studentTotalScore: function() {
return this.form.labStudentScores.reduce(
(acc, item) => acc + parseInt(item.value),
0
);
},
methods: {
addScore: function() {
this.form.labStudentScores.push({ value: [] });
}
}
Template
<button type="button" #click="addScore">score(+)</button>
//classlists is comming from http request
<tr v-for="(classlist,index) in classlists" :key="'lab'+ classlist.id">
<td>{{index +1}}</td>
<td>
{{classlist.student}}
</td>
<td v-for="(labStudentScore,i) in form.labStudentScores" :key="i">
<input v-model="labStudentScore.value[index]" />
</td>
<td>{{studentTotalScore}}</td>
</tr>
Your computed variable is really only one number studentTotalScore. Since you want a number for each row, this computed value should be an array studentTotalScores. Each row should have its own index.
this.form.labStudentScores[index].push(value);
And in your template you should also refer to the correct row too for calulation.
{{studentTotalScore[index]}}
Of course your compute function should also only compute values of the related row.
I use an value converter to format date format:
${date | formatDate}
Next I'd like to use this formatted date as a translator parameter. Something like this way:
${'dateOfCreation' | t: {'date': ${date | formatDate}}}
But it doesn't work. Is it even possible to do that in Aurelia? If not, how should I do that?
Thanks!
Unfortunately, Aurelia currently does not support nested value converters. You can use this as a workaround:
<div ref="myDiv" formatted-date="${date | formatDate}">
${'dateOfCreation' | t: { 'date': myDiv.formattedDate } }
</div>
Hope this helps!