Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Sab669
Sep 24, 2009

This is probably an impossible question, but I've started a new project at work and I haven't touched web design & development in about 4 years.

This website has a huge horizontal scrollbar in IE9 and Chrome, a tiny horizontal scrollbar in IE11 and none (intended) in Firefox. I'm digging through the Master Page and CSS to see if anything immediately catches my eye but I really have no idea. Kind of just hoping this is some sort of remotely common issue and someone might have a suggestion where to start? :saddowns:

Adbot
ADBOT LOVES YOU

Sab669
Sep 24, 2009

Anyone have any recommended reading materials for asp web dev? New job is entirely web based when all my experience is desktop applications :(

I understand the concepts of get/post but having some troubles implementing what I think should be simple things, like populating 2 grids based off a selection in one grid, while retaining its selection. But if you go to like any car selling website its basically the same thing; pick a Manufacturer, populate a Model drop down, populate a Trim drop down etc.

Drop downs and grids are obviously different, but the principle should be the same...

Sab669 fucked around with this message at 18:46 on Jun 12, 2015

Sab669
Sep 24, 2009

AuxPriest posted:

By grid do you mean gridview?

I have basically forgone it's use and have janked together my own system using HTML tables or lists (depending) that are populated from the model which contains various necessary collections. This is all made easier as I'm using an orm to write and hydrate objects to/from the database.

Personally I've had nothing but problems with gridview.

Using ASP DataGrids, not GridViews :(

Sab669
Sep 24, 2009

I have limited Design knowledge and found myself working on some CSS-related issues on my web application when I came across a lot of syntax I've never seen in CSS before.

I looked it up and found they're called "At-rules". Seem pretty cool/powerful, but I'm a little confused on some stuff. For example, here's the @media at-rule.

It lists "-webkit-device-pixel-ratio" however my CSS file uses "-webkit-min-device-pixel-ratio".

So why/how does that work?

And furthermore, on that page below the list of Media Features they provide some examples, one of which is for the min device pixel ratio. But it's also colored in green on their example which typically implies a comment, although I'm going to assume it's just an issue with how they mark up code blocks.

Lastly, is there somewhere better than MDN for JavaScript and CSS APIs? Like I said I generally don't do much design work -- and while I do use JS plenty I don't often "do new things" that require much more of me than a cursory search of StackOverflow. Any time I do use their site I'm typically happy with the information but the CSS stuff seems to be lacking a lot of Browser Support/Compatibility information.

Sab669 fucked around with this message at 17:27 on May 25, 2017

Sab669
Sep 24, 2009

I'm experiencing this obnoxious bug where my code only works if I step through it:

code:

var iframe = document.getElementById(ctrl);
var result = iframe.contentWindow.document.execCommand("print", false, null);

if (!result)
    iframe.contentWindow.print():

This works perfectly in Safari, IE, and Chrome. In Firefox, it only works if I put a breakpoint and step through it.

Firefox doesn't support execCommand and returns false, so it should be hitting the print() call -- which I can clearly see it does when I step through the code.

Any ideas? :saddowns:

Sab669
Sep 24, 2009

I'm posting from mobile so I didn't want to type it out, but it's wrapped in one. No error log gets created, tried writing to the console but nothing. Breakpoint in the catch doesn't get fired.

If it were throwing an exception then result should be undefined or null, not false, right?

Sab669
Sep 24, 2009

This works...

code:

var isFirefox = typeof InstallTrigger !== 'undefined';

setTimeout(function ()
{
  var iframe = document.getElementById(ctrl);

  if (!isFirefox)
    execCommand();
  else
    print();
}, 500);

I don't really even know what to think anymore.

Sab669 fucked around with this message at 16:09 on Jun 21, 2017

Sab669
Sep 24, 2009

Stupid question from someone who isn't a designer: If you declare multiple CSS classes on a single line, are you simply defining two classes which will share a common "definition"?

My company pays an Indian firm for some large scale projects and it's my job to unfuck the code they give us. In this case, they recently rewrote our super old, IE-only, table driven web application so it looks somewhat modern. Now it uses divs and tables! :suicide:

I'm trying to fix some display issues, so I stripped out all of the tables on this one page but now I'm getting some really weird padding issues and I can't figure out where it's coming from.

I'm basically just looking up every CSS definition and see stuff like this:

code:

.facilitynews .content {
    padding: 8px 1% !important
}

That would be the same as declaring .facilitynews { ... } and then a separate entry for .content { ... }, right? Or does this make it so that the style only applies to content classes within a facilitynews class?

Also, any recommendations for tutorials on using Chrome's Dev tools? I have a hunch that somewhere between the Element's "Styles" and "Computed" tabs I should be able to figure out where the padding is coming from, but there are just so many things and half of them are crossed out and I don't understand.

Sab669
Sep 24, 2009

Thank guys :) I read something online which said that if there is a space between periods when defining a class then it would behave as two separate ones, but that seemed to conflict with what I was seeing, so I guess it was wrong or outdated.

Sab669
Sep 24, 2009

Not sure where best to post this question.

I have a Windows Server 2016 machine running WAMP 3.1.3 to host a PHP application.

When I'm on that server, I can navigate to localhost/myWebsite and it loads.

If I try to access it from another machine by going to [ip address]/myWebsite I get the following error:

quote:

403 Forbidden

You don't have access to /myWebsite on this server.

Apache/2.4.33 (Win32) PHP/7.2.4 Server [ip address] Port 80

I've googled around and most stuff I can find says "Cannot access site locally" which is not the issue I'm having, but in any case most solutions say to update the httpd-vhosts.conf file like so:

code:
 
# Virtual Hosts
#
<VirtualHost *:80>
  ServerName localhost
  ServerAlias localhost
  DocumentRoot "${INSTALL_DIR}/www"
  <Directory "${INSTALL_DIR}/www/">
    Options +Indexes +Includes +FollowSymLinks +MultiViews
    AllowOverride All
    Require local
  </Directory>
</VirtualHost>


#
<VirtualHost *:80>
	ServerName udsmr
	DocumentRoot "d:/wamp/www/udsmr"
	<Directory  "d:/wamp/www/udsmr/">
		Options +Indexes +Includes +FollowSymLinks +MultiViews
		AllowOverride All
		Require all granted
	</Directory>
</VirtualHost>
I have virtually no experience with WAMP or any of the included technology (Microsoft / IIS guy :() and can't figure this out. Any ideas? Sorry for formatting, posting on mobile

Edit; Added more from the vhosts file. If I change the Require local to Require all granted, I can access my site externally. But it sounds like this is a really bad idea?

Sab669 fucked around with this message at 18:47 on Jun 14, 2018

Sab669
Sep 24, 2009

I don't want to limit it to anything, I want it to be accessible by any machine. Trying to make it open to the public.

Sab669
Sep 24, 2009

Ok, thanks. I wasn't sure if it was a security concern mostly :shrug:

Sab669
Sep 24, 2009

So I'm working on an ASP.NET MVC application that just uses jquery and the KendoUI controls. I have a table with two dozen rows, and 4 columns per row. The first column is just some label text and then the next 3 columns are textboxes. When you press Tab, the control focus moves down to the next row but stays in whatever column you're in.

A user reported a bug yesterday that pressing the Enter key moves focus horizontally, rather than vertically, which is not what we want. I didn't even know you could press Enter to change focus :v: I've tried Googling around to figure out this issue, but unfortunately searching for things like "enter changes focus" just gives me results for people who want to make it so that when you press Enter it will change tab focus. My software's already doing this, but it doesn't respect the tab order.

Here's one row from the .cshtml file:

code:
<tr>
	<td>
		I. 	Walk 10 feet
	</td>
	<td class="qicolumn-width-60 textalign-left valign-top">
		@(Html.Kendo().TextBoxFor(m => m.V14_GG0170I).HtmlAttributes(new { id = "cmbV2_GG0170I", @class = "k-dropdown-width-30", @tabIndex = "45", style = "width:60px", @maxlength = "2", @onKeyUp = "ValidateValues(this)", @onBlur = "ValidateValues(this, null, 'blur' );OnChangeGG170I1(this)" }))
	</td>
	<td class="qicolumn-width-60 textalign-left valign-top">
		@(Html.Kendo().TextBoxFor(m => m.V14_GG0170IGoal).HtmlAttributes(new { id = "cmbV2_GG0170IGoal", @class = "k-dropdown-width-30", @tabIndex = "72", style = "width:60px", @maxlength = "2", @onKeyUp = "ValidateValues(this, true)", @onBlur = "ValidateValues(this, true, 'blur' )" }))
	</td>
	<td class="qicolumn-width-60 textalign-left valign-top">
		@(Html.Kendo().TextBoxFor(m => m.V14_GG0170IDischarge).HtmlAttributes(new { id = "cmbV2_GG0170IDischarge", @class = "k-dropdown-width-30", @tabIndex = "97", style = "width:60px", @maxlength = "2", @onKeyUp = "ValidateValues(this)", @onBlur = "ValidateValues(this, null, 'blur' );OnChangeGG170IDischarge(this)" }))
	</td>
</tr>
The row of controls after this have the tab indices of 46, 73, 98 - so in theory Enter should focus the correct, next tab, right? I'm sure the answer is probably, "Don't use tables for your layout" and you're 100% right, but I don't have the time to fix that :(

All I could find in Kendo's documentation was this tiny section about keyboard navigation but I don't know how to fix my issue.

So, anyone know why the Enter key doesn't respect tab index?

Sab669
Sep 24, 2009

I found a bizarre bug on one of my forms. There's a checkbox that, when clicked, shows a popup with Y/N prompt (regardless of whether it's checked or not).

So:
* Click checkbox
* It gets checked
* Shows Popup
* Click Yes or No
* Some function runs and, based on the checked state, disables one of two groups of controls.

It was discovered that if you save the record first, the Checkbox is still clickable, but its Checked state isn't being updated? So what's happening instead is

* Click checkbox
* Checked state stays whatever it was when you saved the form
* Shows Popup
* Click Yes or No
* Some function runs (and incorrectly evaluates the checked state)

I didn't change the definition of this checkbox in the CSHTML, I searched the entire JS codebase for the control name and simply the word 'checked' and it's not being manipulated directly.

I have absolutely no clue what the hell is causing this. The control isn't disabled/readonly (can checkboxes even be readonly?), only CSS classes are the Telerik/Kendo ones. Nothing was changed in the Controller. Any ideas what I can look at?

Sab669
Sep 24, 2009

No errors in the Console when loading the page, checking/unchecking the control, saving the form, or re-toggling the checkbox.

View:
code:
@(Html.Kendo().CheckBoxFor(e => e.MiniFIM).Label("PAC-CFI").HtmlAttributes(new { id = "chkMiniFIM", @tabIndex = "1", onclick = "PREValidateMiniFim()" }))
JS:
code:
function PREValidateMiniFIM
{
        var chbName = "chkMiniFIM";
        var isIRF3 = $("#hidIRFPAIQIVersion").val().localeCompare("V3.0") >= 0;

        if (isIRF3 && $('#' + chbName).is(':checked') == true)
        {
                //enable and disable some set of controls
        }
        else
        {
                //enable and disable some other set of controls
        }
}
Model:
code:
public string MiniFIM { get; set; }

Sab669
Sep 24, 2009

Sab669 posted:

I found a bizarre bug on one of my forms. There's a checkbox that, when clicked, shows a popup with Y/N prompt (regardless of whether it's checked or not).

