none
CSS Höhe/Breite wird nicht richtig dargestellt RRS feed

  • Frage

  • Hallo

    Ich habe ein Design Technisches Problem mit CSS

    In der App.Razor wird als Default Route "MainLayout" aufgerufen.

    Diese sieht so aus:

    @inherits LayoutComponentBase
    
    <div  class="main">
        <AuthorizeView>
                <Authorized>
                    <MySoftware.Pages.Main.Menu />
                </Authorized>
                <NotAuthorized>
                    <MySoftware.Pages.Login.Login/>
                </NotAuthorized>
            </AuthorizeView>
        <AuthorizeView />
    
    </div>

    Da ich nicht authorisiert bin, werde ich folgerichtig and die Seite Login weitergeleitet.

    Diese sieht wie folgt aus:

    @inherits LayoutComponentBase
    @layout CenteredCardLayout
    
    @page "/"
    
    <div class="container">
        <div class="col-12">
            <EditForm Model=@Company OnValidSubmit="@SubmitValidForm">
                <div>
                    <br /><br />
                </div>
                <div>
                    <h3 style="font-weight:bold; color:teal">@myLocalizer.SoftwareName</h3>
                </div>
                <div>
                    <br />
                </div>
                <div class="row material2" style="margin:auto">
                    <ISTextBox @bind-Value="@Company.TableName" Placeholder="@myLocalizer.CompanyName" />
                </div>
                <br />
                <div class=" row material2" style="margin:auto">
                    <ISTextBox @bind-Value="@Company.CompanyEmailAddress" Placeholder="@myLocalizer.Email" />
                    </div>
                <br />
                <div class="row material2" style="margin:auto">
                    <ISTextBox @bind-Value="@Company.Password" Placeholder="@myLocalizer.Password" />
                    </div>
                <br />
                <div class="flex-column" style="margin:auto">
                    <div class="d-flex justify-content-around">
    
                        <Button Type="submit" Content="@LoginButtonContent" IsPrimary="true" />
                        <Button Content="@SignInButtonContent" IsPrimary="false" />
    
                    </div>
                </div>
                <label>@Message</label>
            </EditForm>
        </div>
    </div>
    

    & die Vorlage: CenteredCardLayout, die aufgerufen wird:

    @inherits LayoutComponentBase
    
        <form autocomplete="off">
            <div class="container col-12">
                
                <div class="row">
                    <div class="col-6 align-self-center">
                        <div class="card card-body">Center</div>
                    </div>
                    <div class="col-6">
                        <div class="card card-body">
                            @Body
                        </div>
                    </div>
                </div>
            </div>
        </form>
    

    Eigentlich sollte jetzt, das Design so aussehen, dass auf der linken Seite "Centered" steht & rechts die login Daten.

    Bei mir sieht das aber so aus:

    Kann mir bitte jemand sagen, was ich falsch mache, dass das Design nicht über den gesamten Schirm geht?

    DANKE

    Donnerstag, 4. Juni 2020 08:50

Antworten

  • Hallo!

    Endlich gefunden...

    Es war/ist das Form Tag

    <form autocomplete="off">

    dort musste ich noch die class "w-100" angeben. Jetzt geht es

    DANKE

    • Als Antwort markiert Zero-G. _ Donnerstag, 4. Juni 2020 10:12
    Donnerstag, 4. Juni 2020 10:12