Click here to Skip to main content
15,920,217 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Pretty much sums it up, here is my JSfiddle with my code
Edit fiddle - JSFiddle[^]

What my aim is, is to have the blue button be the same line as the text box, and also the textbox to not have as much width. Ideally it will only need 4 characters in it.

What I have tried:

I've tried adjusting all the parements but still cant get it working
Posted
Updated 31-May-16 23:02pm
v2

1 solution

Please try below:

// For making the blue button aligned with text box

// added this block
.addticket li:first-child {
    padding: 9px;  
}

// From this block, removed padding: 9px;  
.addticket li{
    display: inline-block;
    border:1px solid #DDDDDD;
    border-radius: 3px;
}

.addticket li:last-child{
    border: none;
    margin-bottom: 0px;
    text-align: center;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px; 
    height: 92px;
    padding: 9px 0;   // Added this line
}


// For making the textbox of less width
// You can add pixles instead of % for the below changed width
.addticket input,
.addticket textarea,
.addticket select 
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 20%;                    // changed this line from 100% to 20%
    display: block;
    outline: none;
    border: none;
    height: 92px;
    line-height: 25px;
    font-size: 40px;
    padding: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
}

// Changed this line in the HTML to make constraint to take 4 chars only
// Added maxlength attribute.
<input type="text" name="tableNameEditor" id="tableNameEditor" maxlength="4">

</input>


Hope this helps you :).
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900