So:
* Click checkbox
* It gets checked
* Shows Popup
* Click Yes or No
* Some function runs and, based on the checked state, disables one of two groups of controls.

It was discovered that if you save the record first, the Checkbox is still clickable, but its Checked state isn't being updated? So what's happening instead is

* Click checkbox
* Checked state stays whatever it was when you saved the form
* Shows Popup
* Click Yes or No
* Some function runs (and incorrectly evaluates the checked state)

I didn't change the definition of this checkbox in the CSHTML, I searched the entire JS codebase for the control name and simply the word 'checked' and it's not being manipulated directly.

I have absolutely no clue what the hell is causing this. The control isn't disabled/readonly (can checkboxes even be readonly?), only CSS classes are the Telerik/Kendo ones. Nothing was changed in the Controller. Any ideas what I can look at?

Been working on this issue from last week all day and I have zero leads. I even removed the OnClick event from the Checkbox entirely and it still happens :psyduck:

Sab669
Sep 24, 2009

Nolgthorn posted:

Popups halt execution, perhaps it is halting execution before the checkbox changes and you evaluate it like a microsecond before it actually changes... or something like that. If you're using something like Redux then you're on your own until you agree to tear all that stuff out and write Javascript like a sane person.

ASP.NET/MVC, jQuery and Telerik Kendo UI are all we use.

