I'm trying to make an input text look like exactly like a span. I want my user to be able to type text without noticing he's in a field.
I've almost succeeded, the last problem I've got is about the width of the input.
The input text is wider than the text it's replacing.
Here's the jsfiddle. (You may click on "Texte" to type yours).
Here's the interesting css part :
input {
background-color: transparent;
padding: 0px;
border: initial;
font: inherit;
margin: 0px;
}
Here is the idea try fixed width for the inputs
Demo : http://jsfiddle.net/nyitsol/eotd8p4n/17/
also you may try use the same width of the span for the input
$('span.width').width(); // returns a width value
using this get the width of the span and put it into the input box using JavaScript.
EDIT:
try this, if you want to grow the input based on text limit then you have to increase the size as well.
http://jsfiddle.net/nyitsol/eotd8p4n/25/
var input = $('<input onkeypress=\"this.style.width = ((this.value.length + 1) * 8) + \'px\';\" type=text>');
Related
I tried to develop ui table control with multi select option.
The label of each column is sap.m.Text:
But when i re size the column width, parts from the label text are hide:
It's all because of the "sapUiSizeCozy" class for the multi select option (the checkbox)
When i don't use this "sapUiSizeCozy" class the label text will be OK and wrapped, but, there will no be checkboxex:
I add this css class to the sap.m.Page control
Any help?
I need that the label will wrapped + the checkbox in each row
Thanks!
Edit:
Please see an example in:
Plunker
You can in view.xml file remove the:
class="sapUiSizeCozy"
And re size the Product Name" column to see that the column is wrapping
sapUiSizeCozy sets a fixed height to the table header. The label text is then verticaly centered by sapUiSizeCozy by setting lineheight to the height of the header.
This results in the effect that the label is wrapped but the second row is cut of by the fixed header height.
You can fix that with the following css (see Plunker):
<html:style>
.sapUiSizeCozy .sapUiTable .sapUiTableColCell>* span{
line-height: normal;
vertical-align: middle;
display: inline-block;
}
</html:style>
I'm trying to create a list in my NavMenuLeft control which has two controls per line, a label and an adjacent imagebutton (a typical delete cross)
I've played around with various CSS settings and it's defeating me right now. The below is the closest I can get to what I want so far - but it displays the first label, then on a new line it displays the 2nd label with the 1st image and so on until the final line is just the final image.
Here's the vb I'm using, which is working as expected so far (it's not finished, so I know for example all of the imagebuttons are going to perform the same action)
For n = 0 To ClickedTextArray.Length - 1
Dim SelectedMedia As New Label
SelectedMedia.Text = ClickedTextArray(n)
SelectedMedia.ID = ClickedTextArray(n)
SelectedMedia.CssClass = "leftsidebaritem SelectedMedia"
NavMenuLeft.Controls.Add(SelectedMedia)
Dim Delete As New ImageButton
Delete.ImageUrl = "\Images\DeleteRed.png"
Delete.ID = "DeleteImage_" & ClickedNameArray(n)
Delete.CssClass = "DeleteImage"
Delete.PostBackUrl = "\Main.aspx"
NavMenuLeft.Controls.Add(Delete)
Next
The referenced CSS classes:
.DeleteImage
{
height:9px;
float:right;
padding:0px;
margin:0px;
}
.leftsidebaritem
{
margin:0px;
padding:0px 5px;
}
.SelectedMedia
{
background-color: #5AABF2;
text-align: left;
font-family: verdana,arial,serif;
font-size: 10px;
color: black;
text-decoration: none;
display:block;
}
Can anyone help me out here? I'm not expecting someone to give me the answer, I want to understand the behavior I'm seeing and learn how to correct it.
I've pasted in what I think are the most pertinent pieces of code, but if more is needed then just let me know.
Thanks,
Chowie
Without a fiddle (or similar) I can only guess.
Looking at your code I would say you need to add your DeleteButton in before the label. When a float is used (left or right) the floated element needs to appear before the other elements it is being floated around. Essentially the CSS is floating your cross to the right of the next element, thus appearing on the next line.
So swap the two code blocks on the server so it goes Button > Label and report back.
I have a carousel in Bootstrap that displays 4 columns of thumbnails. Here's the carousel in question. If you move to the third page, you can see that the container increases in height in order to accommodate the contents of the thumbnail captions. I've been trying many things such as setting bottom margins, min heights, etc. to get the position of the "View Details" button constant across the entire carousel.
My question is what is the best way to approach this issue? I was thinking somehow making the thumbnail caption height a minimum of 4 or so lines, but I tried that(probably the wrong way) to no avail.
When I add
.caption h4 {
min-height: 2.2em; /* 2 lines as line-height is 1.1 */
}
I get all "View details" at the same level. However, that obviously doesn't treat the problem of captions being even higher. It only works if no caption is higher in fact. (But it IS ok, if you know for sure nothing is going to be higher than your multiple.)
So, instead I apply this little bit of CSS to put a limit from the other side.
.caption h4 {
max-height: 4.4em; /* 4 lines as line-height is 1.1 */
height: 4.4em; /* making it a multiple allows usage of overflow */
overflow: hidden; /* without cutting a line in the middle */
}
If you want to set a max-height equal to the height of the highest of captions dynamically, than you would have to use a little bit of JS:
(function(d) {
var captions = d.querySelectorAll('.caption h4'),
height = 0;
for(var i = 0; i < captions.length; i++) {
height = Math.max(height, captions[i].offsetHeight); // or clientHeight depends on you box model
}
var style = d.createElement('style');
style.type = 'text/css';
style.innerHTML = '.caption h4 { max-height: '+ height +'px; height: '+ height +'px; }'; // they don't need overflow as none of them can overflow;
d.getElementsByTagName('head')[0].appendChild(style);
})(document);
You add this script at the end of body, so that the DOM is already loaded (or somehow trigger it onload).
Important: this snippet is not supported by older browsers because of the querySelectorAll.
And that does the trick when I run it on your site.
I would like to be able to remove the "space" at the top and the bottom of a text inside of a container.
The div must be as close as possible to the text inside.
This text is the result of a input and can be changed by the user.
I guess that I should work with the line-height, but how?
Any advice would be greatly appreciated!
Used to line-height
.some_css{
line-height: px; // according to your text size of design
}
Use the CSS padding property to set space within the borders of the element:
padding:0;
Additionally as Terric has pointed out, if the child has a margin, remove it:
margin:0;
you can either use padding: 0' or try line-height:px
what padding do
with zero padding
and line height
As explained in the title, I needed to "dynamically" remove the space around text.
In fact, every fonts have different structure and don't render in the same way on every browser...
I found a compromise for this :
.text { line-height: 70% }
As explained here, if we use a percentage, we could apply any font-size to our text, the line-height will always be the same.
I can change the font-size with jQuery, the line-height will always be properly applied to the text and to the surrounding element.
I dealt with a case function for every font to apply a different line-height. In my case, this is a working solution...
var fontFamily = $( "input" ).val(); // Here, the font-Size is defined dynamically by the user... It could be Arial, Verdana, Comic etc...
var lineHeight;
switch ( fontFamily ){
case "Arial Black": // if the user has selected the arial black font...
lineHeight = "70%"; // we define a line-height that will be correctly applied to the text
break;
case "Verdana":
lineHeight = "78%";
break;
default:
lineHeight = "66%";
}
$( ".text" ).css("line-height", lineHeight); // we apply the line-height to the text...
Note that the user can also change the font-size with another select element...
Hope this could help...
I am doing a div that needs to display the whole content of a text field and adjust the text size dynamically so that it will not overflow.
To get an idea of the problem, look here http://sandbox.littlegraffyx.com/bible/
You can try entering verses at lower left text box using the format GEN 1:1 for "Genesis 1:1"
My problem is when I try to display long verses, they get truncated. I need to change the size based on how long the current text is. Is there some css that can be applied based on text field size?
As mentioned in the comments, it isn't possible to scale text based on the height of its containing element using pure CSS. But here's a small jQuery script I have used in the past when I needed to achieve what you want. It also adjusts the text size when the user resizes the browser window.
HTML:
<p class="quote">
Really long text goes here...
</p>
CSS:
.quote {
// The largest size to display text at.
font-size: 36px;
}
JS:
$(window).bind('resize',function(e){
scaleQuote();
});
function scaleQuote(){
var quote = $('.quote');
var winH = $(window).height();
// Reset font size.
quote.css('font-size', '');
// If quote is larger than viewport, reduce font-size until it fits.
while (winH < (quote.height())){
var fontSize = parseInt(quote.css('font-size'), 10);
quote.css('font-size', fontSize-1+'px');
}
}
scaleQuote();
Demo: http://jsfiddle.net/eCBmc/2/
You can try something like this. It will set input field to 10 character, and if it's bigger it increase it's size.
http://jsfiddle.net/4qjjf/1/
<html>
<body>
<textarea cols="10" rows="1" id="shit"
onkeyup="this.cols=this.value.length>10?this.value.length:10;"></textarea>
</body>
</html>