Share via

Bootstrap Issues Blazor.

Kalyan A 325 Reputation points
2024-11-20T07:45:32.85+00:00

I have two issues with this code

a)The placeholders in the textboxes are not being displayed.

b)A distortion appears in Samsung Galaxy (Android) but not on Windows, I included Bootstrap but still it doesn't work. Here is the reference from Index.html

<script src="js/bootstrap.bundle.min.js"></script>

@inject NavigationManager Navigation
@page "/ExtPar"
<head>
   
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .parallelogram-container {
            position: relative;
            width: 300px;
            height: 200px;
            background: lightblue;
            transform: skew(-20deg); /* Creating the parallelogram shape */
            margin: 50px;
        }
        /* Green line parallel to one red border */
        .red-line {
            position: absolute;
            width: 360px; /* Same width as the parallelogram side */
            height: 2px;
            background-color: red;
            top: 0px; /* Positioned on the top red border */
            left: 40px; /* Same horizontal position as the left red border */
        }
        .textbox {
            position: absolute;
            width: 80px;
            height: 30px;
            padding: 5px;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        .textboxo {
            position: absolute;
            width: 120px;
            height: 30px;
        }
        .textbox1 {
            top: 10px;
            left: 10px;
        }
        .textbox2 {
            top: 10px;
            right: 10px;
        }
        .textbox3 {
            bottom: 10px;
            left: 10px;
        }
        .textbox4 {
            bottom: 10px;
            right: 10px;
        }
        .textbox5 {
            top: 10px;
            right: -90px;
        }
    </style>
</head>
<body>
   
    <div class="parallelogram-container">
        <div class="red-line"></div>
        <input type="text" class="textbox textbox1" placeholder="Interior 1" disabled=@isdisabled @bind="@num1">
        <input type="text" class="textbox textbox2" placeholder="Interior 2" disabled=true @bind="@num2">
        <input type="text" class="textbox textbox3" placeholder="Interior 3" disabled=true @bind="@num3">
        <input type="text" class="textbox textbox4" placeholder="Interior 4" disabled=true @bind="@num4">
        <input type="text" class="textbox textbox5" placeholder="Exterior 5" disabled=true @bind="@num5">
    </div>
    <br />
    <span>Parallelogram </span>
    <br />
    <div>
        <button @onclick="Submit">Submit</button>
    </div>
    <br />
    <div>
        <button @onclick="Clear">Clear</button>
    </div>
    <br />
    <p style="color: red;">
        @errmsg
    </p>
</body>
 
<br />
<br />
<br>
@code {
    private int num1; private int num2; private int num3; private int num4; private int num5; private bool isdisabled = false; private int errcount = 0; private string errmsg;
    private void Submit()
    {
        errcount=0; errmsg = "";
        if ((num1 > 0)  )
        { isdisabled = true; }
        if ((num1 <= 0)  )
        { errmsg = "Enter positive numbers "; errcount++; }
        if ((num1 > 179) )
        { errmsg = "Enter angle less than 179 "; errcount++; }
 
        if (errcount == 0)
        {
            num5 =  num1;
            num2 = 180 - num5;
            num3 = num2;
            num4 = num1;
        }
        else
        { isdisabled = false; }
    }
    void Clear()
    { num1 = 0; num2 = 0; num3 = 0; num4 = 0; num5 = 0; isdisabled = false; errcount = 0; errmsg = ""; }
}
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,602 questions
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,650 questions
0 comments
Accepted answer
  1. Jalpa Panchal-MSFT 555 Reputation points Microsoft Vendor
    2024-11-20T12:49:57.7533333+00:00

    Hi @Kalyan A ,

    In your code you have set the @bind directive, which is bound to the int num1, num2 etc. and because of that 0 is being displayed. So, to make the placeholder visible change the datatype from int to string.

    You could try this code:

    Parallelogram.razor:

    @page "/parallelogram"
@inject NavigationManager Navigation
<div class="parallelogram-page">
    <div class="parallelogram-wrapper">
        <div class="parallelogram-container">
            <div class="red-line"></div>
            <input type="text" class="textbox textbox1" placeholder="Interior 1" @bind="@num1">
            <input type="text" class="textbox textbox2" placeholder="Interior 2" @bind="@num2">
            <input type="text" class="textbox textbox3" placeholder="Interior 3" @bind="@num3">
            <input type="text" class="textbox textbox4" placeholder="Interior 4" @bind="@num4">
            <input type="text" class="textbox textbox5" placeholder="Exterior 5" @bind="@num5">
        </div>
        <div class="btn-container">
            <button class="btn btn-primary" @onclick="Submit">Submit</button>
            <button class="btn btn-secondary" @onclick="Clear">Clear</button>
        </div>
        <p style="color: red;">@errorMessage</p>
    </div>
</div>
<style>
    .parallelogram-page {
        width: 100%;
        height: 100%;
    }
    .parallelogram-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
    }
    .parallelogram-container {
        position: relative;
        width: 300px;
        height: 200px;
        background: lightblue;
        transform: skew(-20deg);
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .red-line {
        position: absolute;
        width: 360px;
        height: 3px;
        background-color: red;
        top: 0;
        left: 40px;
    }
    input::placeholder {
        color: brown; /* Placeholder text color */
        font-style: italic; /* Optional styling */
        opacity: 1; /* Ensure full visibility */
    }
    .textbox {
        position: absolute;
        width: 80px;
        height: 30px;
        padding: 5px;
        border: 1px solid #000;
        box-sizing: border-box;
        text-align: center;
        background-color: #fff;
        font-size: 0.9rem;
    }
    .textbox1 {
        top: 10px;
        left: 10px;
    }
    .textbox2 {
        top: 10px;
        right: 10px;
    }
    .textbox3 {
        bottom: 10px;
        left: 10px;
    }
    .textbox4 {
        bottom: 10px;
        right: 10px;
    }
    .textbox5 {
        position: absolute;
        top: 50%; /* Adjusted to center vertically */
        right: 10px; /* Adjusted to ensure visibility */
        transform: translateY(-50%); /* Center alignment */
    }
    .btn-container {
        margin-top: 20px;
    }
    button {
        margin: 5px;
        padding: 10px 15px;
        font-size: 1rem;
        cursor: pointer;
    }
</style>
@code {
    private string? num1;
    private string? num2;
    private string? num3;
    private string? num4;
    private string? num5;
    private bool isDisabled = false;
    private string errorMessage;
    private void Submit()
    {
        errorMessage = string.Empty;
        // Validation: Check if the values are valid integers and within the correct range
        if (!int.TryParse(num1, out var num1Value) || num1Value <= 0 || num1Value >= 179)
        {
            errorMessage = "Enter a valid number between 1 and 178 for Interior 1.";
            return;
        }
        isDisabled = true;
        // Assign calculated values
        num5 = num1Value.ToString();
        num2 = (180 - num1Value).ToString();
        num3 = num2;
        num4 = num1Value.ToString();
    }
    private void Clear()
    {
        num1 = num2 = num3 = num4 = num5 = null;
        isDisabled = false;
        errorMessage = string.Empty;
    }
}

    index.html:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Parallelogram Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div id="app">Loading...</div>
</body>
</html>

    User's image

    Best Regards,

    Jalpa

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

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.