But again now I'm defining the checkbox simply like so:

code:
@(Html.Kendo().CheckBoxFor(e => e.MiniFIM).Label(String.Compare(Model.IRFPAIQIVersion, "V3.0") >= 0 ? "PAC-CFI" : "Mini FIM").HtmlAttributes(new { id = "chkMiniFIM", @tabIndex = "1" }))
No JS functions at all and the control isn't becoming checked when I save the form first. Also the OnClick event doesn't occur until after the value has been updated, according to this StackOverflow answer


Nolgthorn posted:

It might also be that you are reading the "value" of the checkbox as opposed to its checked state...

code:
if ( $('#' + chbName).is(':checked') == true)
Definitely getting the checked property rather than .val()

Sab669
Sep 24, 2009

Ruggan posted:

Yeah the way you’re defining the checkbox means fuckall as its only run once to template the HTML. It doesn’t do anything to define the functionality of the HTML - that’s all client side JS. So if you’re looking at your definition in Razor you’re almost assuredly wasting your time.

What I'm saying is it doesn't even have an event handler wired to it, though. So there isn't anywhere else for an event to be getting attached to the Checkbox in question. Literally no javascript (at least nothing my company has written) is being executed when you click the checkbox right now.

Additionally when you Save the form, we do re-load the UI:

