I have been trying to figure out how I can get input field and a button on the same line inside a table cell without stretching the column too much.
This is what I want to be inline:
<td>
<input type="text" class="input-sm form-control"id="measured_value" name="measured_value" placeholder="Measured value">
<button type="button" class="btn btn-xs btn-primary" onclick="add_measurement();">Submit</button>
</td>
This is what I get:
I have also tried using divs with col-lg-8 and col-lg-4 it did inline them but that in turn stretched the column a lot. It made the column like 1.5 times wider and I am trying to make the table compact.
It seems that form-control is the reason why it wouldn't inline. So I ended up removing form-control and adding this for the borders which came with the form-control.
.input-sm{
border: 1px solid #CCC;
border-radius: 4px;
}
The Easiest way is to make them float. For example:
CSS:
.input_class{
float:left;
}
.btn{
float:left;
}
Related
I'm trying to create a Navigation field for my website, and I would like my buttons to be underneath each other with a white line in between. I have managed to get this part working by adding two line breaks next to the button, as seen here:
<button id = "next" onclick="next()">
Volgende
</button><br><br>
I'm wondering if it's possible to have them show up like this, but if I hide the button, have the other buttons jump up, so they fill the gap and jump back down when the button becomes visible again.
Thanks in advance!
Don't use line breaks for layout. That's a misuse of their purpose, which is to break text.
Just put your buttons in block-level (or inline-block level) containers, like divs. Obviously you'd hide and show the containers, not the buttons.
.button-container:not(:first-child) {
border-top: 1px solid red;
padding-top: 4px;
margin-top: 4px;
}
<div id="next-btn-container" class="button-container">
<button id="next" onclick="next()">Volgende</button>
</div>
<div id="other-btn-container" class="button-container">
<button id="other" onclick="next()">Volgende</button>
</div>
<div id="another-btn-container" class="button-container">
<button id="another" onclick="next()">Volgende</button>
</div>
<br> is not a good practice for cross-browser perspective, kindly use the standard way by using margin and display:block property of css.
So your html will be like:
<button class="mb-20px d-block" id = "next" onclick="next()">
Volgende
</button>
And add below line in your css
.mb-20px { margin-bottom: 20px; }
.d-block { display: block; }
I have found how to make it work.
Instead of using
document.getElementById("button").style.visibility = 'hidden'
I have now used
document.getElementById("button").style.display = 'none'
This makes the buttons fill the gaps when they're hidden.
I'm trying to make all my form elements the same height. Normally I'd just set a height on each item and job's a good'n! But the dev's I'm working with are adamant I use padding for the buttons incase they need to wrap so the text doesn't get cut off ...by argument would be that's a problem that needs to be solved as well but anyways...
So I have this CodePen showing all my styles. I've included all the CSS just incase anything is being inherited I've missed. I've managed to get most of them the same height by using the same font-size, padding and line-height.
https://codepen.io/moy/pen/pVeOyQ
The problem is one of the buttons doesn't have a border and everything else does, so it's off by a few pixels. I thought border-box would solve this but obviously not!
I could add a border to that button as well and always make sure it's the same colour as the background - but that's a bit of the pain. Is it the only way though?
I know this is a bit of a minor/simple issue but I just want to get some feedback before making a decision.
I've included the CodePen as I couldn't embed all the CSS as it exceeded the limit. Also I couldn't get all the elements horizontally inline on the embed code as there wasn't enough room.
I could add a border to that button as well and always make sure it's the same colour as the background - but that's a bit of the pain. Is it the only way though?
Instead of that, you could add a transparent border, as shown in the snippet below.
input, select, button {
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
padding: 15px;
border: 1px solid #1111;
margin: 0;
}
#transparent-border {
border: 1px solid transparent;
}
#no-border {
border: none;
}
<p>How it looks <i>with</i> the transparent border</p>
<input type="text" name="" placeholder="Input field">
<select class="" name="">
<option value="Select">Select field</option>
</select>
<button type="button" name="button">Button</button>
<button id="transparent-border" type="button" name="button">Button with transparent border</button>
<p>How it looks <i>without</i> the transparent border</p>
<button type="button" name="button">Border</button>
<button type="button" id="no-border" name="button">No border</button>
<p>Comparison</p>
<button type="button" id="no-border" name="button">No border</button>
<button id="transparent-border" type="button" name="button">Button with transparent border</button>
How about setting a min-height for all your elements?
Combined with box-sizing: border-box;
I've use bootstrap in my project, like this below
<div class="input-group">
<input type="text" class="form-control input-lg" autofocus>
<span class="input-group-btn">
<button class="btn btn-primary btn-lg" type="button">search</button>
</span>
</div>
and in Bootstrap, I saw :
.input-group-btn:last-child > .btn {
margin-left: -1px;
}
So I write some CSS to avoid the useless margin-left:-1px; but I still have a problem:
When I click the area outside the <div class="input-group search-bar">, the button still have a effort like margin-left:-1px;
I'm confused, should I write some JavaScript to avoid this?
From the bootstrap source code on Github, these -1px styles are used when having button groups where the buttons align next to each other from doubling the border. If you place 2 buttons with a 1px border next to each other, you create visually a 2px border. The -1px shifts the button over so that the border is not doubled.
Comment from actual github source:
// Prevent double borders when buttons are next to each other
The -1px margin is there to prevent double borders when buttons are next to each other. It's meant to be this way.
If you really need to get rid of this, you may also have to adjust some of the negative margins and/or z-index for .input-group-btn > .btn:hover, :focus, :active, :first-child, and :last-child.
I have a web application in which i have these two submit button inside a table
<input type="submit" value="Modifier" name="btn" style="display:inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left:10px ; display:inline" />
I'd like that it be displayed in the same line but i have this result:
Why this happens? how can i fix my code to show the buttons in the same line?
I'd stay away from this method of css personally, just my preference this will mean that every submit button is exactly the same but what if you don't want this styling with every submit button. But then again that method is much better than doing css inside a HTML file
input[type=submit]{
}
You're better off giving the submit buttons a class called submit then you can pick and choose which submits you want to do you're styling for
<input type="submit" class="submit">
.submit{
float: left;
etc.
}
The main problem is your table column widths perhaps give them all a class and give them a width and/or height that meets your needs inside an external css file.
you may try this styling;
input[type="submit"] {
float: right
}
you may also try float left.
Though you could increase the width of the table column or use display: inline-block, maybe you want to do something else:
Increaseing table/column width seems natural, as the two buttons look too wide to fit into that.
Once you have it, you may prefer to use something like block display with a float component.
The inline-block performs poorly in Internet Explorer browsers, even in recent versions like IE9, and a lot of your visitors will be using it for a while.
input[type=submit] {
display: block;
float: left;
width: 100px; /* or whatever fixed width you need */
}
You can try like this
Define a css rules for your submit buttons
input[type=submit] {
display: inline-block;
float: left; /* use this if you want them to be aligned other wise not */
width: as per needed
}
here is an example.. uses bootstrap though
http://jsfiddle.net/QYBHm/
<h3>
<input type="button" href="/users/sign_up">Sign up</input>
or
<input type="button" href="/users/sign_in">Sign in</input>
</h3>
Sign up
or
Sign in
Increase your column size if not auto and add float:left to "Exporter"
In your table row in column with the buttons try this code
<td nowrap="nowrap">
<input type="submit" value="Modifier" name="btn" style="display: inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left: 10px;" />
</td>
I would say that the container column isn't wide enough, so even too they are inline they appear like this. Try changing the width of that column to check if that's the problem.
Try this css
input[type=submit] {
display: inline-block;
float: left;
width: /*adjust as per your table */;
}
i'm currently working with Twitter Bootstrap and have a problem concerning the size of elements. I'd like to create an input field with an appended button. That's why I'm using a div with "input-append", which sorrounds the input and the button tag.
Now my problem: I want everything to be a bit bigger. So i gave the button tag the property "btn-large". Unfortunately there doesn't seem to be a similar property for the input field.
How can I fit the input field to the appended button?
<div class="input-append">
<input class="span3" id="appendedInputButton" size="16" type="text"><button class="btn btn-large" type="button"><i class="icon-search"></i></button>
</div>
Heres an impression of my problem:
Regards,
Christoph
Define box-sizing to your input field. Write like this:
input, button{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
You can use following style and if you want bigger then increase padding.
input, button{
padding: 7px;
}