locked
How to put div? RRS feed

  • Question

  • User-1104215994 posted

    Hello guys,

    I would like to add a div like this one (Planogram Results) to my page (right to jumbotron) in order to insert some data. Would you please help me?

    My page:

    @model PlanogramWebApp.Models.ImageVm
    @{
        ViewBag.Title = "Index";
    }
    
    <div class="jumbotron">
        <div class="row">
            <div class="col-md-5">
                <h3>Upload Image</h3>
                <form action="/Home/Index" method="post" enctype="multipart/form-data">
                    <fieldset>
    
                        <input type="file" name="Image" id="select_id" />
                        <br />
                        <br />
                        <input class="btn btn-primary btn-lg" type="submit" value="Upload &raquo;" id="upload_id" />
    
                    </fieldset>
                </form>
            </div>
            <div class="col-md-5">
                @if (Model.ImageUrl != "")
                {
                    <div>
                        <img src="@Model.ImageUrl" alt="image" height="400" />
                        <br />
                        <br />
    
                        <a href="@Url.Action("Analyze", "Home")?image=@Model.ImageUrl" class="btn btn-primary btn-lg" id="analyze_id">Analyze &raquo;</a>
                        <div>@Model.ImageUrl</div>
                    </div>
                }
    
            </div>
        </div>
    </div>

    Here is how I want, Results div on the right as in the image.

    Results

    Best Regards.

    Sunday, January 6, 2019 9:44 AM

Answers

  • User-1104215994 posted

    Hi Nan Yu,

    I did it this way, thanks for your reply.

    <div class="row">
        <div class="jumbotron col-sm-10">
            <div class="row">
                <div class="col-md-5">
                    <h3>Upload Image</h3>
                    <form action="/Home/Index" method="post" enctype="multipart/form-data">
                        <fieldset>
    
                            <input type="file" name="Image" id="select_id" />
                            <br />
                            <br />
                            <input class="btn btn-primary btn-lg" type="submit" value="Upload &raquo;" id="upload_id" />
    
                        </fieldset>
                    </form>
                </div>
                <div class="col-md-5">
                    @if (Model.ImageUrl != "")
                    {
                        <div>
                            <img src="@Model.ImageUrl" alt="image" height="400" />
                            <br />
                            <br />
    
                            <a href="@Url.Action("Analyze", "Home")?image=@Model.ImageUrl" class="btn btn-primary btn-lg" id="analyze_id">Analyze &raquo;</a>
                            @*<div>@Model.ImageUrl</div>*@
                        </div>
                    }
    
                </div>
            </div>
    
        </div>
        <div class="col-sm-2 c217">
            <h3>Results</h3>
        </div>
    </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 7, 2019 9:48 AM

All replies

  • User-1104215994 posted

    I put the code below but it is displayed below not the on the right side of my page.

    <div class="col-md-1">
        <h3>Results</h3>
        <div>
        </div>
    </div>

    Monday, January 7, 2019 6:05 AM
  • User1724605321 posted

    Hi cenk1536 ,

    Do you want to show div content on an image ? You can try something like :

    <div class="divination">
        <div class="col-md-1" style="margin-left:100px">
            <h3>Results</h3>
            <div>
            </div>
        </div>
    </div>

    Css :

        <style>
            .divination {
                height: 50px;
                display: table-cell;
                vertical-align: middle;
                background-image: url(../Capture.png);
                width:400px        
            }
        </style>

    The image would be background image of div , and you can adjust the div content use margin css attribute . You can set the background image dynamically use javascript .

    If i misunderstand your requirement , please feel free to let me know .

    Best Regards,

    Nan Yu

    Monday, January 7, 2019 8:17 AM
  • User-1104215994 posted

    Hi Nan Yu,

    I did it this way, thanks for your reply.

    <div class="row">
        <div class="jumbotron col-sm-10">
            <div class="row">
                <div class="col-md-5">
                    <h3>Upload Image</h3>
                    <form action="/Home/Index" method="post" enctype="multipart/form-data">
                        <fieldset>
    
                            <input type="file" name="Image" id="select_id" />
                            <br />
                            <br />
                            <input class="btn btn-primary btn-lg" type="submit" value="Upload &raquo;" id="upload_id" />
    
                        </fieldset>
                    </form>
                </div>
                <div class="col-md-5">
                    @if (Model.ImageUrl != "")
                    {
                        <div>
                            <img src="@Model.ImageUrl" alt="image" height="400" />
                            <br />
                            <br />
    
                            <a href="@Url.Action("Analyze", "Home")?image=@Model.ImageUrl" class="btn btn-primary btn-lg" id="analyze_id">Analyze &raquo;</a>
                            @*<div>@Model.ImageUrl</div>*@
                        </div>
                    }
    
                </div>
            </div>
    
        </div>
        <div class="col-sm-2 c217">
            <h3>Results</h3>
        </div>
    </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 7, 2019 9:48 AM