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" >
Related
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>
I am trying to hide checkbox, but still allow it to check when a div / button is pressed.
My code for the custom buttons are
<div class="checkbox flex item center-text bg-theme"
style="border: 1px solid #e3e3e3;border-radius: 12px;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" >
I've tried adding visibility:none and display:none; but this just doesn't work, when i click the buttons, nothing happens.
You might try to add opacity:0; in the css.
If you do not want the box to be directly checkable, use pointer-events:none in addition to that
Add display:inline-block on the first div so it will take only the minimum place and won't leave a big blank.
Then for the checkbox, using display:none works fine, I've added an onclick callback to log the state of the checkbox on each click on the label.
Try this sample:
<div class="checkbox flex item center-text bg-theme" style="border: 1px solid #e3e3e3;border-radius: 12px; display:inline-block;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" style="display: none;" onclick="console.log(this.checked)">
</div>
I loaded to my project nice input and my goal is to put inside this input the clickable button/a tag with float:right. Inside my local version of this, after clicking the button/a tag(question mark) animation start to happen, in jsfiddle example it doesn't even react. I don't have any ideas how to solve this problem, not changing the input source(design is cool).
https://jsfiddle.net/yoofu5me/5/
<div class="row">
<div class="col-md-6 col-md-offset-3">
<span class="input input--haruki text-center" style="margin-top: 10px;">
<input class="input__field input__field--haruki" type="text" id="input-1" />
<label class="input__label input__label--haruki" for="input-1">
<span style="font-size:14px;" class="input__label-content input__label-content--haruki">Give me the word </i></span>
</label>
</span>
</div>
</div>
The pointer-event: none; CSS rule is set on the parent element of the link (question mark).
Removing this rule solves the problem.
The problem is - you haven't linked the css with your html file.
The link that you've provided also has a CSS. Save that in styles.css. Then go to your HTML file - add this in tag
<link rel="stylesheet" href="styles.css">
This question already has answers here:
Clear icon inside input text
(18 answers)
Closed 6 years ago.
I am working on a webpage where I have a HTML Input Text element which is disabled onload.
I currently have a edit button next to the Input Container onclick of which I disable/enable the field.
<input type="text" name="TxtBx1" id="TxtBx1" value="This is the first Textbox" onblur="toggleState('TxtBx1')" disabled="true">
<img class="onInput" src="/Server_Status/images/edit.png" title="Edit" alt="Edit" height="15" width="15" onclick="toggleState('TxtBx1')">
Is there any other way in which I could place this icon in the input tab itself without overlapping the text.
img.onInput
{
position: relative;
left: -20px;
}
I tried using CSS with but the text gets underneath the icon which I do not want.
I am trying to get something like the "google search" add-on in firefox. Is that at all possible with simple input text and icon?
Thanks in advance :)
Update:
I want a button like in this image on text input. The icon is clickable and I want to trigger a JavaScript function onClick event.
Found the answer I was looking for: https://stackoverflow.com/a/6258628/2596762
You can create a CSS class with the background property and specify the location of your image, set it to no-repeat so it only displays the image once, then fiddle with the positioning by adding padding attributes and the like.
So for your CSS, something like:
.search {
background: url('image.jpg') no-repeat;
}
Then you just add it as the class attribute to your text box tag:
<input type="text" name="TxtBx1" id="TxtBx1" class="search">
background: url(user.gif) no-repeat scroll 7px 7px;
padding-left:30px;
try using this:
<div class="search-div">
<input class="search" type="text" placeholder="Search here" />
<img src="image-url" /></div>
here is css code:
.search-div{
border:1px;
border-style:solid;
border-color: lightgrey;
}
.search{
border:none;
}
This css will make div look like a text box and removes the outline of input text-box.
You can format the size of image link and also change the link address from "#" to the desired url.
Here is my code:
<p align="center">Do you want to play the game?</p><br>
<Input type = 'Submit' Name ='StartQuiz' value="Yes" align="center">
<Input type = 'Submit' Name ='LogOut' value="No" align="center">
The buttons are not in the center. Do I have to use CSS for this? I read on the net to just use the simple align tag.
How should I go about aligning these buttons to the center?
Align is deprecated on HTML5, so considered use CSS3 instead. The align attributte is to center the content and not the element itself.
The input element is inline-block by default, so, to center you need to put them inside a div as here:
<div style="text-align:center;">
<input type="text" />
</div>
This is cause the inline-block elements share the same line with other elements and you need to center all elements that share the same line. The div element is a block element that display alone in one line.
So you have another option to center an input, and you can set to "display:block;" as here:
<input type="text" style="margin:0px auto; display:block;" />
See: http://jsfiddle.net/T4f3W/
You should be using CSS for such styling. Rid of the HTML align attributes, add a wrapper, and center the text. Also note that the <center> tag and certain uses of align=center are deprecated as of HTML5.
<div>
<p>Do you want to play the game?</p><br>
<input type="submit" name="StartQuiz" value="Yes">
<input type="submit" name="LogOut" value="No">
</div>
And for your CSS:
div
{
text-align: center;
}
<p align="center">Do you want to play the game?</p><br>
<div style="text-align: center">
<Input type = 'Submit' Name ='StartQuiz' value="Yes" align="center">
<Input type = 'Submit' Name ='LogOut' value="No" align="center">
</div>
Define one div parent and give to text-align center in your css .
Hi Check to live demo http://jsfiddle.net/vdUEZ/
Remove p tag align center and give to one div
Updated Live demo http://jsfiddle.net/vdUEZ/1/
chuck the inputs inside a <center> tag. check out the live demo http://jsfiddle.net/xA2kS/
Your strategy should work if you move the <input> tags inside the the <p> tag and remove the deprecated align attributes in the <input> tags. Even if you were to use the align attribute in an <input> tag, the correct value would be "middle", not "center". Try this code:
<p align="center">Do you want to play the game?<br>
<Input type = 'Submit' Name ='StartQuiz' value="Yes">
<Input type = 'Submit' Name ='LogOut' value="No">
</p>
It's also possible (preferred, actually) to use CSS for centering.