Content box is right justified

💻 Development
,
1

I am new to Nextcloud development. I am trying to make a Vue3 app. Right off the bat, my content box is right justified. I cannot find what CSS is used to create a proper margin. I was surprised that the margin was not the default. Any help resolving this would be appreciated.

2

Hello. Do you have the code already published?

3

I have not gotten that far. I am basically working on my Hello World to see components on the screen. The best I could find is forcing a width, but that can’t be the right way. Here is what I have:

<template>
	<NcContent id="content" app-name="reale">
		<NcAppNavigation>
			<NcAppNavigationCaption name="Quick Tools" is-heading />
			<NcAppNavigationList>
				<NcAppNavigationItem name="Compensation" />
			</NcAppNavigationList>
			<NcAppNavigationCaption name="Real-Tools" is-heading />
			<NcAppNavigationList>
				<NcAppNavigationItem name="Clients" />
				<NcAppNavigationItem name="Sale" />
				<NcAppNavigationItem name="Calculation" />
			</NcAppNavigationList>
		</NcAppNavigation>
		<NcAppContent />
	</NcContent>
</template>

<script>
import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
import NcAppNavigationList from '@nextcloud/vue/dist/Components/NcAppNavigationList.js'
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'

export default {
	name: 'App',
	components: {
		NcAppNavigation,
		NcContent,
		NcAppContent,
		NcAppNavigationList,
		NcAppNavigationItem,
		NcAppNavigationCaption,
	},
}
</script>

<style scoped lang="scss">
#content {
	display: flex;
	justify-content: right;
	background-color: yellow;
	width: 98%;
	height:88%;
}
</style>
4

Okay, just to set things straight: you do not want to have right alignment, correct?

Well, there you have it. You put the css there to be right justified.

The content Id references to the NcContent component. I would say you should not alter this one at all. See also the documentation. The actual content of your app goes into NcAppContent. This is empty in your example.

Does it get better if you disable the css part as it is right now? Just rename the id and see what happens.

Chris

5

Sorry, I was fiddling, trying to figure this out. It is the box itself that is the issue I am having. I took out most of the CSS, and renamed the id. In the old wisdom of a picture is worth a thousand words, here is a picture of what my problem is, and the code that produced it. Thanks for helping me out with this.

<template>
	<NcContent id="content" app-name="reale">
		<NcAppNavigation>
			<NcAppNavigationCaption name="Quick Tools" is-heading />
			<NcAppNavigationList>
				<NcAppNavigationItem name="Compensation" />
			</NcAppNavigationList>
			<NcAppNavigationCaption name="Real-Tools" is-heading />
			<NcAppNavigationList>
				<NcAppNavigationItem name="Clients" />
				<NcAppNavigationItem name="Sale" />
				<NcAppNavigationItem name="Calculation" />
			</NcAppNavigationList>
		</NcAppNavigation>
		<NcAppContent>
			This is some text....
		</NcAppContent>
	</NcContent>
</template>

<script>
import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
import NcAppNavigationList from '@nextcloud/vue/dist/Components/NcAppNavigationList.js'
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'

export default {
	name: 'App',
	components: {
		NcAppNavigation,
		NcContent,
		NcAppContent,
		NcAppNavigationList,
		NcAppNavigationItem,
		NcAppNavigationCaption,
	},
}
</script>

<style scoped lang="scss">
#notcontent {
	display: flex;
	background-color: yellow;
}
</style>

ScreenShot
ScreenShot1921×1080 119 KB

6

Is there something logged in the browser console? Are you using compatible versions of NC server code and Vue library (@ nextcloud/vue package)?

7

I am making a guess here that I have a Vue version problem, insight would be appreciated…

Here is my version info. I thought it was Vue 3, but it looks like it is vue 2.7.16. So, presumably, my first task is to upgrade Vue.

