I have created a directive for showing the toolbar and it's content:
import {Component} from "#angular/core";
#Component({
selector: 'ved-toolbar',
templateUrl: './ved.toolbar.html'
})
export class VedToolbar {
time: Date;
constructor() {
setInterval(() => {
this.time = new Date();
}, 1000);
}
}
template:
<md-toolbar flex="50" color="primary">
<md-toolbar-row>
<bootstrap-grid>
<row style="margin: 0;">
<column md="1"></column>
<column md="11">
<column md="4">
<span>LOGO Creditas</span>
</column>
<span>Prihlaseny pouzivatel</span>
<column md="4">
<span>{{ time | date: 'HH:mm:ss' }}</span>
</column>
<column md="4">
<span><a routerLink="/doc/detail" routerLinkActive="active">Nápoveda</a></span>
</column>
</column>
</row>
</bootstrap-grid>
</md-toolbar-row>
however, when I use it just like <ved-toolbar></ved-toolbar> in <head></head> It renders just an empty tag, so nothing is shown.
If I place it inside md-sidenav-container it renders but styles are applied wrong, so it's not fixed on top.
However, when I place ved-toolbar's content into <head/> it renders well.
Surely I have added VedToolbar into app's module declarations list.
What is going wrong in here, please?
Related
I'm trying to drag rows from one DataTable to another. This animation shows what I try to achieve, kind off.
But from the looks of it PrimeVue doesn't seem to support this, or at least I can't figure out why.
Plan B is to use vue.draggable but seeing as I cannot isolate a child row-item from the datatable, I don't think I can wrap it in a draggable component.
The code used in the animation:
<template>
<div class="flex justify-content-center gap-4">
<DataTable :value="cars1" #row-reorder="onRowReorder">
<Column :rowReorder="true" headerStyle="width: 3em" />
<Column field="brand" header="brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<DataTable :value="cars2" #row-reorder="onRowReorder">
<Column :rowReorder="true" headerStyle="width: 3em" />
<Column field="brand" header="brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</template>
<script setup>
const cars1 = ref([
{ brand: "BMW", color: "Green" },
{ brand: "Volvo", color: "Yellow" },
{ brand: "Audi", color: "Red" },
{ brand: "Ford", color: "Pink" }
]);
const cars2 = ref([]);
function onRowReorder(event) {
const draggedCar = cars1.value[event.dragIndex]
cars2.value.push(draggedCar);
}
</script>
You can build it yourself by using #vueuse's useDropZone utility function and by using the template in the column of the reorder icon.
That way you stil use PrimeVue's dragging logic, but you can intercept it yourself with mousedown and mouseup events in combination with the onDrop callback of the useDropZone utility function. See snippet below.
<template>
<div class="flex">
<DataTable :value="cars1">
<Column :rowReorder="true" headerStyle="width: 3em">
<template #body="{ index, data }">
<i
#mousedown="onHandleClick(index, data)"
#mouseup="clearHandle"
:class="['p-datatable-reorderablerow-handle', 'pi pi-bars']"
></i>
</template>
</Column>
<Column field="brand" header="brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<DataTable ref="dropzoneTable" :value="cars2">
<Column :rowReorder="true" headerStyle="width: 3em" />
<Column field="brand" header="brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</template>
<script setup>
const cars1 = ref([
{ brand: 'BMW', color: 'Green' },
{ brand: 'Volvo', color: 'Yellow' },
{ brand: 'Audi', color: 'Red' },
{ brand: 'Ford', color: 'Pink' },
]);
const cars2 = ref([]);
const dropzoneTable = ref();
const { isOverDropzone } = useDropZone(dropzoneTable, onDrop);
const draggingRow = ref();
function onHandleClick(index, data) {
draggingRow.value = data;
}
function onDrop() {
cars2.value.push(draggingRow.value);
}
function clearHandle() {
draggingRow.value = null;
}
</script>
https://stackblitz.com/edit/nuxt-starter-pp7mdb?file=app.vue
I have the following Segment
<Segment className='AddAPIKey'>
<Form>
<Form.Group>
<Form.Field>
<Input placeholder='XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' />
</Form.Field>
<Form.Button color='green' floated='right' content='Add new API key' />
</Form.Group>
</Form>
</Segment>
With the style:
.ui.AddAPIKey {
display: flex;
justify-content: right;
}
Resulting in:
Is there a way I can make the input field take the entire width like in the example below? I've tried with width: 100% and auto and no luck.
import React from "react";
import { Input, Form, Segment } from "semantic-ui-react";
import "./style.css";
const InputExampleFocus = () => (
<Segment>
<Form>
<Form.Group style={{ display: "flex" }}>
<Form.Field style={{ flexGrow: "1" }}>
<Input placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" />
</Form.Field>
<Form.Button color="green" floated="right" content="Add new API key" />
</Form.Group>
</Form>
</Segment>
);
export default InputExampleFocus;
Try this I have removed the .ui.AddAPIKey class and used Inline css to style Form.Group and Form.Field
It produces an Input field that covers all the spaces available.
I hope it solves the issue.
https://codesandbox.io/embed/semantic-ui-example-forked-x5d4qm?fontsize=14&hidenavigation=1&theme=dark
Open the codesandbox and go to example.js
I have a Date component that contains a calendar and time. I can select a date and time from this. I have another component called DatePopup that shows a calendar and time as a popup. This component contains OK and Cancel buttons. If a user selects OK, I want to get the date reactive variable in child component, i.e., Date.
How can I achieve this structure so that I can obtain the data from parent component?
Note that I use Quasar.
Date.vue
<template>
<div class="q-pa-md q-gutter-sm">
<q-badge color="yellow-illerarasi-film-teskilati" text-color="black">
Deadline: {{ date.full }}
</q-badge>
</div>
<div class="q-gutter-md row items-start">
<q-date v-model="date.full" mask="YYYY-MM-DD HH:mm" color="yellow-illerarasi-film-teskilati" text-color="black"/>
<q-time v-model="date.full" mask="YYYY-MM-DD HH:mm" color="yellow-illerarasi-film-teskilati" text-color="black"/>
</div>
<p> {{ date }}</p>
</template>
<script>
import {reactive} from "vue";
export default {
name: "Date",
setup() {
let date = reactive({
full: "2022-01-01 00:00",
})
return {
date,
}
}
}
</script>
<style scoped>
</style>
DatePopup.vue
<template>
<div class="q-pa-md q-gutter-sm">
<q-dialog v-model="show">
<q-card style="width: 700px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">Choose a Deadline</div>
</q-card-section>
<q-card-section class="q-pt-none">
<Date/>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Cancel" color="primary" text-color="black" v-close-popup/>
<q-btn label="OK" color="yellow-illerarasi-film-teskilati" text-color="black" v-close-popup/>
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script>
import Date from "./Date.vue";
import {reactive} from "vue";
export default {
name: "DatePopup",
components: {Date},
props: {
showPopup: {
type: Boolean,
default: true
}
},
setup(props) {
return reactive({
show: true
})
}
}
</script>
<style scoped>
</style>
I am using Reactstrap and trying to add some custom CSS, but the custom CSS is not getting applied.
Here is the code snippet.
Below is Home.js file
import React, { Component } from 'react';
import { Row, Col, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import './Home.css'
export class Home extends Component {
constructor(props) {
super(props);
this.state = { showForm: false, btnText: "Add Record", formClass: "formHide" };
this.addRecord = this.addRecord.bind(this);
}
addRecord() {
if (this.state.btnText === 'Back') {
this.setState({ btnText: 'Add Record' });
this.setState({ formClass: "formHide" });
} else {
this.setState({ btnText: 'Back' });
}
}
render() {
return (
<section>
<h1 className='centerTitle'>Welcome to Fit Buddy</h1>
<Row>
<Col sm={9}></Col>
<Col sm={3}>
<Button color="primary" onClick={this.addRecord}>{this.state.btnText}</Button>
</Col>
</Row>
<Form className={this.state.formClass}>
<FormGroup row>
<Label for="exampleSelect" sm={3}>Exercise Type</Label>
<Col sm={9}>
<Input type="select" name="select" id="exampleSelect">
<option>Push Ups</option>
<option>Sit Ups</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleReps" sm={3}>No. of Reps</Label>
<Col sm={9}>
<Input type="text" name="text" id="exampleReps" placeholder="Enter number of Reps" />
</Col>
</FormGroup>
</Form>
</section>
);
}
}
Below is Home.css file
centerTitle {
text-align: center !important;
}
formHide {
display: none !important;
}
I tried debugging using developer Tools, this is the code, I am able to see. My Style is there and it is applied correctly in HTML as well. Still, my style is not working.
Code in Browser
When trying to provide styling to HTML Tags, it is working. But when giving styles to class, it is not working.
Please help. Thanks in Advance.
Your css-file is not targeting anything, since you are missing the dots infront of your classnames.
.centerTitle {
text-align: center !important;
}
.formHide {
display: none !important;
}
Edit:
Here is a good overview of the different css-selectors:
https://www.w3schools.com/cssref/css_selectors.asp
I have 2 different pages and 2 different css (one for each html page) and if i modify .table{} in one of them, the css is applied on all pages. I use react bootstrap
I expect to have one table from page1 at 100% width and the table from page2 at 33.3% width.
page2:
import React from 'react';
import Container from "react-bootstrap/Container";
import {Jumbotron} from "react-bootstrap";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Image from "react-bootstrap/Image"
import ProgressBar from "react-bootstrap/ProgressBar"
import Table from "react-bootstrap/Table"
import './Doctor.css'
export default class Doctor extends React.Component {
constructor(props){
super(props);
this.state = {
items: [],
isLoaded: false,
}
}
componentDidMount() {
fetch('http://localhost:8000/api/doctorsList')
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
items: json,
})
});
}
render() {
var { isLoaded, items} = this.state;
if (!isLoaded){
return <div>Loading...</div>
}else {
return (
<Container>
<Jumbotron>
<h1 align="center">The Clinicum</h1>
</Jumbotron>
<Row>
{items.map(row =>(
<Col className={".column"} key={row.iddoctor}>
<Image src={require('./photos/dr1.jpg')} roundedCircle />
<p>Raiting:</p>
<ProgressBar>
<ProgressBar striped variant="success" now={70} key={1} label={"70%"} />
<ProgressBar striped variant="danger" now={30} key={2} label={"30%"} />
</ProgressBar>
<br/>
<Table striped bordered hover >
<tbody>
<tr>
<td>Name</td>
<td>{row.nume}</td>
</tr>
<tr>
<td>An absolvire</td>
<td>{row.anAbsolvire}</td>
</tr>
<tr>
<td>Specializare</td>
<td>{row.specializare}</td>
</tr>
<tr>
<td>Telefon</td>
<td>{row.photoLink}</td>
</tr>
</tbody>
</Table>
</Col>
))}
</Row>
</Container>
)};
}
}
page1:
import React, {Component} from 'react';
import { Link} from 'react-router-dom';
import {Jumbotron} from 'react-bootstrap';
import './Home.css';
import Container from "react-bootstrap/Container";
import Table from "react-bootstrap/Table";
import {Image} from "react-bootstrap";
class Home extends Component {
constructor(props){
super(props);
this.state = {
items: [],
isLoaded: false,
}
}
componentDidMount() {
fetch('http://localhost:8000/api/clinicList')
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
items: json,
})
});
}
render() {
var { isLoaded, items} = this.state;
if (!isLoaded){
return <div>Loading...</div>
}else {
return (
<Container>
<Jumbotron>
<h1 align="center">The Clinicum</h1>
</Jumbotron>
<Table className="table">
<thead>
<tr>
<th>Name</th>
<th>Locatie</th>
<th>Tip Unitate</th>
</tr>
</thead>
<tbody>
{items.map(row =>(
<tr key={row.idclinic}>
<td>
<Link to="/doctor">
<Image
src= {require(`./photos/${row.photoLink}.jpg`)}//{row.photoLink}
width="30"
height="30"
className="d-inline-block align-top"
alt={"aa"}
/>{row.name}
</Link>
</td>
<td>{row.locatie}</td>
<td>{row.tipUnitate}</td>
</tr>
))}
</tbody>
</Table>
</Container>
);
}
}
}
export default Home;
at Home.css i have
.table{
width: 100%;
}
at Doctor.css i have
.table{
width: 33.3%;
}
but in Home page the table is 33.3%
React doesn't compartmentalize CSS like Angular does. Once it's loaded in the browser it applies everywhere in the current page. Use additional classes on your tables to specify width.
Better yet, use the grid that Bootstrap provides (.col-xs-4 for 33%).
The order of your import statements will decide on which css file will be used last. However, in your case you should just simply add another marker that points to the change. For instance, in this you have a table className. Add another piece to it like so.
.table{
width: 100%;
border: 1px solid black
}
.home{
width: 33.3%
}
Then, in your JSX you can do this.
<Table className='table home' />
Now your table will have the border, and also the home width. This is the easiest way to modify existing css.
That is the normal behaviour. You have two classes with the same name, which means after React is finished building your dev, or prod environment the second class will overwrite the first one, because that is what CSS does.
There is a view different options for you to make sure that doesn't happen:
define inline styles
use CSS-in-js like this or with libraries like styled-components
define separate css class names (for this i would recommend a naming convention, this can be your own, your companies naming convention, or something like BEM)
Personally i would go for the naming convention BEM. This could look like the following:
.home__table {
width: 100%;
}
.doctor__table {
width: 33%;
}
But since you are using Bootstrap, you might want to use the inline-style option and use the bootstrap provided col sizes like #isherwood suggested.