There is a portion of a web app that I am writing that is being a particular pain to make look really nice and neat like I want it. I have a button with a fixed width next to a form that contains text, an input text box, and a submit button. I want the width of the input box to resize based on the width of the screen but I don't know how to do without making a piece fall onto the next line.
Here is a fiddle of the problem: http://jsfiddle.net/Yt3V2/
HTML:
<div class="wrapper">
<button type="button" class="new_button">Create New</button>
<form name="input" action="" method="post">
Search:
<input type="text" class="search_input"></input>
<input type="submit" value="Submit"></input>
</form>
</div>
CSS:
.new_button
{
float: left;
min-width: 120px;
}
.search_input
{
width: /* What could go here? */;
}
A lot of suggestions included making a table out of the CSS, which gets me pretty close but the text box will still get cut off: http://jsfiddle.net/G9pDw/
Is there any way to get the input text box to resize dynamically and still fit where I want it to?
According to this question : try changing :
<input type="text" class="search_input"></input>
to
<input type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></input>
JSFiddle
**Updated*************************
New JSfiddle
Related
I have a search box with input element and submit button. I am working in bootstrap. At xs breakpoint submit button goes into another line. I want to make the whole forum never collapse but changes its size as it happens by default
<form class="form-inline quick-search-form" role="form" action="search.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Keyword(s)">
<button type="submit" id="quick-search" class="btn btn-custom"><span class="glyphicon glyphicon-search custom-glyph-color"></span></button>
</div>
<div class="pad-top-20">Examples Background, Banner, Brochure</div>
By default, bootstrap inline form will always collapse on xs (from the documentation http://getbootstrap.com/css/#forms-inline)
Add .form-inline to your form (which doesn't have to be a ) for
left-aligned and inline-block controls. This only applies to forms
within viewports that are at least 768px wide.
You need to override them so it will never collapse
.form-group input{
width: 80%;
display: inline-block;
}
Working plunk: https://plnkr.co/edit/KFvIrUSwioIwWG6hZAA1?p=preview
Basically I have a couple of input fields which have a span prepended with some text. When I try to set col-lg-4 and col-lg-8 on the input-group-addon and the input field itself, it doesn't do what I expected it to do and resize them.
<div class="input-group">
<span class="input-group-addon">some text</span>
<input type="text" class="form-control" id="current_pwd" name="current_pwd" />
</div>
Can anyone help me getting the input-group-addon get the same size?
I've created a fiddle here: http://jsfiddle.net/Dzhz4/ that explains my problem.
Anyone that can shed some light please?
try this
http://jsfiddle.net/Dzhz4/1/
.input-group-addon {
min-width:300px;// if you want width please write here //
text-align:left;
}
.input-group-addon { width: 50px; } // Or whatever width you want
.input-group { width: 100%; }
The first part sets the width of your addons, the second forces the inputs to take up all of their parent container.
I have a a text type input field, and I have a button for "Search". I would like these 2 objects to be horizontally aligned; with the button being as big as it wants to be, and the input field taking up the rest of the space. I have been trying with CSS all day, but with no avail.
I am using RoR, and employing the Bootstrap library. I was wondering if there was anything out of the box that would make this work. I have also tried using flexboxes, but the input field seems to have a mind of its own. Below is the problematic code.
<div class="mini-layout fluid">
<div class="mini-layout-body">
<h2>Shows</h2>
</div>
<div class="mini-layout-sidebar">
<div class="search_container">
<input id="search_shows_text" type="text" class="search-query">
<button id="search_shows_button"
type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
I've been able to get the search_container class to lay things out horizontally, but getting its children to resize appropriately has managed to escape me all day.
Any help is greatly appreciated.
EDIT Thanks to Krishnan and the SO community I got the solution working. Below is the code for anyone else.
HTML
Search
CSS
.search_container
{
text-align:center;
margin-top: 5px;
}
.text_area
{
width: 55%; //Change as per your requirement
display: inline-block;
margin: auto;
}
.but_area
{
width: 25%; //Change as per your requirement
margin: auto;
}
By default bootstrap have width set to 206px for text area and 71px for submit button. So in order to make it accomodate your requirements you have to override those default properties. I would probably do something like this.
create a class text_area with custom property
.text_area
{
width: 85%; //Change as per your requirement
}
create a class but_area with custom property
.but_area
{
width: 10%; //Change as per your requirement
}
And would use it in input text area and button.
<input id="search_shows_text" type="text" class="search-query text_area">
<button id="search_shows_button"
type="submit" class="btn btn-primary but_area">Search</button>
It will make my text area to occupy 85% of the space and button to occupy 10% space in my window and remaining 5% of space is left free.
I'm trying to make a form input field that looks like
where domain.com/username/ is non-editable text (that doesn't get submitted as form data), but the user can type what they want at the end of it. I know I can use Javascript for this, but is there a clean, non-hacky way to do it with CSS alone? Of course the username will vary in size, so the editable text needs to start in the right place.
If you don't need the default browser-style inputs and can edit the HTML, you can create your custom fields like this - http://jsfiddle.net/Aprillion/aJQ6M/:
HTML:
<label class="looks_like_input">
domain.com/username/
<input type="text" value="all-about-kitties">
</label>
CSS:
.looks_like_input {
border: 1px inset;
font-weight: bold;
}
.looks_like_input input {
border: 0;
font-weight: normal;
}
why not just label the domain.com/username/ and then put the input?
put this in your CSS
#page{float:left;}
#box{border:1px inset; height:30px;}
.text_field{border:none;}
and this goes in HTML
<div id="page">
<div id="box">
<input class="text_field" style="float:right; min-width:50px;width:50px;max-width:130px;text-align:left;" size="5" onkeyup="this.size=this.value.length+1;this.style.width='auto'" type="text">
<label class="prefix_for_input" style="float:right;">http://millerpath.tumblr.com/</label>
</div>
</div>
you might wanna fix some things around here.
I'm trying to align my Checkbox with label to center in my little webpage I'm developing but I cannot figure out how, and yes I've googled!
You can view source on my webpage, http://www.sithhappens.net (Load the phone on your mobile though thats where all the CSS is done is for mobile view (Desktop view will come later).
And see the css at http://www.sithhappens.net/iphone.css
Not HTML5 but it works:
http://jsfiddle.net/gYCQz/
CSS:
input
{
display: inline;
}
body
{
text-align: center;
}
HTML4+:
<input type="checkbox" value="Test" /> Test
if u want check box in center use this
<div>
<input type="checkbox" value="Test" />
<div>
then u can use text-align(right,left,center) whatever u want.
also u can use
<div align="center">
</div>
and remove margin-bottom from all tag give width and height.