I have to align my textarea on the right of the page. So I have my textarea code as follows.
<td align="right" >
<textarea style="align:left" id="scriptevalresult" name="scriptevalresult" cols="64" rows="4"></textarea>
</td>
Because I have align="right" for the , my codemirror editor is set to the right of the editor.
how to resolve this.
You can add a CSS rule like .CodeMirror { text-align: left; } to override this.
Related
I custom control has a text box and a icon next to the text box
return (
<div className="useFlex">
<TextInput></TextInput>
<div>
<Icon></Icon>
</div>
</div>
);
Style
.useFlex {
display: flex;
}
It works perfectly
But the issue is : when I use this custom control in my page, text box width is not getting expanded and it remains fixed.
<Table width="100%">
<tr>
<td><MyCustomControl> </MyCustomControl></td>
</tr>
</Table>
could you please tell me what I am missing here?
Try to add
.useFlex
{
display:flex;
flex-grow: 1;
}
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.
I have table with left text alignment. How I can only set the checkbox to be with right text alignment?
<h:panelGroup styleClass="table-right">
<h:selectBooleanCheckbox value="#{bean.method}"> </h:selectBooleanCheckbox>
</h:panelGroup>
.table-right {
text-align: right;
}
HTML output:
<tr>
<td>Security Question</td>
<td><textarea id="form:securityquestion" name="form:securityquestion" cols="60" rows="3" onblur="mojarra.ab(this,event,'blur',0,'form:securityquestionvalidator')"></textarea><span id="form:securityquestionvalidator"></span></td>
</tr>
<tr>
<td>Security Answer</td>
<td><textarea id="form:securityanswer" name="form:securityanswer" cols="60" rows="3" onblur="mojarra.ab(this,event,'blur',0,'form:securityanswervalidator')"></textarea><span id="form:securityanswervalidator"></span></td>
</tr>
Is there any solution to change just the cell alignment of the checkbox with CSS?
.table-right input[type="checkbox"] {
float: right;
}
This should align your checkbox to right
This css is not working
.table-right {
text-align: rigth;
}
because you have typo rigth is not word. It must be right.
Use correct typo as in place of [text-align: rigth]
.table-right {
text-align: right;
}
Try to paste styleClass="table-right" to selectBooleanCheckbox section. And Try to use !important rule on css.
Like: <h:selectBooleanCheckbox styleClass="table-right" value="#{bean.method}"> </h:selectBooleanCheckbox>
.table-right {
text-align: right !important;
}
ANSWERED!
I have some css overriding my tables but I don't know how to find it. I simply need images in my table to be at the top of the table. I use the code:
<td valign="top"><img src="../../../images/site/orangeBanner.png" alt="" width="259" height="62" class="imagePic"/></td>
But it does not work and produces this image of the orange bar in the middle. It should be at the top at the same height as "INSPIRE".
Here is the link to my full code: FULL CODE
Can anyone see why my valign="top" is not working? Is there anything to override the css?
Your td originally has vertical-align: middle specified inside the CSS. You can override it by using style="vertical-align: top;" inline inside the <td> tag containing your image. This should work perfectly:
<td valign="top" style="vertical-align: top;"><img src="../../../images/site/orangeBanner.png" alt="" width="259" height="62" class="imagePic"/></td>
This CSS rule is overriding it:
table, th, td {
vertical-align: middle;
}
Change it to top or add another class to that specific td tag.
Also you could add style tag to that td as follows:
style="vertical-align: top;"
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;}