In the following example, I'm trying to get the text, input box and icon to align without over lapping.
http://jsfiddle.net/zGZM7/2/
Is there some css I'm missing?
Thanks
Edit, sadly I need a solution which will work with FF and IE6 :(
You have a lot of irrelevant CSS in your fiddle and the only relevant bit isn't getting called as it in your example requires to be under a ul with id #icons. Removing the ul#icons with the following:
.ui-icon {float: left; margin: 0 4px;}
Should make it work as you described.
example:
http://jsfiddle.net/niklasvh/kTFw7/
Split them in different tds
<table>
<tr>
<td>Foo</td>
<td><input type=text id=Foo class=textInput></td>
<td></td>
</tr>
</table>
or
add style float:left to the input
<td>
<input type=text id=Foo class=textInput style="float:left">
</td>
or like Niklas's idea
.ui-icon {float: right; margin: 0 2px;}
Related
I have a table where one of the cells is like this:
<td>
<div class="table-wrapper">
<table class="inner-table">
<!--content-->
</table>
<div>
</td>
The div is there so I can put a border around the table, with a gap of 10px. As it displays, though, the div is the entire width of the enclosing td. What I would like is for it to be just the width of the table it wraps (plus margin, to be specified). I can't figure out the CSS to do this, simple though it no doubt is, although I've got it working with Javascript - but I would prefer to do it using CSS, if possible. I had hoped setting width:auto for the div would work, but it makes no difference,
One way is to use inline-block
<style>
.table-wrapper {
border : 1px solid black;
padding : 10px;
display : inline-block;
}
</style>
<table width="400px">
<tr>
<td>
OUTER
</td>
<td>
<div class="table-wrapper">
<table class="inner-table">
<tr><td>INNER</td></tr>
</table>
<div>
</td>
</tr>
</table>
I am using jqxValidator to validate a group of radio buttons. When the red message (which is a label) appears under the row, it inherits the width of the first column, breaking the design:
I tried many things, finally changing the display of the label fixes the table layout, but the message get splitted in 2 lines.
Is there a way to extend the width of the label to use the whole table width?
Example: https://codepen.io/lhernand/pen/OEZbXb
HTML:
<table style="border:0; border-collapse:collapse; " width="100%">
<tbody>
<tr class="rowRequired jqx-validator-error-element" id="optionsID0EYE">
<td style="border:0; width:50%; "><input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span></td>
<td style="border:0; width:50%; "><input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span></td>
</tr><label class="jqx-validator-error-label" style="position: relative; left: 0px; width: 304.688px; top: 2px;">Please choose one option!</label>
</tbody>
</table>
Note: it should work in IE11
Working with this kind of fixed structure requires some mayor hacking,
since jquery validator inserts a label after a td on the table, the element behave like a td with no match on the same row.
Using the chrome dev tools option to copy the selector on the inspector, I can get the most specific selector posible for the html structure you have, so aplying a 200% size to this element, tricks the table to not missbehave
#tablePatientDetailsContainer > tbody > tr:nth-child(1) > td > table > tbody > tr > td:nth-child(2) > table > tbody > label{
width: 200% !important;
box-sizing: border-box;
}
Tested on Chrome, FF and Safari
My Working Code
https://codepen.io/Teobis/full/vrjZVR/
Hope this helps
You placed the id optionsID0EYE in the wrong place. jqxValidator will create a sibling for the element who has this id. You need to do something like so:
<tbody>
<tr class="rowRequired">
<div id="optionsID0EYE" style="display: flex; flex-wrap: wrap">
<div style="width: 50%">
<input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span>
</div>
<div style="width: 50%">
<input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span>
</div>
</div>
</tr>
</tbody>
I moved the id optionsID0EYE to a new div I made.
Working example: https://codepen.io/anon/pen/YvLZeB?editors=1000
I'm a beginner to HTML and CSS. I'm using jquery mobile, and jquery ui to build a page. I have added a select menu and two images as buttons next to it. I have set a border width of 1px to see the layout. As it is seen in the picture below select menu border is extended and covers the images so I can't click on them.
select menu border covers image
This is the html
<div id="container" >
<img src="styles/add_button.png" id="addButton" class="imgButton">
<img src="styles/remove_button.png" id="removeButton" class="imgButton">
<form>
<select name="select-native-1" id="selectMenu">
</select>
</form>
</div>
this is the CSS
.imgButton{
float : right;
margin: 0em .2em;
}
#container{
vertical-align: middle;
margin:0em 1em 1em 1em;
}
#selectMenu{
float: right;
}
What is the problem here?
I find tables to be the easiest way to properly align things. Try this...
<table><tr>
<td><select name="select-native-1" id="selectMenu"> </select></td>
<td><img src="styles/add_button.png" id="addButton" class="imgButton"> </td>
<td><img src="styles/remove_button.png" id="removeButton" class="imgButton"></td>
</tr> </table>
And then add widths to the td elements to give it the look you want.
This is irritating. I am simply trying to set some basic inline styles and it is not working.
<td style="text-align: center; background-color: Black;">
</td>
The only thing is that I am using DataTables API. None of the styles set seems to work there.
try this,
<td style="text-align: center !important; background-color: Black !important;">
</td>
I have checkboxes as shown in http://jsfiddle.net/Lijo/Fw3fz/. I need to align the checkboxes horizontally. How to align them using CSS?
Note: The following HTML code is generated from ASP.NET. I cannot change this HTML code.
<table id="Checkboxlist1">
<tr>
<td><input id="Checkboxlist1_0" type="checkbox" name="Checkboxlist1$0" value="red" /><label for="Checkboxlist1_0">Red</label></td>
</tr><tr>
<td><input id="Checkboxlist1_1" type="checkbox" name="Checkboxlist1$1" value="blue" /><label for="Checkboxlist1_1">Blue</label></td>
</tr><tr>
<td><input id="Checkboxlist1_2" type="checkbox" name="Checkboxlist1$2" value="green" /><label for="Checkboxlist1_2">Green</label></td>
</tr>
</table>
Create a CheckBoxList and set the horizontal layout property:
<asp:CheckBoxList ID="cbl" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>Red</asp:ListItem>
<asp:ListItem >Blue</asp:ListItem>
<asp:ListItem>Green</asp:ListItem>
</asp:CheckBoxList>
More info:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkboxlist.repeatdirection.aspx
You have to change the trs display property: http://jsfiddle.net/Fw3fz/4/
#Checkboxlist1 tr{
display:inline-block;
margin-right:20px;
}
Or, use float: http://jsfiddle.net/Fw3fz/10/
#Checkboxlist1 tr{
float:left;
margin-right:20px;
}
If you want some space between the checkboxes and the labels, add this snippet:
#Checkboxlist1 tr label{
margin-left:5px;
}
However, it's very uncommon to display table rows inline or to float them. If possible, change the HTML structure.
#Checkboxlist1 tr {
float: left; // or diplay: inline-block
margin-right: 15px;
}
#Checkboxlist1 td label {
margin-left: 5px;
}
DEMO
If you are using ASP.NET Framework 4, you can check following properties:
CheckBoxList.RepeatDirection Property:
Gets or sets a value that indicates whether the control displays vertically or horizontally.
CheckBoxList.RepeatLayout Property (to get rid of table layout)
Gets or sets a value that specifies whether the list will be rendered by using a table element, a ul element, an ol element, or a span element.
Either put them in different cells but in one line (tr), or lose the table and use css float.