CODEWITHSUNDEEP
htmlcss
Bobby Axe
Bobby Axe

Reputation: 1525

Align the text inside a drop down menu

I am trying to align the text inside a drop down menu in a table cell with other text contents in adjacent table cells.

Here is my code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <style type="text/css">
            .mimicTable{
                display: table;
                border-spacing: 1em;
            }
            .mimicRow{
                display: table-row;
            }
            .mimicCell{
                display: table-cell;
            }
            .mimicRadio{
                background-color: inherit;
                color: inherit;
                width: initial !important;
                padding: 0em !important;
                text-align: left !important;
                text-indent: 0px;
                cursor: pointer;
            }
            .mimicRadio option{
                background-color: grey !important;
                border-color: grey !important;
            }
        </style>
        <main class="form">
            <form action="" method="POST">
                <center><p class="whiteGrey font35"> Enter Buying Rate </p></center>
                <br><br>
                <div class="mimicTable">
                    <div class="mimicRow">
                        <div class="mimicCell">Coin Type :</div> 
                        <div class="mimicCell">
                            <select name='coin_type'>
                                <option value="Select_Coin">Select Coin</option>
                                <?php
                                    foreach ($_SESSION['biscuits']['coin_list'] as $coin)
                                    {
                                        echo "<option value='".$coin."'>".$coin."</option>";
                                    }
                                ?>
                            </select>
                        </div>
                    </div>

                    <div class="mimicRow">
                        <div class="mimicCell">
                            <select class="mimicRadio" name="buy_type">
                                <option value="coin_buy">Coins</option>
                                <option value="currency_buy">Currency ($)</option>
                            </select>
                        </div>
                        <div class="mimicCell"><input type="text" class="mimicRadioValue" required pattern="[0-9.]{1,}" name="buy_type_value" placeholder="Quantity to buy in Coins"></input></div>
                    </div>

                    <div class="mimicRow">
                        <div class="mimicCell">Buying Rate ($) :</div>
                        <div class="mimicCell"><input type="text" pattern="[0-9]{1,}" name="buy_rate" placeholder="Buying rate / USD ($)"></input></div>
                    </div>

                    <div class="mimicRow">
                        <div class="mimicCell">Extra Message :</div>
                        <div class="mimicCell"><textarea name="espec" pattern="[a-zA-Z0-9 ._$@#₦]{0,100}" maxlength="100" placeholder="Optional Message"></textarea></div>
                    </div>
                </div>
                <input type="submit" class="glassButton" name="buy" value="Buy"></input>
            </form>
        </main> 
    </body>
    </html>

Here is an image description:

current state and expected out come

In case your wondering this is only a minimal verifiable code/example in the complete css they are no borders or box lines round the drop down menu.

I have tried a lot of tricks with css and JavaScript's to manipulate the Dom and archive desired outcome but it seems that am still missing something.

Any help or suggestions are welcomed.

Upvotes: 0

Views: 77

Answers (2)

Ari Patwary
Ari Patwary

Reputation: 80

This question was answered in another question.

remove space in select box

Text Padding in Select Boxes

In both conclusions they really suggest that you shouldn't do it. Its browser specified.

Upvotes: 0

justDan
justDan

Reputation: 2333

You can bump that select element over using margin. Try this. I just set margin: 0 0 0 -10px;.

.mimicTable{
    display: table;
    border-spacing: 1em;
}
.mimicRow{
    display: table-row;
}
.mimicCell{
    display: table-cell;
}
.mimicRadio{
    background-color: inherit;
    color: inherit;
    width: initial !important;
    padding: 0em !important;
    text-align: left !important;
    text-indent: 0px;
    cursor: pointer;
    margin: 0 0 0 -10px;
}
.mimicRadio option{
    background-color: grey !important;
    border-color: grey !important;
}
<main class="form">
            <form action="" method="POST">
                <center><p class="whiteGrey font35"> Enter Buying Rate </p></center>
                <br><br>
                <div class="mimicTable">
                    <div class="mimicRow">
                        <div class="mimicCell">Coin Type :</div> 
                        <div class="mimicCell">
                            <select name='coin_type'>
                                <option value="Select_Coin">Select Coin</option>
                                <?php
                                    foreach ($_SESSION['biscuits']['coin_list'] as $coin)
                                    {
                                        echo "<option value='".$coin."'>".$coin."</option>";
                                    }
                                ?>
                            </select>
                        </div>
                    </div>

                    <div class="mimicRow">
                        <div class="mimicCell">
                            <select class="mimicRadio" name="buy_type">
                                <option value="coin_buy">Coins</option>
                                <option value="currency_buy">Currency ($)</option>
                                <option value="">Another option</option>
                            </select>
                        </div>
                        <div class="mimicCell"><input type="text" class="mimicRadioValue" required pattern="[0-9.]{1,}" name="buy_type_value" placeholder="Quantity to buy in Coins"></input></div>
                    </div>

                    <div class="mimicRow">
                        <div class="mimicCell">Buying Rate ($) :</div>
                        <div class="mimicCell"><input type="text" pattern="[0-9]{1,}" name="buy_rate" placeholder="Buying rate / USD ($)"></input></div>
                    </div>

                    <div class="mimicRow">
                        <div class="mimicCell">Extra Message :</div>
                        <div class="mimicCell"><textarea name="espec" pattern="[a-zA-Z0-9 ._$@#₦]{0,100}" maxlength="100" placeholder="Optional Message"></textarea></div>
                    </div>
                </div>
                <input type="submit" class="glassButton" name="buy" value="Buy"></input>
            </form>
        </main>

Upvotes: 1

Related Questions