CODEWITHSUNDEEP
htmlcss
user11698627
user11698627

Reputation:

How to make my options go to the very right of my question?

So far, I have determined that to keep my options (the rectangles with color) to the very right, I have to have my text fill up a whole line if not more.

In my form, the different topic questions are separated into tables as shown in the code below. For some of the tables, the options go to the very right since the questions take up the whole line, but for other tables, the questions are too short so the options don't reach the far right.

To address the problem, I have tried to put in filler white space or even text whose visibility is none, but everytime, for the options to be to the very right (as I want it to be), the text has to go onto the next line.

td:first-child {
   width:85%;
}

input[type=radio]{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

.yesImage, .noImage {
    background-color:navajowhite;
}

input[type=radio]:checked + .yesImage {
    background-color:black;
}

input[type=radio]:checked + .noImage {
    background-color:black;
}

.optionImage {
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    height:35px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

.yesImage, .noImage {
    width:50px;
}
<!DOCTYPE html>
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <form>
            <fieldset>
                <table>
                    <tr>
                        <td>
                            <p class="questions" id="question1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        <td>
                            <input type="radio" name="question1" id="yes1" value="yes"><label class="yesImage optionImage" for="yes1">
                            </label>
                            <input type="radio" name="question1" id="no1" value="no"><label class="noImage optionImage" for="no1">
                            </label>
                        </td>
                    </tr>
                    <tr>
                       <td> 
                            <p class="questions" id="question2"> Lorem ipsum. (Question 2) </p>
                        </td>
                        <td>
                            <input type="radio" name="question2" id="yes2" value="yes"><label class="yesImage optionImage" for="yes2">
                            </label>
                            <input type="radio" name="question2" id="no2" value="no"><label class="noImage optionImage" for="no2">
                            </label>
                        </td>
                    </tr>
                </table>

                <table>
                        <tr>
                            <td>
                                <p class="questions" id="question3"> Lorem ipsum. (Question 3) </p>
                            </td>
                            <td>
                                <input type="radio" name="question3" id="yes3" value="yes"><label class="yesImage optionImage" for="yes3">
                                </label>
                                <input type="radio" name="question3" id="no3" value="no"><label class="noImage optionImage" for="no3">
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p class="questions" id="question4"> Lorem ipsum. (Question 4) </p>
                            </td>
                            <td>
                                <input type="radio" name="question4" id="yes4" value="yes"><label class="yesImage optionImage" for="yes4">
                                </label>
                                <input type="radio" name="question4" id="no4" value="no"><label class="noImage optionImage" for="no4">
                                </label>
                            </td>
                        </tr>
                </table>

            <table>
                    <tr>
                        <td>
                            <p class="questions" id="question5"> Lorem ipsum. (Question 5)<span id="whitespace"> filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text</span> </p>
                        </td>
                        <td>
                            <input type="radio" name="question5" id="yes5" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes5">
                            </label>
                            <input type="radio" name="question5" id="no5" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no5">
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p class="questions" id="question4"> Lorem ipsum. (Question 6) </p>
                        </td>
                        <td>
                            <input type="radio" name="question6" id="yes6" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes6">
                            </label>
                            <input type="radio" name="question6" id="no6" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no6">
                            </label>
                        </td>
                    </tr>
            </table>
           </fieldset>
        </form>
    </body>
</html>

[Please keep in mind this is an example of my problem.]

Please go full page when using the snippet so my problem can be seen more easily.

This is what I want (without the extra lines between the questions): enter image description here

Upvotes: 1

Views: 78

Answers (2)

Prasad Gayan
Prasad Gayan

Reputation: 1712

just try above make the tales with width 100%.

table{
 width: 100% !important;
}

Upvotes: 0

Showrin Barua
Showrin Barua

Reputation: 1795

Here's the solution of your problem. I added some properties in my css in the solution and marked these by comments. Hope it will help you.

table { /*Add this block in your css*/
   width: 100%; /*Newly Added*/
}

td:first-child {
   width:85%;
}

td:nth-child(2) { /*Newly Added*/
   width:15%; /*Newly Added*/
}

input[type=radio]{
   -webkit-appearance:none;
   -moz-appearance:none;
   appearance:none;
   display: none; /*Newly Added*/
}
 
.yesImage, .noImage {
   width: 30% !important; /*Newly Added*/
   margin-right: 5%; /*Newly Added*/
   background-color:navajowhite;
}

input[type=radio]:checked + .yesImage {
    background-color:black;
}

input[type=radio]:checked + .noImage {
    background-color:black;
}

.optionImage {
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    height:35px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

.yesImage, .noImage {
    width:50px;
}
<!DOCTYPE html>
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <form>
            <fieldset>
                <table>
                    <tr>
                        <td>
                            <p class="questions" id="question1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        <td>
                            <input type="radio" name="question1" id="yes1" value="yes"><label class="yesImage optionImage" for="yes1">
                            </label>
                            <input type="radio" name="question1" id="no1" value="no"><label class="noImage optionImage" for="no1">
                            </label>
                        </td>
                    </tr>
                    <tr>
                       <td> 
                            <p class="questions" id="question2"> Lorem ipsum. (Question 2) </p>
                        </td>
                        <td>
                            <input type="radio" name="question2" id="yes2" value="yes"><label class="yesImage optionImage" for="yes2">
                            </label>
                            <input type="radio" name="question2" id="no2" value="no"><label class="noImage optionImage" for="no2">
                            </label>
                        </td>
                    </tr>
                </table>

                <table>
                        <tr>
                            <td>
                                <p class="questions" id="question3"> Lorem ipsum. (Question 3) </p>
                            </td>
                            <td>
                                <input type="radio" name="question3" id="yes3" value="yes"><label class="yesImage optionImage" for="yes3">
                                </label>
                                <input type="radio" name="question3" id="no3" value="no"><label class="noImage optionImage" for="no3">
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p class="questions" id="question4"> Lorem ipsum. (Question 4) </p>
                            </td>
                            <td>
                                <input type="radio" name="question4" id="yes4" value="yes"><label class="yesImage optionImage" for="yes4">
                                </label>
                                <input type="radio" name="question4" id="no4" value="no"><label class="noImage optionImage" for="no4">
                                </label>
                            </td>
                        </tr>
                </table>

            <table>
                    <tr>
                        <td>
                            <p class="questions" id="question5"> Lorem ipsum. (Question 5)<span id="whitespace"> filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text</span> </p>
                        </td>
                        <td>
                            <input type="radio" name="question5" id="yes5" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes5">
                            </label>
                            <input type="radio" name="question5" id="no5" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no5">
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p class="questions" id="question4"> Lorem ipsum. (Question 6) </p>
                        </td>
                        <td>
                            <input type="radio" name="question6" id="yes6" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes6">
                            </label>
                            <input type="radio" name="question6" id="no6" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no6">
                            </label>
                        </td>
                    </tr>
            </table>
           </fieldset>
        </form>
    </body>
</html>

Upvotes: 2

Related Questions