code:
        public ActionResult SaveFIMInstrument(PreFIM objPreFIMInstrument)
        {
            try
            {
                SaveFIMInformationData(objPreFIMInstrument);
                CalculateStatus(objPreFIMInstrument);

                LoadData(objPreFIMInstrument);

            }
            catch (Exception ex)
            {
                ElmahLogUtility.ErrorException(ex);
            }

            return View(base.GetViewPath("PreFIM"), objPreFIMInstrument);
        }
So this should re-render the page.

Using the Element Inspector in Firefox, the 'checked' property doesn't seem to be getting updated;

Sab669 fucked around with this message at 19:05 on Jun 17, 2019

Sab669
Sep 24, 2009

Ruggan posted:

When you refresh it and get the new html from your action result are you sure you’re replacing the existing code properly?

AHHHHHHH This tripped the switch. When we call save, it's done like so:

code:
$("form:visible[id='frmPreFIMInstrument']").attr('action', ResolveUrl('PREFIMPROi/SaveFIMInstrument')).attr({ "data-ajax-mode": "replace", "data-ajax-update": "#PRE-PatientInfo-6", "data-ajax-success": "PreFIMInstrumentSuccess();" }).submit();
I'm not sure how exactly the data-ajax-update "mechanism" works, but the number is based off the navigation menu index for the page they're currently on. For this module, we added a new tab 'before' the tab I'm working on currently. So I literally just needed up change PRE-PatientInfo-5 to PRE-PatientInfo-6. gently caress it was so simple but we so rarely ever add new tabs to our software.

:suicide:

Sab669 fucked around with this message at 20:21 on Jun 17, 2019

Sab669
Sep 24, 2009

having some weird issue where a specific page in my software is loading scrolled half way down the page.

There are a bunch of different divs all sandwhiched on top of each other (dashboard / record navigation, then the actual scrollable div)

cshtml file is like so:
HTML code:
<div id="dvIntFup>
  <div class="wrap-box">
    <div class="a bunch of classes">
      <table>
        i know i know it's 2019 why the gently caress are you using tables; i didn't design it and I don't have the resources to unfuck it
      </table>
      <div id="divPageScroll" class="scrollarea">
        <table>
          a bunch of more table bullshit
        </table>
      </div>
    </div>
  </div>
</div>
<div id="divPageScroll" class="scrollarea"> is the div with the scrollbar (desired), but for some reason it starts out half way down the page (undesired).

In the document.ready we call SetContainerDimensions('INTERIMFOLLOWUP', '', 'divPageScroll');