www-data@nextcloud:~/nextcloud/extra-apps/reale$ npm list vue
reale@1.0.0 /var/www/nextcloud/extra-apps/reale
├─┬ @nextcloud/vue@8.19.0
│ ├─┬ @linusborg/vue-simple-portal@0.1.5
│ │ └── vue@2.7.16 deduped
│ ├─┬ @nextcloud/vue-select@3.25.1
│ │ └── vue@2.7.16 deduped
│ ├─┬ @vueuse/components@11.1.0
│ │ ├─┬ @vueuse/shared@11.1.0
│ │ │ └─┬ vue-demi@0.14.10
│ │ │   └── vue@2.7.16 deduped
│ │ └─┬ vue-demi@0.14.10
│ │   └── vue@2.7.16 deduped
│ ├─┬ @vueuse/core@11.1.0
│ │ └─┬ vue-demi@0.14.10
│ │   └── vue@2.7.16 deduped
│ ├─┬ emoji-mart-vue-fast@15.0.3
│ │ └── vue@2.7.16 deduped
│ ├─┬ floating-vue@1.0.0-beta.19
│ │ ├─┬ vue-resize@1.0.1
│ │ │ └── vue@2.7.16 deduped
│ │ └── vue@2.7.16 deduped
│ ├─┬ vue-frag@1.4.3
│ │ └── vue@2.7.16 deduped
│ ├── vue@2.7.16 deduped
│ └─┬ vue2-datepicker@3.11.1
│   └── vue@2.7.16 deduped
├─┬ @nextcloud/webpack-vue-config@6.1.1
│ └── vue@2.7.16 deduped
└── vue@2.7.16

My “npm run watch” produces:

Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

My Nextcloud version is 30.0.0

My browser console produces:

session heartbeat polling started
_plugin-vue2_normalizer-BU0IC95A.chunk.mjs:4 
        
        
       GET https://192.168.32.10/ocs/v2.php/apps/notifications/api/v2/notifications 500 (Internal Server Error)
(anonymous) @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:4
xhr @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:4
ir @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:6
_request @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:7
request @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:6
bt.<computed> @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:7
(anonymous) @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:2
bB @ NotificationsApp-CX_2Ib0T.chunk.mjs:34
YB @ NotificationsApp-CX_2Ib0T.chunk.mjs:34
_fetch @ NotificationsApp-CX_2Ib0T.chunk.mjs:34
mounted @ NotificationsApp-CX_2Ib0T.chunk.mjs:34
lt @ style-BNtK61kD.chunk.mjs:2
tt @ style-BNtK61kD.chunk.mjs:2
insert @ style-BNtK61kD.chunk.mjs:2
Ht @ style-BNtK61kD.chunk.mjs:2
(anonymous) @ style-BNtK61kD.chunk.mjs:2
Gi.t._update @ style-BNtK61kD.chunk.mjs:2
r @ style-BNtK61kD.chunk.mjs:2
t.get @ style-BNtK61kD.chunk.mjs:2
t.run @ style-BNtK61kD.chunk.mjs:2
Yi @ style-BNtK61kD.chunk.mjs:2
(anonymous) @ style-BNtK61kD.chunk.mjs:2
fn @ style-BNtK61kD.chunk.mjs:2
Promise.then
Gt @ style-BNtK61kD.chunk.mjs:2
ge @ style-BNtK61kD.chunk.mjs:2
oe @ style-BNtK61kD.chunk.mjs:2
t.update @ style-BNtK61kD.chunk.mjs:2
Gi.t.$forceUpdate @ style-BNtK61kD.chunk.mjs:2
s @ style-BNtK61kD.chunk.mjs:2
(anonymous) @ style-BNtK61kD.chunk.mjs:2
(anonymous) @ style-BNtK61kD.chunk.mjs:2
Promise.then
Pi @ style-BNtK61kD.chunk.mjs:2
nr @ style-BNtK61kD.chunk.mjs:2
Ti @ style-BNtK61kD.chunk.mjs:2
Sn @ style-BNtK61kD.chunk.mjs:2
t.$createElement @ style-BNtK61kD.chunk.mjs:2
render @ notifications-main.mjs?v=45c2f534-0:3
Ai.t._render @ style-BNtK61kD.chunk.mjs:2
r @ style-BNtK61kD.chunk.mjs:2
t.get @ style-BNtK61kD.chunk.mjs:2
t @ style-BNtK61kD.chunk.mjs:2
qi @ style-BNtK61kD.chunk.mjs:2
M.$mount @ style-BNtK61kD.chunk.mjs:2
t._init @ style-BNtK61kD.chunk.mjs:2
M @ style-BNtK61kD.chunk.mjs:2
(anonymous) @ notifications-main.mjs?v=45c2f534-0:3
NotificationsApp-CX_2Ib0T.chunk.mjs:34 Slowing down notifications: Status 500
8

No, this is correct. See the documentation about nextcloud/vue: Version 8.x is for NC >=28 and Vue2. To upgrade to Vue3 you have to use v9.x.

This looks like you have a more severe problem in your server. When loading the page, do you see any more network issues/errors?