I have a front end posting with modal box and has a problem. I don't know how to explain this problem because I still learn english and it's hard for my but I will try, also i make screenshot maybe you will understand better from that
In my modal box i have a textarea for title post and has class="form-controll" when you drag of textarea You can not see well meaning override modal box.
I make screenshots.
I want to know what I need to modifiy in css for this.
Thanks and again sorry for my english.
I fix it with this:
<div class="modal-body">
<textarea class="form-control col-xs-12" rows="3"></textarea>
</div>
and this:
.modal-content textarea.form-control {
max-width: 100%;
}
Related
I have a problem that I've never seen before: a plain old regular html textarea that resizes on focus.
Even though I set the height of the desired area, it still resizes to something either smaller or larger with no obvious correlation. I've tried to remove all my classes on the item with no luck.
Is this is bootstrap thing?
and how do i fix it?
link to short video of the problem:
https://www.dropbox.com/s/7329y5a96ixajl4/18-34-46.wmv?dl=0
<textarea style="min-height: 150px; height: 150px;
max-width: 100%;" type="text" name="jobDesc"
ng-model="req.jobDesc" placeholder="Write a description for the assignment">
</textarea>
Try using rows Attribute:
<textarea rows="4" >
This should force the text area to only show 4 lines, or 5, as you desire.
</textarea>
Anyway, I think you can check the size of your text area or the
calculated properties, clicking on "inspect" on your browser (for
example chrome). Then click on Styles/Computed and you will see the
styles you are applying.
An image of the properties:
EDIT:
I´ve tried to make a fiddle to think about which property is breaking it,
try it. It it seems you need to look for a textarea:focus or similar
inside your css`s :)
Changed snippet to show how also padding property can affect the size
#editor1 {height: 10px;}
#editor1:focus {height: 20px;}
#editor2:focus { padding-bottom: 10px;}
<textarea id="editor1" placeholder="Check it!!"></textarea>
<textarea id="editor2" placeholder="Check it!!"></textarea>
Improved with comment from OP after solving:
I did actually manage to find out what caused the problem. Hidden in one of the js files was some legacy code to manage resizing of textareas. As some of the pages where loading in templates on top of the actual page(in a aside/modal) the code wasnt running correctly. Thank you for taking the time. It led me to my
Since I can't use margin-bottom in html email. What is another positioning thing I could use. I have already uses margin-top, padding-bottom, and padding-top.These all haven't been useful at any in getting what I want to happen.
So I have 2 images. I want to place a buy now button on the bottom right hand corner of an image in order to only be able click on the buy button. What should I do? Any help is appreciated.
You can try with this:
Html:
<div class="box">
<img src="your-image.jpg" alt="">
Click here
</div>
Css:
.box{
position: relative;
}
.box a{
position: absolute;
right: 0;
bottom: 0;
}
I hope it helps you
Use
<body margintop="0" marginleft="0" marginright="0">
A reliable way to create vertical padding/margin in HTML email is to use the following:
<div style="mso-line-height-rule:exactly; line-height:15px; font-size:15px;"> </div>
This will give you a vertical space of 15 pixels; adjust and duplicate as necessary.
I can't tell how this works in the context of the rest of your question, but I'll trust you will know what to do with it.
Can you post the code that you currently have to help take the guess work out of what you need. Because the answer could be as simple as what Radavel mentioned or it might just need something like
align="right"
or
style="float:right"
But that depends on how your code is setup to determine what might be the right answer for you.
Also researching into what code to use and not to use would be helpful as well since not all email providers have the same setup when it comes to viewing a email. What might look great in one might not look that grand in another.
In my example i have a fixed input data-spy="affix" that is shifted downwards by 90px because of the parent <div class="container" style="margin-top:80px">.
So the only thing that should scroll is the text. This actually works!
My problem is that the text that is scrolled behind the input is visible and i would like to hide it!
I tried to add a white box before the input but all my tries where not really successful!
So i hope you can help me! Thanks
http://bootply.com/113734
in fact #nico-o already gives the answer here. Wrap your input inside a div and apply the affix on this:
<div style="background-color:white;padding-top:80px;" data-spy="affix" data-offset-top="1">
<input class="form-control" id="searchterm" name="tags" placeholder="Input" type="text">
</div>
Doing this you will have the same kind of problem as described here: Bootstrap 3RC1 + Side Panel + Affix.
To solve this add:
$(document).scroll(function(){
$('.affix').width($('.container').width());
});
See: http://bootply.com/113811
#nico-o also suggest a scrollable Text-container, see http://getbootstrap.com/javascript/#scrollspy-examples for an example
I am making a site that will give some code examples . So, I wish to show with proper indentation and also with different colors if possible.
Can anyone suggest me some way to do it ??
Thanks :)
You can use the SyntaxHighlighter script.
You can use it in this way directly.Also you can change it however you want
<div style="height: 200px; width: 300px; overflow: auto;"><pre>CODE
GOES HERE</pre></div>
<div id="broadcast">
<div class="broadcast_element">
<div class="broadcast_username"><?php echo $row[0]?>:</div>
<div class="broadcast_broadcast"><?php echo $row[2];?></div>
</div>
</div>
Simplified CSS:
.broadcast_element
{
width: 100%;
}
\#broadcast
{
width: 200px;
}
The problem is: The php script echoes the data in a straight line causing it to the overflow from the div (broadcast).
word wrap: I hate IE, so no way i'm using that.
overflow: the properties do not provide what i want to achieve.
The question simply - I'm looking for a solution that'll solve this overflow problem once and for all. I'm looking for something general i can apply in any similar case.
My thoughts - Being a noob the only way i can think of is using javascript to insert a <br/> after every 200px of data? I know thats sad :P.
Thank You.
Did you try those CSS properties :
White-space
Word-wrap
Overflow: hidden