JavaScript code:
function SetContainerDimensions(fromWhere, grid, dvContainer, dvBottomContainer)
{
	var windowHeight = $(window).height() - 1;
	if (dvContainer != null && dvContainer != undefined)
	{
		if ($('.dashboard').length > 0)
		{
			var innerWindowHeight = windowHeight;
			innerWindowHeight = innerWindowHeight - 50; // Header height;
			var bodyHeight = innerWindowHeight - $('.dashboard').height();
			bodyHeight = bodyHeight - 30;

			// for interim followup screen there is a html content above to scroll area.
			// Reducing the height.
			if (fromWhere == 'INTERIMFOLLOWUP')
			{
				//Mantis #16217 change 
				bodyHeight = bodyHeight - 112;
				fromWhere = '';
			}

			$('.scrollarea').height(bodyHeight);
		}

		containerProperty = dvContainer
	}
}
CSS code:
.scrollarea {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 300px;
}
I've tried window.scrollTo(0,0); and document.getElementById('divPageScroll').scrollTop = 0; but neither change the behavior at all? :shrug:

Sab669
Sep 24, 2009

I think basically it's supposed to subtract the height of the dashboard from the actual window size, and then use that difference for the height of the "actual body". Unfortunately my company relies heavily on some Indian software firm to write a lot of our poo poo and this is probably something that was ported over from back when we were still IE-only (like our lovely table-based layouts :negative: )

Sab669
Sep 24, 2009

stupidnewbie.jpg: I just recently started a job working with Angular and a bunch of other things I've never even so much as looked at. I've got a tiny app that just presents data pulled from an API. My component's HTML looks like this:

code:
    <div class="spinner-border text-success progress-spinner" role="status" *ngIf="!isDataLoaded">
        <span class="sr-only">Loading Loan Quotes...</span>
    </div>
This was working, now it's throwing an error in my console saying "Can't bind to 'ngIf' since it isn't a known property of 'div'."

If I change it to use [ngIf] instead of *ngIf, my app works but now VSCode gives me a red squiggly with the same error as above.

I googled around and all I could find were like 5 year old posts saying to import { CommonModule } from '@angular/common';, but that did not fix the issue.

Anyone know what dumb thing I'm missing/doing wrong? :(

Sab669 fucked around with this message at 13:57 on Jul 28, 2021

Sab669
Sep 24, 2009

It's not the app-root, just some dashboard component that'll be used as a sort of navigation menu at the top of any given page.

I actually was just given an existing little app and basically told "Rip out everything you don't need, and add a component to show this data", for better or worse. I made no changes to the app-component.ts for what I'm doing.

The original app I started with only has 3 imports in this dashboard component and *ngIf works just fine there;

code:
import { Component, OnInit } from '@angular/core';
import { Base } from 'src/app/shared/classes/Base';
import { FormGroup } from '@angular/forms';
All I did to this dashboard component was remove FormGroup, as what I'm developing won't need a <form> on it. It really couldn't get much more simple - here's the entire class

code:
import { Component, OnInit } from '@angular/core';
import { Base } from 'src/app/shared/classes/Base';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent extends Base implements OnInit {  
  //Privileges and things
  public readEnterprisePrivilege: string = 'read-enterprise-data';

  public readEnterpriseQuote: boolean = this.doesCurrentUserHaveAccessToThisResource(this.readEnterprisePrivilege);
  //Config vars
  public isDataLoaded: boolean = false;
  public loadingDataErrorMessage: string = "";

  ngOnInit(): void {
    console.log('readEnterpriseQuote: ' + this.readEnterpriseQuote);
  }
}
(this.doesCurrentUserHaveAccessToThisResource() is defined in the Base class)

Sab669 fucked around with this message at 15:31 on Jul 28, 2021

Sab669
Sep 24, 2009

I'm not sure what you're asking

Sab669
Sep 24, 2009

Ah, yea, ended up being an issue with app-module.ts; was able to figure it out. Thanks

Sab669
Sep 24, 2009

God drat it thread I hate CSS / UI Design so much, I'm so bad at it :negative:

I'm trying to create a layout similar to what you'd see on Bootstrap's documentation site: https://getbootstrap.com/docs/5.0/components/accordion/
I want a collapsible navigation menu on the left with its own scroll bar, the "actual body" to the right, and a row going across the bottom with some buttons that should always be visible.
I'm pretty close to those requirements, but it's not quite there and I don't understand why :saddowns:

