Upgrade to v 13 - theme adjustments, variables, forms, template

Forum rules
Please note that response time for technical support is within 3-5 business days.
regit-bs
Posts: 9
Joined: 29 Jan 2020, 22:37

07 Feb 2022, 12:12

I am using avalon since the version 9. I've succesfully upgraded to v. 13 but now I have issues with styles. I used the cyan light theme (since the colors are different then in previous versions). I've copied it and adjusted the primary color. I can't however get it to work for buttons. I hoped the buttons used primary color for reference, but it seems not the case. I don't like messing to much with the styles and find it better to just adjust a few variables for all to work. It was the case with previous versions.

Maybe I am missing something obvious or simple?

layout-cyan-own.scss

Code: Select all

$topbarLeftBg:#1A4959;
$topbarRightBg:#1A4959;
$topbarTextColor:#ffffff;
$menuBg:#ffffff;
$menuitemHoverBgColor:transparent;
$menuitemHoverTextColor:#0A616F;
$menuitemActiveColor:#1f6d7f;
$menuitemActiveBgColor:transparent;
$menuButtonBgColor:#ffffff;
$menuButtonColor:#1f6d7f;
$badgeBgColor:#dc3545;
$badgeColor:#ffffff;
$darkMenuBg:#2a323d;
$darkMenuHoverBgColor:transparent;
$darkMenuHoverTextColor:#6edff6;
$darkMenuRootMenuitemColor: rgba(255, 255, 255, 0.65);
$darkMenuMenuitemColor:#ffffff;
$darkMenuMenuitemActiveColor:#6edff6;
$darkMenuMenuitemActiveBgColor:transparent;


@import '../../sass/layout/_layout';
Last edited by regit-bs on 08 Feb 2022, 11:20, edited 1 time in total.

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

07 Feb 2022, 13:42

Hi,

Did you watch the SCSS changes by sass?

If you didn't, please run this code in your terminal inside the project.

Code: Select all

sass --watch src:assets/src:assets --no-source-map
Regards.

regit-bs
Posts: 9
Joined: 29 Jan 2020, 22:37

08 Feb 2022, 09:59

It did the trick. Thank you.

regit-bs
Posts: 9
Joined: 29 Jan 2020, 22:37

08 Feb 2022, 11:18

I will proceede here. No need to open another post.

I have issues with form. I can't recreate the template "Advanced" section. I copied the example from template and it works partially. The fields don't align as set by md class, text area is plain(not formatted),...
If I check the generated HTML in console it seems as if the classes are not computed fully.

Should I install something else in my project? What am I missing? I tried to find it in template if it is something I should have installed, but can't find any info.

This is the template code.

Code: Select all

<div class="p-grid">

    <div class="p-col-12">
		<div class="card">
			<h5>Advanced</h5>
			<div class="p-fluid p-formgrid p-grid">
				<div class="p-field p-col-12 p-md-6">
					<label for="firstname6">Firstname</label>
					<input id="firstname6" type="text" pInputText>
				</div>
				<div class="p-field p-col-12 p-md-6">
					<label for="lastname6">Lastname</label>
					<input id="lastname6" type="text" pInputText>
				</div>
				<div class="p-field p-col-12">
					<label for="address">Address</label>
					<textarea id="address" type="text" rows="4" pInputTextarea></textarea>
				</div>
				<div class="p-field p-col-12 p-md-6">
					<label for="city">City</label>
					<input id="city" type="text" pInputText>
				</div>
				<div class="p-field p-col-12 p-md-3">
					<label for="state">State</label>
					<input id="city2" type="text" pInputText>
				</div>
				<div class="p-field p-col-12 p-md-3">
					<label for="zip">Zip</label>
					<input id="zip" type="text" pInputText>
				</div>
			</div>
		</div>
	</div>    

</div>
This is the html output

Code: Select all

