Jump to content
Banner by ~ Ice Princess Silky

Bleeding Textboxes


Dark Qiviut

Recommended Posts

For at least a month (since transitioning my computer to Yosemite), the textboxes have been bleeding out of their containers. As a result, it becomes impossible to check anything underneath (including creating polls).

 

Here's an example:

post-2227-0-21778300-1445789240_thumb.png

 

I don't know the cause of the problem.

Edited by Dark Qiviut
  • Brohoof 1
Link to comment
Share on other sites

@Dark Qiviut:

  • Which browser are you using currently?
  • Are you using any addons while you are creating Topics and/or browsing MLPF?
  • Also, have you tried clearing the browser's caché?
  • Brohoof 1
Link to comment
Share on other sites

 

 

Which browser are you using currently?

Firefox 41.0.2.

 

 

 

Are you using any addons while you are creating Topics and/or browsing MLPF?

Other than AdBlock, no.

 

 

 

Also, have you tried clearing the browser's caché?

Eeyup! Doesn't work.

  • Brohoof 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 3 weeks later...

I'm not sure if your Mac offers this yet, but can you change from Yosemite to El Capitan? I tend to update my Mac as soon as a new operating system gets released. I'm not sure if that would make a difference, but all I know is that El Capitan is a free update.

  • Brohoof 1
Link to comment
Share on other sites

Odd, I use Firefox and I don't have this problem. It might be something with your OS not being too friendly with Firefox.

  • Brohoof 1
Link to comment
Share on other sites

  • 3 weeks later...

@@Lightwing, @@PrincessWubsy, @@Odyssey, @@Jokuc,

 

Since this semester, I've been using the Inspect Element tool on my Firefox browser to try fixing it.

 

What I noticed was this:

<li class="ipsField ipsField_primary">
    <label for="entry_title" class="ipsField_title">Entry Title</label>
       <p class="ipsField_content">
          <input id="entry_title" class="input_text" size="70" maxlength="150" name="EntryTitle" value="" tabindex="1" type="text">
       </p>
</li>

This is the html for the list item inside the unordered list. There's a main input box for the blog title as well as the classes and ID's for the paragraph and input, respectively.

 

As a result, I went after the html with the Inspect Element tool for my Firefox.

 

First, here's the css for .ipsField_content within .ipsForm_vertical:

.ipsForm_vertical .ipsField_content {
    margin-top: 3px;
}

I tinkered to contain the input, one of which was adding overflow-x: hidden and a margin.

 

No dice.

 

So, I went after the css of the input inside the unordered list and found this:

.ipsField_primary input {
    font-size: 18px;
}

This is where it caught my attention. I don't know if your css has it, but the css here shows no set width. It might be automatic on Chrome, Safari, and other Firefoxes, but mine doesn't. The lack of width value is why the textboxes bled.

 

So, with the Inspector, I changed it to this:

.ipsField_primary input {
    font-size: 18px;
    width: 100%;
}

By adding "width: 100%;", the input box is now within the content.

 

Unfortunately, the border of the input textbox touches the edge of the div. To fix that, I went back to the field content encompassing the textbox and added this:

.ipsForm_vertical .ipsField_content {
    margin-top: 3px;
    margin-right: 10px;
}

Here's the before:

post-2227-0-56951000-1450980942_thumb.png

 

Here's after I added the extra css:

post-2227-0-14222900-1450981004_thumb.png

 

Keep in mind, Inspect Element is only for the current viewing. The css resets on my browser once I leave or reload the page. If this becomes permanent, you must add the values in yourself, and I'm not familiar with how you lay out your css via IP.B.

 

For adding the tags for topic discussions, I went after the input class here:

<p class="ipsField_content">
<input autocomplete="off" class="input_text" size="50" value="" name="ipsTags" id="ipsTags" type="text">


	<br><span class="desc lighter">You may add up to 10 tags.</span>


<script type="text/javascript">
	document.observe('dom:loaded', function() {
	url_ipsTags = ipb.vars['base_url'] + 'app=core&module=ajax&section=tags&do=find&meta_app=&meta_area=&meta_parent_id=&secure_key=' + ipb.vars['secure_hash'] + '&autocomplete=1&exclude=&find=';
	autocomplete_ipsTags = new ipb.Autocomplete( $('ipsTags'), { multibox: true, url: url_ipsTags, templates: { wrap: ipb.templates['autocomplete_wrap'], item: ipb.templates['autocomplete_item'] }} );
	autocomplete_ipsTags.options.min_chars = 2;
});
$('ipsTags').value = '';
// $( "ipsTags" ).tagify( {"isOpenSystem":true,"isEnabled":true,"minLen":2,"maxLen":30,"minTags":0,"maxTags":10,"predefinedTags":["Spoiler","Mega Thread"],"fieldId":"ipsTags","prefixesEnabled":false,"meta_app":"forums","meta_area":"topics","meta_parent_id":3,"lang":{"tag_add_link":"Add a tag","tip_text":"Type tags separated by commas..."},"forceLowercase":"0","existingTags":false} );
</script>				
</p>

And added "width: 100%;" for the css there, too, like this:

.input_text, .ipsTagBox_wrapper {
    padding: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #848484 #C1C1C1 #E1E1E1;
    background: #FFF none repeat scroll 0% 0%;
    border-radius: 2px;
    width: 100%;
}

The right margin values still apply.

 

Hope this helps. ^_^

 


 

ETA: Another suggestion for the textboxes for the thread tags:

li.ipsField.tag_field input#ipsTags {
	width: 100%;
}
Edited by Dark Qiviut
  • Brohoof 3
Link to comment
Share on other sites

  dowload stylish addon on your browser and  add the missing css with that  

Greasemonkey would work as well but the problem shouldn't be there in the first place...

  • Brohoof 2
Link to comment
Share on other sites

I'll be personally looking at the template file for that page on the 26th. I'll let you know what I find and if I can resolve it myself.

  • Brohoof 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Join the herd!

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...