The actual HTML file is approximately 200 lines long, but I think I've cut out everything I can to make try and make it a little easier to digest:

code:
<div class="border-top">
  <div class="row">
    <!-- NAVIGATION MENU -->
    <div class="col-2">
      <div class="asr-nav border-end ps-2 pt-2 pe-4">
       <span class="fw-bold" style="font-size:larger">Sections</span>
      </div>

      <div class="accordion" id="accordionNav">
                                <!--
                                       Goons: Here be 1 <div *ngFor="..."> that loop over an array
                                                     in order to print out all the Nav/Accordion menu items.
                                -->
      </div>
    </div>


    <!-- BODY -->
    <div class="col-10 scrollContainer">
      <div class="row">      
                                <!--
                                       Goons: Here be 6 <ng-containers *ngFor="..."> that loop over a bunch of arrays
                                                      in order to print out various input controls / Angular components.
                                -->
      </div>
    </div>
  </div>

  <!-- FOOTER ROW BUTTONS -->
  <div class="row sticky">
    <div class="col-12 text-end">
      <div class="pt-2"> 
                                <!--
                                       Goons: Some <buttons>
                                -->
      </div>
    </div>
  </div>
</div>
Almost everything is just Bootstrap styles, but the few we do use:

code:
.asr-nav {
  background-color: #f9f9f9;
}

.scrollContainer {
  overflow: auto;
  width: 80vw;
  height: 90vh;
  border: 1px solid #fff;
  position: relative;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  padding: 5px;
}
So what this looks like:


Looks great right?

Until we expand one of the nav menus:



I can't figure out how to get that left-most scroll bar to "belong" to the nav menu on the left. I've tried wrapping the Accordion div in something with overflow: auto, I've tried wrapping the bootstrap column div which encapsulates the accordion in another div and tinker with the overflow there, nothing works :(

And I'm not sure why, when the menu expands and causes the scroll bar to appear, why does the "app body" have a large gap between it and the footer buttons. Although I suppose if I can get the scrollbar to tie to the nav menu, then that'll probably fix this issue...

I've been digging around in the browser's Inspector all week and I just can't figure this poo poo out.

Sab669 fucked around with this message at 17:55 on Dec 8, 2022

Sab669
Sep 24, 2009

Last Chance posted:

