Support » Fixing WordPress » Input Field and Button Spacing problems

  • I have been tinkering with the search box on this site for some time now, but the input fields and buttons of my search form will not stay on the same line. The only time they do stay on the same line, is if I drastically alter the width of both the input field and the button, but not at the percentages that they should be. I have tried placing the input field as 80% and the button as 20%, but the only time it works is if the button is 10%. This should not be. Can anyone see what the issue might be? Thanks in advance. Below is the relevant code

    CSS

    input[id=t] {
    	margin: 0; 
    	padding: 0; 
    	position: relative; 
    	width: 88%;
    	height: 100%;
    	display: flex;
    }
    #searchpackage {
    	background: none; 
    	width: 47%; 
    	height: 100%; 
    	margin-left: 2%; 
    	margin-top: 5%;
    	display: inline-block;
    }
    
    #thrmenu {
    	background: none; 
    	height: 100%; 
    	width: 10%; 
    	margin-left: 2%; 
    	display: inline-block; 
    }
    
    	#cellsearchbox{
    	height: 10vh;
    	width: 100%;
    	position: absolute;
    	margin-top: 25vh;
    	background-color: lightgray;
    	display: flex;
    	padding: 0;
    	color: white;
    }
    

    HTML

    <div id="cellsearchbox">
    		<div id="thrmenu" onclick="openNav()">
    			<div class="bar" style="background-color: white; margin-top: 30%;"></div>
    			<div class="bar" style="background-color: white;"></div>
    			<div class="bar" style="background-color: white;"></div>
    		</div>
    <div id="searchpackage">
    		<form class="search" method="get" action="<?php echo home_url(); ?>" role="search">
    	<input class="search-input" type="search" id="t" name="s" placeholder="<?php _e( '', 'html5blank' ); ?>" style="display: block;">
    			<button class="search-submit" type="submit" role="button" style="display: block;"><?php _e( '', 'html5blank' ); ?><img src="https://peggyslittlecorner.com/wp-content/uploads/2019/05/search2i.png" style="width: 10px; height: 10px;"></button>
    </form>
    		</div>

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter starwag

    (@starwag)

    It should be noted that the above code only works if you resize the window to a much smaller size, less than 720px. Also, I have played with the code so that it is currently working with left and right floats, and the widths at 88% on the input field, and 10% on the button. However, if I resize this too small, the button jumps down to the next line. Conversely, if the screen is widened too much, the button separates form the input field. Ideally, the two should be beside one another at all times with no space between them, no matter how the screen is resized.

    Moderator t-p

    (@t-p)

    For commercial product support please contact the author directly on their site:
    http://html5blank.com/

    Forum volunteers are not given access to commercial products, so they would not know why it is not working properly. Keep in mind we encourage you to use the official support venues, as it allows the developers to be aware of issues with their code and gives back to the community in a more robust way. See https://wordpress.org/support/guidelines/#do-not-post-about-commercial-products

    Moderator bcworkz

    (@bcworkz)

    Hi starwag,

    I think the problem stems from the calculated width of the overall sidebar container. For reasons I don’t understand, subsequent 100% widths within this container do not work as expected. Still, percentages are the way to go if you want the form to take up any space available. It’s just that the widths specified need to be manually tweaked. The following widths seem to look OK and do not cause line feeds:

    #searchbox {
        width: 86%;
        padding: 2% 7% 2% 7%;
    }
    form.search {
        width: 100%;
    }
    input[type="search"] {
        width: 79%;
    }
    button.search-submit {
        width: 14%;
    }

    I did not check other browsers besides Chrome. My basic process was to start at 100% width of the outermost element (#searchbox) and adjust down until the width no longer overflows the outer container. The elements developer tool is instrumental in determining the max. width possible without overflow.

    Work your way down and in, maxing out each element’s width while leaving adequate padding and room for the button. Finally, adjust the button width down from say, 20% until it fits without a line feed or being too compressed. All the while checking all various window widths to ensure the width works at all screen sizes.

    Thread Starter starwag

    (@starwag)

    I have been altering the code, per the theme’s original intention, to simply provide a base for people to learn and work from. I have been learning code and theme development for the last 4 years through this theme. However, the CSS, and much of the code I am using, is all mine, regardless of the theme starting off as HTML5Blank. The original theme is stripped down immensely simply for this purpose. In truth, there may not be much of the original code left. The error would be on my end, so there is no point in asking for support form the original creator of the theme. The only reason why I have not altered the original credit is because there are still some strips of php in the functions section which I have yet to remove, and which belong to the original content.

    Thread Starter starwag

    (@starwag)

    Thanks bcworkz. I was making tiny adjustments before, but felt I was going wrong by doing so. I will continue altering by increments. Not sure why the 100% is wonky either. However, since you mention it, I may go back and review the containers and sidebar above the codes here to see if something is altering how the percentages for my search box. Thanks again. You are always so helpful!

    Moderator bcworkz

    (@bcworkz)

    You’re welcome. It seems like there should be a better way. Percentages are the best way I know to manage responsive widths. They can become a juggling act finding the right values that work in the broadest range possible.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Input Field and Button Spacing problems’ is closed to new replies.