Display a $ sign beside the <input> on the same line - html

I have the following inside my asp.net core MVC view:-
<td>
$<input asp-for="g0" type="text" class="form-control tablecellcustom" disabled>
</td>
where I am trying to display a $ sign beside an <input> on the same line, but currently, my above code will show the $ on a separate line as follow:-
Any advice on how I can show them on the same line?

My guess is form-control has the style display:block; and width:100%
Remove the above styles or override it using custom css below
.form-control.tablecellcustom {
display: inline;
width: auto;
}
I think your code internally uses Bootsrap. This is a guess, might be wrong. If its internally using Bootstrap you can try using input group also.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input asp-for="g0" type="text" value="100000" class="form-control tablecellcustom" disabled>
</div>

I suspect your input is display block so you need to have a wrapper for your input and use flex box to achive this.
.form-control-wrapper {
display: flex;
align-items: center;
}
.form-control {
margin-left: 5px;
}
<div class='form-control-wrapper'>
$ <input class='form-control' />
</div>

The code you posted works as desired. Seems like you didn't post the CSS which is applied.
Anyway, make sure the input element has display: inline or inline-block to appear in one line with the "$" symbol before it.

You can put value in the input value.
You can set a variable in value, also concatenate the string with $ before putting it
You can also set a label for that input then style it in CSS to be in the same line
<td>
<input value={} asp-for="g0" type="text" class="form-control tablecellcustom" disabled>
</td>

Related

Exclude materialize css for some specific checkbox

I want to exclude materialize css for some items in my view. Eg: i dont want to display materialize styles to check box under table. It causes problems with my internal jquery library. Please check attached image. I gave below html content in my table > td. I want to display this as browser default checkbox.
In my application i am using http://materializecss.com
<div class="checkbox">
<input type="checkbox" class="filled-in dt-checkboxes">
<label></label>
</div>
To remove the Materialize styles from the checkboxes, you first need to understand how the Materialize checkboxes are created:
The "real" checkbox is removed with opacity: 0; and some positioning
A "fake" checkbox is created with the help of the pseudo elements ::before and ::after on the <span> element
So all you need to do is hide the pseudo elements and make the real checkbox visible again. I created a class .reset-checkbox to demonstrate the effect:
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<form action="#">
<div>
<label>
<input type="checkbox" class="filled-in" />
<span>Test with Materialize</span>
</label>
</div>
<div>
<label>
<input type="checkbox" class="filled-in reset-checkbox" />
<span>Test with removed styles</span>
</label>
</div>
</form>
Pay attention to a higher specificity of the selectors here, to make sure that the Materialize styles are overwritten.

text-align: center; not working for Inputfields Bootstrap

I've got the following code that will allow the user to type the text from center. But when I edit the textbox with some text, the cursor moves to the right end for every character pressed. I'm using bootstrap 2.x, how do I fix it?
<input type="text" class="input-xxlarge" style="text-align: center;">
JSFiddle Link
You can remove the inline style and use text-center class instead :
<input type="text" class="input-xxlarge text-center" >

Style two html form text area/inputs on same page differently

I have two forms on my site but am struggling to style them differently.
I want all text areas/inputs on the website to have the same style except for one form.
So all forms on the site use this css...
input, textarea {
background-color:#eae7e7 !important;
}
How do I go about changing the background color on another form as per below?
<div class="form-group">
<input type="email" class="form-control input-sm" id="name" placeholder="Your Name">
</div>
.form-control input, .form-control textarea doesn't seem to work?
An easy way is to add an id to the form in question:
<div class="form-control" id="my-form">
Then, style the inputs in css like:
#my-form input {your-style:value;}
.form-control input, .form-control textarea
Seems that you have this kind of code :
<div class="form-control">
<input>
</div>
Your CSS selector should be like this :
input.form-control, textarea.form-control don't forget the `!important` when you apply the css property
Try:
input.form-control {
background-color: #000 !important;
}
You'll have to add !important to your css also in order to overwrite the styles applied to input, textarea. However, if possible, you should remove the !important altogether unless 100% necessary.

How align div to a form field?

Currently I have the following HTML code.
<div class="field">
<label>E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip"></div>
</div>
However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field.
How should I do this using HTML and CSS?
Here's what is looks like now:
http://jsfiddle.net/pEJMD/embedded/result/
This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.
You can set a fixed size to the label. Than push the div to the right with the size of the label:
<div class="field">
<label style="width:100px;">E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip" style="margin-left:100px;">
The quick brown fox jumps over the lazy dog
</div>
</div>
And the result.
Well, either you use a <table>, putting in one cell the <label> and in the other the <input>, or you use fixed widths/margins or paddings.
Solution 1: Table
Table solution
In this solution you use a table to hold the form. On column is for labels, the other column is for inputs. In this case you will have the tip in the input column, and it will align automatically with the input.
This has the pro to be working for flexible dimensions of your label/inputs. And tables are not always evil. Just remember that, if you want to keep your label aligned with the input, add a vertical-align:top to your CSS.
Solution 2: Fixed width
Fixed-width solution
In this solution you give a fixed width to your label, and move the .tip div using either margin, padding or left.
This will hold your layout in place, so be careful of extremely long labels!
You don't need an explicit width at all, nor tables; just use CSS tables (see my answer to this related question):
CSS
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
HTML
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/
Use margin-left:
Change:
<div class="tip" id="emailTip">
To:
<div class="tip" id="emailTip" style="margin-left:95px;">
DEMO
Learn more about the CSS margin property here.
You can give a height to the label, give a width to the parent div and float your tip. See the demo: http://jsfiddle.net/pEJMD/4/
Here you go: http://jsfiddle.net/4sJ2t/
You just need to give your label a fixed width, and then your tip a left margin
label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}

Break line after input without html markup

I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
I have viewed other questions similar to this, but aligning by row instead of by column.
You can wrap the labels around your inputs and display them as blocks:
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name" attribute.
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.
You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}