Share via

Textboxes distorted presumably because of Bootstrap issues

Kalyan A 440 Reputation points
2024-12-01T16:00:38.65+00:00 
<h3>ParNonParallel</h3>
@inject NavigationManager Navigation
@page "/AnglesTriangles/ParNonParallel"
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallel Lines with Transversals</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
 
        
        .container {
            position: relative;
            width: 1000px;
            height: 600px;
            border: 1px solid #000;
        }
        .line {
            position: absolute;
            width: 800px;
            height: 2px;
            background-color: black;
        }
        /* Parallel Lines */
        .parallel-line-1 {
            top: 30%;
            left: 20%;
        }
        .parallel-line-2 {
            top: 40%;
            left: 20%;
        }
        /* Transversals */
        .transversal-line-1 {
            position: absolute;
            width: 2px;
            height: 500px;
            background-color: black;
            transform: rotate(40deg);
            top:5%;
            left: 30%;
        }
        .transversal-line-2 {
            position: absolute;
            width: 2px;
            height: 500px;
            background-color: black;
            transform: rotate(120deg);
            top: 5%;
            left: 50%;
        }
       /* Textboxes */
        .textbox {
            position: absolute;
            width: 40px;
            height: 30px;
            padding: 5px;
           
            border: 1px solid #000;
            box-sizing: border-box;
        }
        /* Exterior textboxes */
        .textbox-value1 {
            top: 31%;
            left:30%;
        }
        .textbox-value2 {
            top: 31%;
            left: 49%;
        }
 .textbox-valuey {
            top: 25%;
            left: 27%;
        }
 .textbox-valuex {
            top: 31%;
            left: 55%;
        }
 .textbox-valuep {
            top: 36%;
            left:50%;
        }
 .textbox-valueq {
            top: 42%;
            left:55%;
        }
       
 .textbox-valuez {
            top: 42%;
            left: 20%;
        }
    </style>
</head>
<body>
    <!-- Parallel lines -->
    <div class="line parallel-line-1"></div>
    <div class="line parallel-line-2"></div>
    
    <!-- Transversals -->
    <div class="line transversal-line-1"></div>
    <div class="line transversal-line-2"></div>
       <input class="textbox textbox-value1" type="text" placeholder="Value1" @bind="@num1" disabled=@isdisabled >
 <input class="textbox textbox-value2" type="text" placeholder="Value2"   @bind="@num2" disabled=@isdisabled >
<input class="textbox textbox-valuey" type="text" placeholder="Valuey"   disabled=true  @bind="@numy" >
<input class="textbox textbox-valuex" type="text" placeholder="Valuex"   disabled=true  @bind="@numx" >
<input class="textbox textbox-valuep" type="text" placeholder="Valuep"   disabled=true   @bind="@nump" >
    <input class="textbox textbox-valueq" type="text" placeholder="Valueq" disabled=true @bind="@numq">
    <input class="textbox textbox-valuez" type="text" placeholder="Valuez" disabled=true @bind="@numz">
<br />
<div>
    <button @onclick="Submit">Submit</button>
</div>
<br />
<div>
    <button @onclick="Clear">Clear</button>
</div>
<br>
</body>
@code {
    private int num1; private int num2; private bool isdisabled = false; private int errcount = 0; private string errmsg; private int numx; private int numy; private int nump; private int numq; private int numz;
    private void Submit()
    {
        if ((num1 <= 0))
        { errmsg = "Enter positive numbers "; errcount++; }
        if ((num1 > 179))
        { errmsg = "Enter angle less than 179 "; errcount++; }
        if ((num2 <= 0))
        { errmsg = "Enter positive numbers "; errcount++; }
        if ((num2 > 179))
        { errmsg = "Enter angle less than 179 "; errcount++; }
        if(errcount==0)
        {
            numy = num1;
            numx = 180 - num2;
            numq = num2;
            nump = 180 - numq;numz = 180 - numy;
        }
    }
    void Clear()
    { num1 = 0; num2 = 0; numx = 0; numy = 0; nump = 0; numq = 0;numy = 0; isdisabled = false; errcount = 0; errmsg = ""; }
}

Here is the script file from

index.html

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>

Here the correct and expected image.

correctimg.PNG

When I minimize the textboxes are distorted

