Can't believe how much I'm struggling with this simple task. What is the correct way to place a jQuery Mobile data-icon on an element that the user does not interact with? What if I want a paragraph that just displays a message to the user like "No suitable lots were found" and I want that element to have the "info" icon?
I know this won't do it, but something like:
<p data-role="content" data-icon="info" class="my-message-block">No suitable lots were found</p>
Not a link. Not a button or checkbox or .... Just a plain old box displaying a message? All examples I see are an interactive element and not a static element.
Thanks in advance.
I do this by adding a span with some CSS as follows:
<p data-role="content" class="my-message-block"><span class="ui-icon-info ui-btn-icon-notext inlineIcon"></span>No suitable lots were found</p>
Then the inlineIcon class has these rules to place the icon:
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
The right margin controls the space between the icon and the text.
If you prefer a black icon with no gray disk behind it:
<p class="my-message-block"><span class="ui-alt-icon ui-icon-info ui-btn-icon-notext inlineIconNoDisk"></span>No suitable lots were found</p>
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent;
}
ui-alt-icon on the span changes the icon color and background-color: transparent; on the :after pseudo element hides the disk.
Here is a DEMO
Related
On a hover state I'm trying to remove the background color of an md-button when I hover, but I'm not able to affect it.
I'm using Material 2
In my html I have the following:
<div class="case-nav-container">
<div *ngFor="let item of nav">
<a md-button
routerLinkActive #rla="routerLinkActive"
class = "case-button"
[class.active]="rla.isActive">{{item.display}}</a> <br>
</div>
</div>
In my SCSS I have:
a.case-button{
min-width: 200px;
text-align: left;
&:hover{
border-left: solid blue 6px;
background-color: none;
}
}
My question is how do I remove the bg-color of the button?
The background color comes in the form of a focus overlay div. This will remove it,
template:
<a mat-button class="no-hover">Basic Button</a>
css:
.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
background: none;
}
demo:
https://stackblitz.com/edit/angular-material2-issue-dyck3s
I think you need to increase the specificity of your SCSS. Try .case-nav-container a .case-button. Your SCSS will need to address the element you are modifying more specifically than the Angular Material code is. In some instances where increasing specificity isn't practical for an element a !important SCSS attribute will work as well to override the Angular Material default background color.
I have html content in my JSSOR slides, and I would like to add a link to the content. Although the link displays fine I cannot click on it in the slide.
Is it possible to add a link to the content? (I don't want to make the entire slide clickable).
I tried increase the z-index to 9999 but that didn't make a difference...
<a style="display: block; position: absolute; top: 0px; left: 0px; width: 150px; height: 30px;" href="url">link</a>
I am using simple form for bootstrap in my rails app. I am trying to figure out how to style radio buttons in my form. The radio buttons for Yes and No are right on top of each other (and very close to the button field). I'd like to add padding to each segment (so space in between the button and the label and then more space between the two options.
I have tried this (to see if I can even force CSS styling into my form. It isn't working at all (the text isn't even changing the font-weight - which is my test to see if it works).
<%= f.collection_radio_buttons :project_image, [[true, 'Yes'] ,[false, 'No']], :first, :last, {}, {:class => "create project"} %>
I have a css.scss file for projects with this class defined:
.createproject {
font-weight: normal;
padding-right: 20px;
}
My first question is how to I add CSS styling to Simple Form components (yes I have read the Simple Form documentation and I can't figure out the answer from that) and then, how do I add padding to each component of the attribute (so there will be padding between the button itself and the label and then more padding between the yes and no options)?
Thank you
First, change your CSS class from 'create project' to 'create-project'
Then try something like this:
.create-project {
font-weight: normal;
padding-right: 20px;
input {
margin: 5px 5px 0px 5px;
}
label {
margin-right: 20px;
}
}
To style just the radio buttons (and not all the inputs and labels in the form), you can do something like this:
.create-project {
font-weight: normal;
padding-right: 20px;
input[type=radio] {
margin: 5px 5px 0px 5px;
}
label.radio {
margin-right: 20px;
}
}
It sounds like you might not be using your browsers CSS editing tools to adjust element styling (F12, or right click -> inspect element). This tool should give you insight into how simple_form_for structures the DOM.
Your class name in your form element is "create project", but the CSS class is createproject. Have you tried removing the space in the former?
One of my service pages needs inner tabs.
I already use regular jQuery UI Tabs in the page and I would like to use a different styling for the inner tabs.
Many popular sites use inner tabs differently from the main tabs by using simple text for the tabs titles, a long underline beneath the titles and a down arrow to represent the selected tabs. (image attached).
Do you know how to style jQuery UI Tabs to place a down arrow when the tab is selected?
Oh you want to know how to create the triangle using css3. Well you can do this using css, however, your example above isn't completely possible only using css. You can't have a border on the triangle as it is created using borders.
You create the downward triangle like this
.arrow { width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
I created what you are looking for in a fiddle.
http://jsfiddle.net/jessekinsman/Mn2sx/
However, if you want to create exactly what you have above, you could use custom icon font for the triangle then you could put a text-shadow on it and it could have a stroke.
However, that being said, if you want backward compatibility and the ability to add shadows and border to the triangle, an image is going to be your most compatible approach.
You could try adding some css to the class ui-tabs-active, something like what is shown on this website: http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/
Yes this is pretty easy by just styling the li element with the class="active"
Something like this
.tabs {
border-bottom: 1px solid #000;
}
.tabs li.active {
border-bottom: 1px solid #fff;
padding: 5px;
background: url(../images/arrow.png) 5px 50%;
}
The above is just sample code to give you an idea. You will have to tweak the image values to get the arrow image to line up properly.
However, I think your question might be more involved.
Are you asking how to style two separate jQuery tabs that exist on the same page with a different style?
If that is the case, I would recommend wrapping one of the styles in a element with a unique class or id. Like this:
<div class="new-tabs">
<ul class="tabs">
<li>Tab1</li>
</ul>
</div>
Then you can copy all the styling from the tabs.css (I can't remember the exact name of the css file at the present time) and add the class or id before all those rules. Like this
.tab li { something.... }
.new-tabs .tab li {something...}
Walaa, you now have a completely separate set of styles for the tabs within the container.
I would recommend working through the styles you just copied and deleting what you don't need.
How can i get the selected rows bean.id from h:dataTable in a backing bean?
f:ajax with f:param inside h:column didn't work for me.
Any suggestions (not using h:commandLink since i want the row to be chosen anywhere)?
Actually BalusC's comment is good enough, although i added a small improvement, so that h:commandLink will look like a h:outputText and that it will occupy the whole table cell so that you get the effect of clicking the cell anywhere (not only the text).
So what i did is adding a small CSS:
table tr td a {
display: block;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #000000;
width: 160px;
}