Possibly wrap the accordion in a div that has a fixed height of 100vh (100% of user's viewport) and has overflow: scroll turned on:

code:
.accordion-container{
  height: 100vh;
  overflow: scroll;
}
May just work on the .accordion div too, but i'm old school and love me a good container

Put that class right on the accordion div and I do have a scrollbar on the menu now, but for some strange reason I still have that right-most scrollbar :sigh:

Changed it overflow: auto instead as I'd prefer not to always have scrollbars -- but man I swear I tried that earlier this week and it wasn't doing what I wanted lol. Maybe I had it on a wrapper div instead or something.

I'll continue to tinker with it, but definitely a step in the right direction, thanks.

Sab669
Sep 24, 2009

So this is a really dumb question, I've got an Angular app that uses Bootstrap for most stuff. Using this for some tooltips in the app - https://ng-bootstrap.github.io/#/components/tooltip/api

Works flawlessly in 2 of my components, doesn't work at all in 2 other components. It's just a bunch of <input type="text" [(ngModel)]="model.someField" ngbTooltip="Whole numbers only">


Cannot figure out what might cause it to not render, can't find any real other examples of this happening on Google. No errors in my dev console when I mouse over the textboxes that aren't working.

I feel like I gotta be missing something dumb/obvious but there's nothing different in any of my .ts files, nothing stand out in the main app.module.ts or anything either.

Any ideas :confused:

Sab669
Sep 24, 2009

I'll update with some actual code later, sorry; SA is blocked at work so I was phone posting and now I have to go to a Happy Hour :( But none of the components have anything going on; there's just 1 import in the main app.module.ts then tagging that `ngbTooltip` attribute onto 45 different input controls across 4 components.

Sab669
Sep 24, 2009

MikeJF posted:

Are you importing the tooltip module into the containing module of each component?

Incidentally I don't seem to be importing it anywhere but the app.module.ts; not in the Components where it does work nor the ones where it doesn't.

code:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

...

@NgModule({
  declarations: [  
    ...
  ],
  imports: [
    ...
    NgbModule,
    ...
  ],
HTML / .ts from a working component-
code:
            <div class="card col-sm-2  cardbody">
                <input ngbTooltip="Numbers Only" type="text" [(ngModel)]="model.market_apartmentoccupancy_avgvacancy_market" (focus)="removePercent()" (blur)="addPercent()">
            </div> 


import { Component, Input, OnInit } from '@angular/core';
import * as ClassicEditor from '@employer-dev/ckeditor5--custom';
import { Subscription } from 'rxjs';
import { CustomUploadAdapter } from 'src/app/custom-upload-adapter';
import { ApartmentMarketModel } from 'src/app/shared/classes/ApplicationUiConfig';
import { AsrService } from 'src/app/shared/services/asr.service';
import { environment } from 'src/environments/environment';
Then one that doesn't work:
code:
        <td>
            <input ngbTooltip="Numbers Only" type="number" min="0" [(ngModel)]="propInfoModel.siteimprovements_number_buildings" />
        </td>

import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as ClassicEditor from '@employer-dev/ckeditor5--custom';
import { Subscription } from 'rxjs';
import { CustomUploadAdapter } from '../../custom-upload-adapter';
import {PropertyDetailsModel, PropertyInfoModel, PropertyInfoUtilModel, UnitMixModel } from '../../shared/classes/ApplicationUiConfig';
import { AsrService } from '../../shared/services/asr.service';
import { environment } from 'src/environments/environment';
Not sure if it's relevant to include any more of the HTML surrounding either, but I made sure to rip out the ghetto rear end Tables and replace them with divs / bootstrap columns, still misbehaves. Even if I copy paste the working one, strip out the model binding / events it doesn't appear on the other one.

Like I said, I gotta be missing something supremely dumb but I can't seem to spot it and have no ideas what to even look for. I did try adding `import { NgbModule } from '@ng-bootstrap/ng-bootstrap';` to each component of mine but that made no difference



Edit Seems like the wrong Import statement entirely, actually, should be `import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';` -- but once again how the fk is this working in some cases at all, then. And still broken elsewhere.

Sab669 fucked around with this message at 04:42 on Jun 7, 2023

Sab669
Sep 24, 2009

Correct, just the single app.module.ts with all my components in it.

And yea not it; like I said even if I copy one that is working to the component where it's not working [and strip out all the ngModel=... stuff] it still doesn't work in those components either lol.

Sab669
Sep 24, 2009

Motherfucker.... Apparently those tooltips don't work unless they're inside of a div or whatever with `class="card cardbody"` 😫

Sab669
Sep 24, 2009

Is there a better place to ask Dumb Angular Questions?

I have some function which uploads a file to my .NET API and either refreshes the page if the file is valid, or presents a list of errors if the file is invalid. For the latter, the C# code is just a simple:

return StatusCode(500, listOfErrors<T>);


My Angular function is basically just:

code:
foo(){
  this.uploadService.upload(file).subscribe(
  next: success => {
    //refresh the page
  },
  error: err => {
    //present the list of errors
  }
  ;)
}

upload(file: Blob): Observable<string>
{
  //creatiion of some objects
  return this.http.post<string>(apiUrl, formData, HeaderObject).pipe(catchError(this.handleError<string>('File Upload')));
}
But despite the API returning a 500 error, the code still steps into the "next" block. I feel like I've gotta be missing something absolutely stupid but I cannot seem to figure it out today :sigh: Any ideas?

Sab669 fucked around with this message at 21:10 on Mar 25, 2024

Sab669
Sep 24, 2009

Ugh, yea, honestly this place seems to decorate drat near all of their functions with that so tbh I thought it was just boilerplate Angular stuff (I still consider myself quite new to it) but digging into it, clearly not - if I just delete that whole .pipe(...) now it works exactly as it should :downs: Thanks lol.

Adbot
ADBOT LOVES YOU

Sab669
Sep 24, 2009

Yea you're probably right that 500 doesn't make the most sense. Was very much just a, "Copying the way these other endpoints do it" internally consistent jobs.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply