I'm trying to introduce a checkbox next to another element. The problem is that the a element has been made a "block" by the CSS so that it appears at the correct height and width. Being a block, I can't simply put another element next to it and hope it shows up there -- it shows up just below it.
A self-contained sample is shown below.
<html>
<head>
<style type='text/css'>
/* I don't have control over this */
a.btn {
background-color: #B35905;
color: #E6D389;
text-decoration: none;
font-weight: bold;
text-align: center;
display: block;
border: none;
cursor: pointer;
}
.normal{
line-height: 20px;
font-size: 12px;
height: 20px;
width: 125px;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<!-- I have some control over this -->
<a class="btn normal">Push Me</a><input type="checkbox">
<br>
<a class="btn normal">Push Me Too</a>
</body>
</html>
So what I'm looking for is the checkbox to appear immediately to the right of the element, but without having to completely muck up the styling of the button. Absolute positioning of the checkbox using the (known) size of the button seems wrong and dirty.
Suggestions?
<a class="btn normal" style="float: left;">Push Me</a><input type="checkbox">
<br style="clear: both;">
<a class="btn normal">Push Me Too</a>
If you must keep the anchor a block element, set float: left to it. Don't forget to add
<div style="clear: both;"></div>
after the checkbox.
Add in two more css classes
.floatingButton{
float:left;
}
.aCheckbox {
xclear:left;
}
Then
<a class="btn normal floatingButton">Push Me</a><input class="aCheckbox" type="checkbox">
<br>
<a class="btn normal">Push Me Too</a>
Should do the trick
Can you do something like this with the access that you do have?
<div style="width: 150px;">
<input type="checkbox" style="float: right;">
<a class="btn normal">Push Me</a>
</div>
Just apply a float: left to the first a tag.
The easiest possible way to get the checkbox beside the button while preserving the button's block styling would be to set the button's display property to inline-block. Surprisingly, using display: inline-block in this scenario will work in all modern browsers and IE 6 and above. inline-block is a little-known but highly useful property.
Related
I want to have these objects in one row
My HTML code looks like this:
<input type="button" class="formreturn" value="Copy Url" onclick="Copy();" />
<label><input type="text" class="txtfilename" id="op-text-filename" placeholder="type file name"/>.txt</label>
<button type="button" class="formreturn" onclick="saveURLtoTXTfile();"><span class="glyphicon glyphicon-download"></span>.TXT</button>
<button class="excelsubmit" onclick="exportData()"><span class="glyphicon glyphicon-download"></span>.CSV</button>
<button id="btnExport" class="excelsubmit" onclick="fnExcelReport();"><span class="glyphicon glyphicon-download"></span>.XLS </button>
and CSS
.formreturn {
font-weight:700;
text-decoration: none;
display:inline-block;
color:black;
background:#c6e2f2;
padding: 9px;
border-radius: 3px;
}
.copyurltext {
font-weight: bold;
margin-left: 30px;
}
.txtfilename {
display: inline-block;
float: left;
padding: 5px;
}
.excelsubmit {
font-weight:700;
float: right;
padding: 8px;
background:#c6e2f2;
}
If I place the float:left in my formreturn, then everything is fine, but the order is wrong, as the .txt button goes next to the "Copy Url" button. I want to have the order as you see below, but with everything lined up properly.
I tried something like here:
http://jsfiddle.net/A9Ap7/1/
codeproject.com/Questions/5280800/How-do-I-put-everything-in-one-line
and here
css everything on same line
but it didn't work for me
How can I fix this?
Try this:
<div class="container">
<div classs="btns-left">
<input type="button" class="formreturn" value="Copy Url" onclick="Copy();" />
<label><input type="text" class="txtfilename" id="op-text-filename" placeholder="type file name"/>.txt</label>
<button type="button" class="formreturn" onclick="saveURLtoTXTfile();"><span class="glyphicon glyphicon-download"></span>.TXT</button>
</div>
<div class="btns-right">
<button class="excelsubmit" onclick="exportData()"><span class="glyphicon glyphicon-download"></span>.CSV</button>
<button id="btnExport" class="excelsubmit" onclick="fnExcelReport();"><span class="glyphicon glyphicon-download"></span>.XLS </button>
</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
.btns-left,
.btns-right {
display: flex;
}
Also, you can use properties for align elements by horizontal axis, as an example align-items: flex-start.
Or:
float: left; for btns-left and float: right; for btns-right and display: inline-block; for every element without display: flex; anywhere.
Also, can try, float for every element without any wrappers (left properties for left side, right ones for right side)
Grid layout, but it's more complicated. The best solution is applying flexbox layout for positioning elements. Better avoid floats, cause it might voke some troubles with clearing flow in future.
Try to give all elements a display: inline-block for starters (so, the button input, label and three buttons), float: left is not recommended and bad practice.
You want it all to be next to each other? Maybe start using css grid, it's useful for making things in line.
Then there's always the option of setting all these things in a navigation bar, so it's always at the top of your screen in line.
Perhaps try and create a container that holds all the buttons in place?
I basically have a button that I need to align center. Next to that button I need to display something (a checkmark for example). I have been trying to do this but have run into a problem that:
1) if i use display:inline I can't center it
2) if i use display:block I can't add another element next to it
I have been trying to figure it out with display:inline-block to no avail
JFiddle: https://jsfiddle.net/2x5a5zdx/
code:
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn"/>
<span class="green-success" id="surveySuccess" >✔</span>
<span class="red-danger" id="surveyFailure" >✖</span>
And then the css
#submitBttn {
margin:auto;
display:inline-block;
}
#surveySuccess, #surveyFailure {
}
Thank you
As you have pointed out, margin: auto will not center an inline element.
Since inline/inline-block level elements respect the text-align property, you could simply add text-align: center to the parent element. In doing so, the children elements will be centered since they are inline by default.
Updated Example
.parent-element {
text-align: center;
}
.parent-element > span,
.parent-element > input {
display: inline-block; /* Added for example purposes */
vertical-align: middle;
}
Alternatively, in supported browsers, you could also utilize flexbox layouts and set the display of the parent element to flex and add justify-content: center for horizontal centering:
Updated Example
.parent-element {
display: flex;
justify-content: center;
}
To display the button and icons horizontally centered on the page, wrap them both in a div and set it's text-align property to center.
<div id="wrapper">
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn"/>
<span class="green-success" id="surveySuccess" >✔</span>
<span class="red-danger" id="surveyFailure" >✖</span>
</div>
#wrapper {
text-align: center;
}
Basic
If you want to center the button and the checks together, as a whole, centering is simple. You just need to add text-align: center to the parent element (which you may have to introduce).
.container {
text-align: center;
}
<div class="container">
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn" />
<span class="green-success" id="surveySuccess">✔</span>
<span class="red-danger" id="surveyFailure">✖ This content <i>does</i> affect centering.</span>
</div>
Or, if you want the button itself to be centered, regardless of the labels, you can use position: absolute to pull the labels out of the flow. This is especially useful if you want to display only one label at a time. If you display both, they will be on top of each other, so you'd have to solve that.
.container {
text-align: center;
}
#surveySuccess, #surveyFailure {
position: absolute;
margin-left: 5px;
}
#surveyFailure {
display: none;
}
<div class="container">
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn" />
<span class="green-success" id="surveySuccess">✔ Button is not moved</span>
<span class="red-danger" id="surveyFailure">✖ Button is not moved</span>
</div>
Personally, I'd like to show labels like that through CSS mainly, so this code is slightly altered again, adding a feedback text in the span (if you like), but adding the check or cross (and color too) in CSS by setting a class of the span. By simply adding the class success or failure you can change the way symbol and the color of the single 'surveyResult' span you have now:
.container {
text-align: center;
}
#surveyResult {
position: absolute;
margin-left: 5px;
}
#surveyResult.success {
color: green;
}
#surveyResult.success::before {
/* \2714 is the CSS (hexadecimal) notation of ✔ */
content: '\2714 ';
}
#surveyResult.failure {
color: red;
}
#surveyResult.failure::before {
content: '\2716 ';
}
<div class="container">
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn" />
<span class="success" id="surveyResult">You did great!</span>
</div>
I'm not having any joy with this so any help would be much appreciated. The basic problem is when I click on Login it presents me with an input box for username but I can't get the focus on the box to enter anything. If I change the css from position:absolute to relative it works but mucks up the layout. Similarly if I remove the code for the About tab it works. I guess there might be something going on with layering as the dropdown for each tab occupies the same space but it defeats me so far. I'm working in Chrome and IE11. It's a personal project so not bothered about other browser compatibility.
Here is the code:
<body>
<style>
.panel div {
opacity:0;
width: 100%;
position:absolute;
top: 34px;
}
.panel .tab-link {
float: left;
width: 20%;
padding: 7px;
background:#ddd;
margin-right: .5%;
text-align: center;
}
.anchor:target + .panel div {opacity: 1;background: #ccc;}
.anchor:target + .panel .tab-link {opacity:1;background: #ccc;}
</style>
<span class="anchor" id="login"></span>
<div class="panel">
<a class="tab-link" href="#login">Login</a>
<div>
<div>
<input name="test" type="text" placeholder="Username or email" value="" autofocus>
</div><br><br><br>
</div>
</div>
<span class="anchor" id="about"></span>
<div class="panel">
<a class="tab-link" href="#about">About</a>
<div><h2>Hello World</h2></div>
</div>
</body>
Alternatively I have a jsfiddle for you.
http://jsfiddle.net/PCaAC/
You need to add z-index:2; to your input in CSS.
As Beardminator stated. A z-index is sufficient. However, I wouldn't use 2. If you skip a number of precedence in a z-index you will leave gaps in your layering. use 1. Just in case you need to layer something else, then you can use 2 and so forth.
.panel .tab-link {
float: left;
width: 20%;
padding: 7px;
background:#ddd;
margin-right: .5%;
text-align: center;
z-index:1;
}
Also, I changed you html a little for a more solid markup. You had an extra div set that wasn't needed
check the fiddle
I am having a ridiculous problem where my input text field and submit buttons are not lining up and I really can't figure out an elegant solution of how to fix it. As you can see in the image below, the input text field (labeled "Enter Keywords" in the upper right") is 2px higher than the "Search" submit button:
Here is the HTML:
<div id="search">
<form action="#" method="POST" id="search_form">
<div id="search_inputs">
<input type="text" placeholder="Enter Keywords" name="keywords" />
<input class="button" type="submit" name="search" value="SEARCH" />
</div>
</form>
</div>
Here is the css code:
#search_form .button {
background: black;
color: white;
padding: 3px 15px;
border: none;
font-size: 7pt;
height: 18px;
}
#search_form input[name="keywords"] {
width: 175px;
}
#search {
margin-top: 7px;
float: right;
}
I'm pretty sure setting the font-size to 7pt is messing it up, but I'm not sure why and I don't know how to deal with this because that's the font size of my other buttons in the area.
Thanks for any help!
adding a float: left; to the #search_form input[name="keywords"] style align's their tops correctly, then adding some margin-right should get you good to go.
Fiddle
The issue stems from the float: right on the search button. The input box has a natural display: inline-block to it, which causes the slight drop. Normally when you float right the fix to this is to move that element upwards in the DOM. This won't work in this case. By changing the input to a floated element you are also forcing it to be display: inline.
Though I'm not sure why you can't just add a display: inline to the element.
I have the following code:
<div class="filter-field">
<span class="filter-title">Number From</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberFrom" runat="server" />
</span>
<span class="filter-extension">To</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberTo" runat="server" />
</span>
</div>
and this stylesheet:
.filter-field {
height: 20px;
display: inline;
}
.filter-title {
width:90px;
display: inline;
padding-right:10px;
}
.filter-extension {
width: 40px;
display: inline;
padding-left: 10px;
padding-right: 10px;
}
.filter-control {
display: inline;
}
but each span is displayed on a new line like this:
Number From
TextBox
To
TextBox
when it's supposed to be something like
Number From [space] TextBox [more
spaces] To [space] TextBox
How can I achieve this through css without changing the tags I'm using? (actually read: without using tables.)
What you have displays inline already, you have some other CSS (that has a more specific selector) creating the block type display. Or...the textboxes (whatever the rendered version looks like) are display: block; themselves.
Those custom ASP textboxes are almost certainly rendering the textbox within a <div>. Adding this to your CSS should do the trick:
.filter-control * { display:inline !important;}
If that textbox control accepts the CssClass attribute, you could also try
.inline { display:inline; }
<dx:ASPxTextBox ID="FilterNumberXXXXXX" runat="server" CssClass="inline" />
Wrap your text in a block-level element such as a paragraph or heading:
<div class="filter-field">
<p>
<span class="filter-title">Number From</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberFrom" runat="server" />
</span>
<span class="filter-extension">To</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberTo" runat="server" />
</span>
</p>
</div>
Your styles shouldn't need to be set to inline if they're spans, so your CSS becomes:
.filter-field {
height: 20px;
}
.filter-title {
width:90px;
padding-right:10px;
}
.filter-extension {
width: 40px;
padding-left: 10px;
padding-right: 10px;
}
.filter-control {
}
At worst, you might replace your display: inline; declarations with float: left; but I don't see why you'd need to.
If you are still having problems, I would suggest your span styles are probably inheriting a display: block; property from elsewhere in your CSS.
Try
.filter-field {
height: 20px;
display:block;
overflow:hidden;
}
The problem might be that you actually don't mean to display a box (div) but a paragraph (p). You can do the following and it should work.
In your styles:
.filter-field span{
padding-right:10px;
}
In your markup:
<p class="filter-field">
<span class="filter-title">Number From</span>
<span class="filter-control">
Hello
</span>
<span class="filter-extension">To</span>
<span class="filter-control">
Goodbye
</span>
</p>
Also remember that CSS inherits rules, so the problem could be somewhere else. Using Firebug or any other browser inspection tool could de helpful to determine what's going on.
Use firebug to check which rules are being applied to your elements. As Nick suggested there is probably a more specific selector adding a display: block style to the spans that should be inline by default.
If there is a specific rule (based on an id) you can make your rules more specific by:
Adding an id to your div and making your css rules apply to that id
Finding the applied rule, to which ID it refers, and making your CSS rules apply to that ID:
#the_id .filter-field span {
display: inline;
}