incorrectimg.PNG

This code is from Maui Blazor on Windows Store App.

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,667 questions
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
4,042 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Kalyan A 440 Reputation points
    2024-12-02T11:50:57.3033333+00:00

    I placed it in a container and issue is now resolved

    <h3>ParNonParallel</h3>
@inject NavigationManager Navigation
@page "/AnglesTriangles/ParNonParallel"
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallel Lines with Transversals</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
 
        
        .container {
            position: relative;
            width: 1200px;
            height: 600px;
            border: 1px solid #000;
        }
        .line {
            position: absolute;
            width: 1000px;
            height:2px;
            background-color: black;
        }
        /* Parallel Lines */
        .parallel-line-1 {
            top: 130px;
        }
        .parallel-line-2 {
            top: 310px;
        }
        /* Transversals */
        .transversal-line-1 {
            position: absolute;
            top: 10px;
            left: 450px;
            width: 2px;
            height: 500px;
            background-color: blue
            ;
            transform: rotate(40deg);
            
        }
        .transversal-line-2 {
            position: absolute;
            width: 2px;
            height: 500px;
            background-color: blue;
            transform: rotate(120deg);
            top: 1px;
            left: 900px;
            
        }
       /* Textboxes */
        .textbox {
            position: absolute;
            width: 40px;
            height: 30px;
            padding: 5px;
           
            border: 1px solid green;
            box-sizing: border-box;
        }
        /* Exterior textboxes */
        .textbox-value1 {
            top: 140px;
            left:550px;
        }
        .textbox-value2 {
            top: 140px;
            left: 650px;
        }
 .textbox-valuey {
            top: 100px;
            left: 450px;
        }
 .textbox-valuex {
            top: 140px;
            left: 800px;
        }
 .textbox-valuep {
            top: 280px;
            left: 900px;
        }
 .textbox-valueq {
            top: 320px;
            left: 950px;
        }
       
 .textbox-valuez {
            top: 320px;
            left: 320px;
        }
    </style>
</head>
<body>
       <div class="container">
    <!-- Parallel lines -->
    <div class="line parallel-line-1"></div>
    <div class="line parallel-line-2"></div>
    
    <!-- Transversals -->
    <div class="line transversal-line-1"></div>
    <div class="line transversal-line-2"></div>
       <input class="textbox textbox-value1" type="text" placeholder="Value1" @bind="@num1" disabled=@isdisabled >
 <input class="textbox textbox-value2" type="text" placeholder="Value2"   @bind="@num2" disabled=@isdisabled >
<input class="textbox textbox-valuey" type="text" placeholder="Valuey"   disabled=true  @bind="@numy" >
<input class="textbox textbox-valuex" type="text" placeholder="Valuex"   disabled=true  @bind="@numx" >
<input class="textbox textbox-valuep" type="text" placeholder="Valuep"   disabled=true   @bind="@nump" >
    <input class="textbox textbox-valueq" type="text" placeholder="Valueq" disabled=true @bind="@numq">
    <input class="textbox textbox-valuez" type="text" placeholder="Valuez" disabled=true @bind="@numz">
 </div>
<br />
<div>
    <button @onclick="Submit">Submit</button>
</div>
<br />
<div>
    <button @onclick="Clear">Clear</button>
</div>
<br>
</body>
@code {
    private int num1; private int num2; private bool isdisabled = false; private int errcount = 0; private string errmsg; private int numx; private int numy; private int nump; private int numq; private int numz;
    private void Submit()
    {
        if ((num1 <= 0))
        { errmsg = "Enter positive numbers "; errcount++; }
        if ((num1 > 179))
        { errmsg = "Enter angle less than 179 "; errcount++; }
        if ((num2 <= 0))
        { errmsg = "Enter positive numbers "; errcount++; }
        if ((num2 > 179))
        { errmsg = "Enter angle less than 179 "; errcount++; }
        if(errcount==0)
        {
            numy = num1;
            numx = 180 - num2;
            numq = num2;
            nump = 180 - numq;numz = 180 - numy;
        }
    }
    void Clear()
    { num1 = 0; num2 = 0; numx = 0; numy = 0; nump = 0; numq = 0;numy = 0; isdisabled = false; errcount = 0; errmsg = ""; }
}
    1 person found this answer helpful.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.