<div _ngcontent-tbv-c58="" class="p-grid">
    <div _ngcontent-tbv-c58="" class="p-col-12">
        <div _ngcontent-tbv-c58="" class="card">
            <h5 _ngcontent-tbv-c58="">Advanced</h5>
            <div _ngcontent-tbv-c58="" class="p-fluid p-formgrid p-grid">
                <div _ngcontent-tbv-c58="" class="p-field p-col-12 p-md-6"><label _ngcontent-tbv-c58=""
                        for="firstname6">Firstname</label><input _ngcontent-tbv-c58="" id="firstname6" type="text"
                        pinputtext="" class="p-inputtext p-component p-element"></div>
                <div _ngcontent-tbv-c58="" class="p-field p-col-12 p-md-6"><label _ngcontent-tbv-c58=""
                        for="lastname6">Lastname</label><input _ngcontent-tbv-c58="" id="lastname6" type="text"
                        pinputtext="" class="p-inputtext p-component p-element"></div>
                <div _ngcontent-tbv-c58="" class="p-field p-col-12"><label _ngcontent-tbv-c58=""
                        for="address">Address</label><textarea _ngcontent-tbv-c58="" id="address" type="text" rows="4"
                        pinputtextarea=""></textarea></div>
                <div _ngcontent-tbv-c58="" class="p-field p-col-12 p-md-6"><label _ngcontent-tbv-c58=""
                        for="city">City</label><input _ngcontent-tbv-c58="" id="city" type="text" pinputtext=""
                        class="p-inputtext p-component p-element"></div>
                <div _ngcontent-tbv-c58="" class="p-field p-col-12 p-md-3"><label _ngcontent-tbv-c58=""
                        for="state">State</label><input _ngcontent-tbv-c58="" id="city2" type="text" pinputtext=""
                        class="p-inputtext p-component p-element"></div>
                <div _ngcontent-tbv-c58="" class="p-field p-col-12 p-md-3"><label _ngcontent-tbv-c58=""
                        for="zip">Zip</label><input _ngcontent-tbv-c58="" id="zip" type="text" pinputtext=""
                        class="p-inputtext p-component p-element"></div>
            </div>
        </div>
    </div>
</div>

regit-bs
Posts: 9
Joined: 29 Jan 2020, 22:37

08 Feb 2022, 12:52

Figured the textarea issue. Just had to add InputTextareaModule in app.module

The issue with the p-grid is related to different primeng and primeflex version.

These are my versions

"primeflex": "^3.1.2",
"primeicons": "^5.0.0",
"primeng": "^13.1.0",
"prismjs": "1.26.0",

When can we expect the update in template?

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

09 Feb 2022, 10:36

Hi,

All of the PrimeNG Templates are updated to v13.1.0 with primeFlex v3 support and other improvements, you simply need to download zip file from the store and execute "npm install" command inside the project.

Regards.

regit-bs
Posts: 9
Joined: 29 Jan 2020, 22:37

15 Feb 2022, 13:59

Can you tell me when was the Primeflex v3 support added? Because I downloaded the Avalon v13 on February the third (02/03/2022)

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

16 Feb 2022, 09:02

Hi,

All ascending versions of v13 have primeFlex v3 support.

Regards

regit-bs
Posts: 9
Joined: 29 Jan 2020, 22:37

16 Feb 2022, 09:44

Well then the issue is that in Avalon 13 I have issues with p-grid when primeflex v3 is used. I downgraded primeflex to v2.0.0 and it works.

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

17 Feb 2022, 13:34

regit-bs wrote:
16 Feb 2022, 09:44
Well then the issue is that in Avalon 13 I have issues with p-grid when primeflex v3 is used. I downgraded primeflex to v2.0.0 and it works.
Hi,

We've updated the store, you can now access and download Avalon 13.1.0 from Prime Store. Sorry for the wrong information, Avalon 13 does not support primeflex v3 but v13.1.0 supports it.

Regards

Post Reply

Return to “Avalon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests