why is the word BESTSELLER skipping a line... there is nothing in the code telling it to do so? (forgive me -- here is the link http://u.neighborrow.com/)
<div class="input text required">
<label for="ItemItem"></label><input type="text" id="ItemItem" value="" maxlength="255" style="font-size: 25px; width: 200px; margin: 5px 0pt;" name="data[Item][item]">
<input type="submit" value="Search" style="font-size: 22px" />
</div>
<?php echo $form->end(); ?>
Tips: <span style="font-size: 13px; position: relative; top: -2px"> Taking a trip? Want to try something before you buy it? <br > Have a project or event coming up? Want to see who has a copy of that bestseller?</span>
<br />
<?= $form->create('Item', array('action' => 'indextest')); ?>
</div>
I do not know what you mean by "skipping a line". Perhaps a link to the live code would help. But I did notice you have more closing div tags than opening.
EDIT: It appears the surrounding div has a computed line height of 30px. But the subject span has a line height of 18px. So, when the span takes up an entire line, it displays at the 18px line height. But when it only takes up a partial line, the 30px line height is applied to the remainder of that line, and this causes the last line to display at the larger 30px line height. Try setting the 18px line height at the parent div, or set the span to be display: block, so that the larger line height is not displayed in-line.
Try to add display:block to your span or replace the span width any block-level element such as <p> or <div>. In a semantic world you should use a <p> ;)
Also you should try to prevent inline-styles.
Related
I'm trying to get an div with image background to appear to the right of a text box. I have tried Float = none, left, right, I have tried position and even played with margins but nothing seems to get it to stay.
<div id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat; margin-left: 245px; margin-top: 2px;"></div>
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
How's that work for ya?
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
<div id="status" style="display:inline;background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></div>
float left and right try to throw your element as far to one side of the container as possible. If you want the element on the right side of a second element, put it after the second element in your HTML. Also, divs are block elements. Block elements want to be on their own line. Use an inline element (like a span), or set the display css property to inline on a block element you don't want on a new line.
EDIT: Here it is as a span for ya
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
<span id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></span>
Just float:right the div and remove the 245px left margin so you aren't pushing the input too far away.
I have a div that contains a couple of radio buttons. These show/hide a textbox.
<p>Some text</p>
<div>
<div>
<input id="show" name="radioGroup" type="radio" value="1" /><label for="show">Show</label> -
<input id="hide" name="radioGroup" type="radio" value="0" /><label for="hide">Hide</label>
</div>
<div class="myTextBox">
<input type='text'>
</div>
</div>
<p>Some text</p>
When I show/hide the .myTextBox then the text bumps a couple of pixels. This is due to the padding & margin on the textbox.
Without removing these settings (padding/margin) is there a way to eliminate the CSS bump?
See example on jsFiddle http://jsfiddle.net/nTJZN/1/
See here.
What I am doing is basically instead of show() and hide() I'm altering the visibility property.
function ShowHideTextbox()
{
if($("#show").is(":checked"))
$(".myTextBox").css('visibility','visible');
else
$(".myTextBox").css('visibility','hidden');
}
This is because your input box is taller than the text, which causes the line to grow when the input box is shown. By inspecting the element, I determined the line was 28px high when the input box was visible, so applying a line-height of 28px fixes the problem, like so:
div
{
display: inline-block;
line-height: 28px;
}
See http://jsfiddle.net/X4X3U/
I have searched, and this post is closest, but not exactly the same. I am trying to have two spans next to each other, with percentage widths. However, when the window's width is decreased by the user's screen size or window resizing, the labels and input fields separate individually. I would like the label and input to be one unit, so that if the window is decreased, the second span will wrap below the first.
HTML:
<span><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></span>
<span><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></span>
CSS:
#startdate {
width: 30%;
display: inline-block;
}
#enddate {
width: 30%;
display: inline-block;
}
Here is a fiddle. If you want to test the resizing functionality, move the center bar to the right.
Fixed: http://jsfiddle.net/XceSq/1/
<div style="display:inline-block;"><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></div>
<div style="display:inline-block;"><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></div>
The span element is a textual container and does not support the width requirement you are aiming to achieve. The div element, however, is a layout container which will allow you to contain the two objects within a single block. Using display:inline-block, we're able to make sure that the two containers show up side by side.
Enjoy and good luck!
I have the following code:
<div style="float: left; width: 100%;">
<label style="float: left;">ABC</label>
<input style="float: left; font-size: 0.5em;" type="button" onclick="addTiny(0,'Question_Text'); return false;" value="▼" title="Editor" />
<input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="▲" title="Hide" />
<div class="adm">
<textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor">
abc
</textarea>
</div>
</div>
My problem is that the div with class adm floats to the left and so goes on the same line as the label and two input buttons. Is there a way that I can make this shift away from floating?
A standard approach is to add a clearing div between the two floating block level elements:
<div style="clear:both;"></div>
Sometimes clear will not work. Use float: none as an override
You could modify .adm and add
.adm{
clear:both;
}
That should make it move to a new line
add style="clear:both;" to the "adm" div.
Okay I just realized the answer is to remove the first float left from the first DIV. Don't know why I didn't see that before.
You should also check out the "clear" property in css in case removing a float isn't an option
The css clear: left in your adm class should stop the div floating with the elements above it.
For some reason none of the above fixes worked for me (I had the same problem), but this did:
Try putting all of the floated elements in a div element:
<div class="row">...</div>.
Then add this CCS:
.row::after {content: ""; clear: both; display: table;}
Just add overflow:hidden in the first div style. That should be enough.
There's a class in bootstrap for it
class="clearfix";
I have the following "line" in my web page
<div style="width:100%">
"Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button>
</div>
The DropDown control I don't really have control over the width, as it sizes to fit whatever the longest option value is. The Buttons are fixed width. How can I get the TextBox to fill all available remaining width?
I tried putting it in a table but run into the same problem, ie how do I make all other columns as small as possible to fit their content and then the TextBox column fill remaining width?
Hacky solutions are fine if necessary, I've long ago given up any pretence of even caring about CSS standards when it's so difficult to do the simplest thing.
Edit: to clarify, by TextBox I mean <input type="text"/>
UPDATED ANSWER IN 2018
Just came across this old question and there is now a much simpler and cleaner way to achieve this by using the CSS Flexible Box Layout Model which is now supported by all major browsers.
.flex-container {
display: flex;
}
.fill-width {
flex: 1;
}
<div class="flex-container">
<label>Name:</label><input class="fill-width" type="text" /><span>more text</span>
</div>
Hope this helps someone!
OLD ANSWER BELOW
I know this is an old question but the correct solution isn't here so just in case somebody else finds there way here:
The solution is to wrap the textbox in a span.
HTML:
<label>Input</label>
<span>
<input/>
</span>
CSS:
label {
float: left;
}
input {
width: 100%;
box-sizing:border-box;
}
span {
display: block;
overflow: hidden;
}
See this fiddle for an example (now slightly out of date as I removed padding in favor of using border-box on the input).
Here is what worked for me. Note that in some cases I had to use between items otherwise it fell to the next line.
.flexContainer {
display: flex;
width:100%;
}
input {
width: 100%;
}
<div class="flexContainer">
<span>text: </span> <input/> <label>text</label>
</div>
I would suggest the following:
<div style="width:100%; white-space:nowrap">
"Some Text" <DropDown> "Some more text" <TextBox style="width:100%"> <Button> <Button>
</div>
You can set the width of the textbox to 100% (with css as you did with the div), so it'll be spanned to the full extent of it's parent (assuming the parent tag extends the full screen).
The only way I see it feasible is with Javascript, so you get the width of the div (in pixels), deduct the current size of the other controls and add the result as with of the input. That would require you to put the text inside a span control (so you can get its size).
Set the width of the textbox to 100% with the css property display: inline;?
This is not doable in CSS as far as Chrome is concerned. The feasible way is by manipulating the size attribute of the form control through JavaScript. If the length of the string is 25, add an extra of at least 10 for the clearance.
HTML
<!-- "The quick brown fox jumps over the lazy dog" is 43 characters long -->
<input type="text" value="The quick brown fox jumps over the lazy dog" id="textbox1" />
JavaScript / jQuery
<script>
var value = jQuery('#textbox1').val(); // 43
jQuery('#textbox1').attr('size', value.length + 10 ); // resizes the textbox
</script>
Another option also is by pre-calculating the size from a back-end script.
PHP / HTML
<?php
$value = "The quick brown fox jumps over the lazy dog";
?>
<input type="text" value="<?php echo $value; ?>" size="<?php echo ( strlen($value) + 10 ); ?>" />