I have written a css file
.atleastTwoChars:after {
content: "2*";
float: left;
width: 16px;
height: 14px;
border: 0;
margin: 2px 3px 0px 3px;
color: red;
}
I have used like this
<nobr>
<input type="hidden"
name="ctl00$objContentPageTag$spzContactInformation$txt_sContactZipCode$objHidden"
id="ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_objHidden" value="0">
<input name="ctl00$objContentPageTag$spzContactInformation$txt_sContactZipCode$objTextBox"
type="text"
id="ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_objTextBox"
class="xqh_LookUpTextBox_Edit">
<span id="ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_spanImgMandatory"
class="atleastTwoChars">
</span>
</nobr>
JavaScript:
$('#ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_spanImgMandatory')
.removeClass("xqh_LookUpTextBox_ImgMandatory")
.addClass("atleastTwoChars");
$('img[id*="txt_sContactZipCode_imgMandatory"]').remove();
problem: content (2*) should be displayed at the end of the text box but it is displaying at the start like this.
Remove the float: right; from your CSS: JS Fiddle demo.
Incidentally, according to W3, nobr:
[...is] entirely obsolete, and must not be used by authors...
Reference:
Obsolete features, at the W3.org
The float: left; will make it display at the start of the line. Perhaps you want to use display: inline-block; instead. Or just remove the float, height and width.
Related
I'm working on porting my Chrome extension to Edge for wider availability - everything seems to run fine, except for the styling of the checkboxes. In Chrome, the default styling is a blue color, which works well for the look of the extension, but now the checkbox is grey in Edge. I've tried a few different ways to set the color (in JS styling, HTML, CSS) and nothing seems to work - anyone have experience with styling the color of a checkbox in Edge?
Setting the color of the checkbox alone may not work. I recommend you to try to design a custom checkbox.
This is a simple example:
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 17px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 16px;
width: 16px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<h1>Custom Checkboxes</h1>
<label class="container">
check value
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
You can also modify its size or position according to your own requirements. For more details, you could also refer to How TO - Custom Checkbox.
Starting with version 93, Edge supports the accent-color CSS property.
The accent-color CSS property sets the accent color for user-interface controls generated by some elements.
Browsers that support accent-color currently apply it to the following HTML elements:
<input type="checkbox">
<input type="radio">
<input type="range">
<progress>
It can be used as follows:
input[type="checkbox"] {
accent-color: dodgerblue;
}
<input id="clickme" type="checkbox" checked><label for="clickme">Click Me</label>
The input number field doesn't render properly on ios. The number gets cut off at the bottom. It works for certain ios versions but not other ones. I'm stuck, please help
input[type=submit] {
text-align: center;
}
.page_q3 input[type="number"] {
height: 91px;
width: 110px;
color: #464356;
font-family: "Source Sans Pro";
font-size: 82px;
font-weight: 600;
text-align: center;
border: none;
border-bottom: 2px solid #464356;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<div class="page_q3">
<div class="div_minus"><img src="<?=$templateDir?>/images/minus.jpg" class="minus" data-quantity="minus" data-field="<?=$inputName?>" /> </div>
<div class="div_number"><input type="number" id="<?=$inputName ?>" name="<?=$inputName?>" value="<?=$_SESSION[$inputName]?>" placeholder="0" /> </div>
<div class="div_plus"><img src="<?=$templateDir?>/images/plus.jpg"
class="plus" data-quantity="plus" data-field="<?=$inputName?>" /> </div>
</div>
What it should look like
https://ibb.co/y8msSpL
what it actually looks like
https://ibb.co/rkbyPF5
You might want to try removing the border-radius and padding that are added by iOS by default:
.page_q3 input[type="number"] {
-webkit-border-radius: 0;
border-radius: 0;
padding: 0;
}
I am trying to have two divs (red boxes) side by side, and within each red box should be a bordered link.
One link is on two lines whereas the second link is on one line.
The links should lie at the center (horizontally and vertically) of each box, and the two boxes should also be perfectly aligned.
My code is the following. I had to set the links as "display: table-cell;" to keep the two boxes aligned. If you have another solution, i'm listening ^^.
* {
margin: 0;
padding: 0;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: inline-block;
}
#marketing-link, #prints-link {
color: white;
vertical-align: middle;
display: table-cell;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: .2em;
}
<body>
<div id="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
Thanks guys!
Ok, i found the solution.
Each link should be set to display as inline-block and should be contained within a div displayed as a table-cell.
This allows to center the link vertically.
The table-cells should themselves be contained within divs displayed as inline-blocks. This allows the red boxes to be aligned and to have a space between them.
Here is the final code:
* {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: table-cell;
vertical-align: middle;
margin-right: 20px;
}
#marketing-link, #prints-link {
color: white;
display: inline-block;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
padding: .2em;
}
<body>
<div class="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
</div>
<div class="container">
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
How to use input type button as ActionLink in MVC?
I used javascript to trigger the right action as below:
<script type="text/javascript">
function ButtonClick(Action) {
document.location(Action);
}
</script>
<input type="button" value="CLICK ME" onclick="ButtonClick('MyAction')" />
I am sure there is some better and straight way to accomplish this. Can any one help?
You can make link look like button using css:
Razor
#Html.ActionLink("Link As Button","Action",null,new {#class= "LinkButton"})
HTML
<a class="LinkButton" href="/Action">Link As Button</a>
CSS
.LinkButton {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
FIDDLE EXAMPLE
try this:
<input type="submit" value="Signup" class="btn btn-default btn-block" />
You should put this action link under a form tag.
I am using Tomahawk radio control for my design requirement. I was testing and wanted to ask if someone answer please.
<t:selectOneRadio id="myRadio" forceId="true" layout="spread" styleClass="field checkbox">
<f:selectItems value="#{personBean.genders}" />
</t:selectOneRadio>
<c:forEach items="#{personBean.genders}" varStatus="loop">
<span style="width:80px;" class="checkbox"><t:radio for=":myForm:myRadio" index="#{loop.index}" /></span>
</c:forEach>
HTML Generated
<span class="checkbox"><input type="radio" class="field checkbox" value="male" name="myRadio" id="myForm:j_idt35"><label for="myForm:j_idt35"> male</label></span>
Question:
I want to use class attribute on male which is rendered with the checkbox. Is it possible to render it separately?
I can apply style like below but I want Label to render separately to have more control.
.checkbox label {
display: block;
cursor: pointer;
font-size: 100%;
line-height: 150%;
margin: -17px 0 0 18px;
padding: 0 0 5px 0;
color: #222;
width: 88%
}
Looking at the source code no, it's not.
You could however style it with +:
input[type='checkbox'] + label {
display: block;
cursor: pointer;
font-size: 100%;
line-height: 150%;
margin: -17px 0 0 18px;
padding: 0 0 5px 0;
color: #222;
width: 88%
}
If would like to render it differently, you need to override HtmlRadioRenderer:
Put this in faces-config.xml:
<renderer>
<component-family>javax.faces.SelectOne</component-family>
<renderer-type>org.apache.myfaces.Radio</renderer-type>
<renderer-class>your-renderer-class</renderer-class>
</renderer>
Create a class your-renderer-class.java, override in in org.apache.myfaces.renderkit.html.ext.HtmlRadioRenderer and you are good to go.
Read the web on how this is done: JSF 2.0: How to override base renderers with custom ones?