I'm having some trouble with a Link Button generating incorrect mark up.
It should generate something like this:
<div style="margin-top: 5px; width: 150px; margin-left: auto; margin-right: auto;">
<a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
<div>
<span class="border top">
<span class="border">
</span>
</span>
<span class="icon cancel">
Cancel
</span>
<span class="border bottom">
<span class="border">
</span>
</span>
</div>
</a>
</div>
Notice only one tag.
It ends up generating sometimes this:
<div style="margin-top: 5px; width: 150px; margin-left: auto; margin-right: auto;">
<a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
</a>
<div>
<a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
<span class="border top">
<span class="border">
</span>
</span>
<span class="icon cancel">
Cancel
</span>
<span class="border bottom">
<span class="border">
</span>
</span>
</a>
</div>
<a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
</a>
</div>
Notice now 3 (!) anchor tags.
It only happens on a specific server to a specific browser, server is running ASP.NET 2.0 on IIS 6 using Firefox 3.5 to access the page.
Update: I view the code using FF view source, no plugins installed, the document is supposedly XHTML 1.1 Transitional, but I don't think it validates since you can't have div tag inside anchor tags.
How are you seeing that markup? In Firebug? In the FF source viewer with TidyHTML installed?
What (X)HTML declaration are using using? HTML 4.1? XHTML Transitional? Strict?
The reason I ask, is that the <a> tag is defined as an inline element, so it is not legal to wrap it around a block element, such as a <div> tag.
The source you are seeing in FF has probably been corrected to handle this, by adding the additional anchor tags inside and at the end of the div tag.
How are you seeing that markup? In Firebug? In the FF source viewer with TidyHTML installed?
What (X)HTML declaration are using using? HTML 4.1? XHTML Transitional? Strict?
The reason I ask, is that the <a> tag is defined as an inline element, so it is not legal to wrap it around a block element, such as a <div> tag.
The source you are seeing in FF has probably been corrected to handle this, by adding the additional anchor tags inside and at the end of the div tag.
Nope, the View Source is as FF fixes it up - if you want to check this, you can install the ViewSourceWith plugin, and view the source in your NotePad of choice - I've noticed differences between these two.
Unlike ASP.NET 1.1, the BrowserCaps in ASP.NET 2.0 do recognise FF, Safari, etc, so the general output shouldn't be that different to what you see in IE.
Related
I am trying to utilize Bootstrap 4.2 Toast. I want the Toasts to show up on the upper right-hand side over the right sections of my site.
I tried the following markup as it shows in its boostrap example on the documentation, but I can't get it to show up.
<!-- Toasts -->
<div aria-live="polite" aria-atomic="true" style="position: relative;">
<!-- Position it -->
<div style="position: absolute; top: 3rem; right: 0;">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto">Toast Title</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Some Toast Body
</div>
</div>
</div>
</div>
Here is a fiddler with my complete markup, but can't seem to show up the toasts.
How can I show the toasts
This answer shows a Toast on the upper right. The original fiddle you created (before you edited the question) doesn't include Bootstrap JS.
From the Bootstrap docs...
"Toasts are opt-in for performance reasons, so you must initialize
them yourself."
So you need to init them like...
$('.toast').toast('show');
Also, when you include a absolute position element inside a relative position element (like in your fiddle) the absolute element is relative to the parent and therefore below the other content on the page. Remove the relative parent to make the absolute Toast relative to the entire page.
Demo: https://codeply.com/go/AVBr2zUcue
A sample form control taken from the Bulma CSS framework documentation works as expected using Bulma 0.7.2 (latest at time of writing).
However, when the form is put inside a standard html <details> tag, the height of the element changes, and some width (of the input?) changes, so that there's a visual glitch when hovering over the input.
What's causing this, and is there a style that can be applied to the <details> tag that would make the form element display correctly?
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
<br>
<br>
<details>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
</details>
Edit: as a more minimal example, the style is also wrong for a single <input class="input" type="text" placeholder="Find a repository"> element inside the <details> tag.
The reason this is happening is because the padding in the input and the button is calculated based on em's and since the input is inside a <details> tag, it must be interfering with the proportions somehow - See image below:
I'm not familiar with this framework, I'm not sure there would be a way to adjust the issue. In any case, the quickest workaround would be to target the input and button inside the <details> tag and add a static padding-top and padding-bottom of 0 to both the button and the input inside the <details> tag:
details .input,
details .button{
padding-bottom: 0;
padding-top: 0;
}
After that, I find that if you reduce the input max-width to 89% instead of 100% it amends the issue with the hovering:
details .input{
max-width: 89%;
}
I have a list group that holds a bunch of attributes, but when I clarify that the last element within that group hold a margin of 0, the output doesn't match.
The Salesforce HTML:
<aura:iteration items="{!v.IdeasList}" var="idea">
<li class="list-group-item">
<a href="{!v.ideaDetailPath + idea.Id }" class="anchorLink">
<div class="prodname">{!idea.Title}</div>
</a>
<div class="ideaInfo">
<span class="points">{!idea.VoteTotal} points </span>
<span style="padding-right:24px;">
<span class="status">
{!idea.Status}
</span>
</span>
<span class="createdDate"><ui:outputDate value="{!idea.CreatedDate}"/></span>
<!--span class="slds-avatar slds-avatar_circle slds-avatar_small">
<img src='{!idea.CreatorSmallPhotoUrl}'/>{!idea.CreatorName}</span>
<span class="slds-text-title_bold">
<a class="profileName" href="javascript:void(0)"
id="profile-link"
data-createdByValue="{!idea.CreatedById}"
onclick="{!c.openProfileWindow}">
{!idea.CreatorName}</a></span-->
<a class="slds-text-title_bold profileName" id="profile-link" data-createdByValue="{!idea.CreatedById}" href="javascript:void(0);" onclick="{!c.openProfileWindow}">
<span class="slds-avatar slds-avatar_circle slds-avatar_small slds-m-right_x-small">
<img src="{!idea.CreatorSmallPhotoUrl}"/>
</span>{!idea.CreatorName}
</a>
</div>
<div class="slds-border_bottom">
</div>
</li>
</aura:iteration>
The Salesforce CSS:
.THIS .list-group-item {
font-size: 12px;
list-style: none;
width: 100%;
margin-bottom:24px;
}
.THIS .list-group-item:last-child{
margin-bottom:0;
}
Does that mean pseudo elements (specifically last-child in this case) don't work in Salesforce Lightning CSS?
It seems that the only thing that works is :nth-last-child(2) - because for some reason, :last-child doesn't acknowledge that the last item is actually the last item.
I did a search within the HTML to check that there was no other element after the element I was hoping to edit via CSS, but there wasn't. Seems as though this is a salesforce bug? Anyway,s :nth-last-child(2) worked instead of :last-child
Please check: http://test.internet.az.pl/panel/lost_password2.php
Link: "Powrót do strony logowania Powrót do strony logowania" is properly visible on Firefox, Chrome etc. while it's not visible on IE8 (it's way higher).
How to correct this ?
<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px">
<a class="a" href="index.php">
<span>Powrót do strony logowania</span> <img alt="Powrót do strony logowania" src="gfx/arrow.png" />
</a>
The issue came because of the floating element.
Instead of this
<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px">
Use like this.
<div class="lost_password" style="margin-top:-27px; margin-left:135px">
I need to achieve something like this:
<a style="display:block;" href="#">
<div style="float:left;display:block;">Left</div>
<div>
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
</a>
Basically a button with 2 columns and the right column having 2 rows.
It shows up correctly in modern browsers with inline/block support but in IE6 and IE7, whenever I hover the left div (with float) it'll display as the 'select' text icon instead of the hand icon (i believe once float, block will be cancelled and displayed as inline). Is there any way I can achieve this without using an image as a whole? I need it to be text because it's important for SEO and retina displays.
:( :(
<a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
<div style="float:left; width:150px;">Left</div>
<div style="float:right; width:150px;">
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
<div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>
To avoid text cursor add this CSS -
a div{cursor: pointer;}
Demo - http://jsfiddle.net/ZhKmr/4/