Build a form Contact us by EMAIL me form I uploaded it to my server, and I want to change the CSS file the error location (when you click on the submit button, then all fields not filled properly marked an error - red) My question is simple: How do I can change the CSS file so that the error diaphragm on the left and not on the right? Thank you!
The form is in this link: http://lawb.co.il/HTMLPage.html
the CSS file is in this link: http://lawb.co.il/contact_us.css
You can see example for what I want here:
insted of this
Is is possible?
Add promptPosition:"topLeft" in contact.js:
EMF_jQuery("#emf-form").validationEngine({
validationEventTriggers:"blur",
scroll:true,
promptPosition: "topLeft"
});
And these lines in CSS:
.formError {
...
left: 360px !important;
...
}
.formError .formErrorContent {
...
width: 310px !important;
...
}
formError .formErrorArrow {
...
left: 70%;
...
}
It should work.
try this
align:left;
or
float:left;
Related
I'm a new one in css and can not to set up the max-width of my confirmation dialog properly. Here my code of calling dialog:
this.$mdDialog.show({
content: longText,
ok: 'OK',
cancel: 'CANCEL'
clickOutsideToClose: true,
});
The problem is that my longText doesn't carry and my dialog is very stretched horizontally.
I tried to add style.less locally and determine max-width like this:
.md-dialog {
max-width: 300px;
}
But there is no changes.
Could some one help me?
To achieve what you want you should use this way:
.md-dialog-content {
max-width: 300px;
}
you can try
md-dialog{
max-width: 300px;
}
because md-dialog is not a class it is directive which angular material predefine
I've been working on a pyramid website and I'm having a problem. I have a textbox inside my td, and if the text is long, it cannot be seen already. Here is what it looks like:
As you can see the level1 portion there, if I have a name like someLongnameforever, it will only be seen like this:
Is there a fix for this using css or any trick? I am using bootstrap by the way.
If you want to see my table code, click this. I'm using twig templating also.
For now I am already using a textarea for the level 1 fields.
Why don't you try ellipsing if it exceeds the maximum width available to it. And maybe try showing the complete name in a tooltip?
That would keep the table clean too.
Demowrap word to new line if there is overflow
button{
word-wrap:break-word;
white-space: normal;
}
You can add an overflow: scroll; to allow scrolling or you could add an ToolTip attribute so when users however they will see the full content.
I guess you can do something like this.
You should be able to change the example to fit your needs.
HTML
<div id="fitin">
<div>Lorem im Lorem im Lorem im Lorem im</div>
</div>
JS
$(function() {
var $fitin = $('#fitin');
var $fitindiv = $('#fitin div');
$fitindiv.css('font-size', '1em');
while( $fitindiv.height() > $fitin.height() ) {
$fitindiv.css('font-size', (parseInt($fitindiv.css('font-size')) - 1) + "px" );
}
});
CSS
#fitin {
width: 100px;
height: 30px;
border: 1px solid black;
overflow: hidden;
font-size: 1em;
}
Check the fiddle
I'm trying to put unique icons onto a custom tabs created using shortcode ultimate, but nothing seems to be working. It may be something obvious that I'm missing. I made three custom css classes that I've attached to each tab. In the css, each class has a unique icon image. Nothing appears in the tab (I don't want any text in the tab, just an icon).
My shortcode:
[su_tabs]
[su_tab class="my-custom-tab-1" title=""]
some content
[/su_tab]
[su_tab class="my-custom-tab-2" title=""]
some content
[/su_tab]
[su_tab class="my-custom-tab-3" title=""]
some content
[/su_tab]
[/su_tabs]
My CSS:
.su-tabs.my-custom-tab-1 div.su-tabs-nav .su-tabs-current { background-image: url('http://livedemo00.template-help.com/wordpress_53881/wp-content/themes/theme53881/images/icon1.png') }
.su-tabs.my-custom-tab-2 div.su-tabs-nav .su-tabs-current { background-image: url('http://livedemo00.template-help.com/wordpress_53881/wp-content/themes/theme53881/images/icon2.png') }
.su-tabs.my-custom-tab-3 div.su-tabs-nav .su-tabs-current { background-image: url('http://livedemo00.template-help.com/wordpress_53881/wp-content/themes/theme53881/images/icon3.png') }
.su-tabs.my-custom-tab-4 div.su-tabs-nav .su-tabs-current { background-image: url('http://livedemo00.template-help.com/wordpress_53881/wp-content/themes/theme53881/images/icon4.png') }
Any help is appreciated.
If you want to apply a background to the tabs, then use selectors like this -
.su-tabs-nav .my-custom-tab-1 {
background: url(..your url..);
}
.su-tabs-nav .my-custom-tab-2 {
background: url(..your url..);
}
.su-tabs-nav .my-custom-tab-3 {
background: url(..your url..);
}
Hello there, I just created this datepicker thingy which turned out pretty cool except that it creates some really annoying and weird looking white space below the divs when empty and appears higher, see the fiddle > http://jsfiddle.net/VtKkM/2/ Any help is greatly appreciated!
Haven't figured out the problem as of yet, but it seems that it doesn't like it when the spans are empty. One workaround, at least for now, is to replace your blank options with just a space ( ) so that there's still the illusion that it's empty but the spans still technically contain a value. This may not be a permanent solution, but it'll work for now.
To elaborate:
Line 2 of your js would go from
var days = '<option></option>',
to
var days = '<option> </option>',
and line 32 would go from }).parent().prepend('<span></span>'); to }).parent().prepend('<span> </span>');
Its for line height and your font size of page you can fix it by
Add line height style to your datePicker class like this:
line-height: 8px;
or change font-size like:
font-size: 10px;
Edit:
and for moving when you pick a some value from select you should set your span to position: absolute;
.datePicker > div > span{
position: absolute;
}
Edit2:
or you can set space value in first time in your span, change <span></span> to <span> </span>
Edit3:
i changed this lines to add space in initial between span tag, check values that add onload datepicker:
$.each(picker.children(), function () {
$(this).wrap('<div>').change(function () {
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val() - 1]);
} else {
$(this).prev().html($(this).val());
}
}).parent().prepend('<span> </span>');
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val()]?months[$(this).val()]:" ");
} else {
$(this).prev().html($(this).val()?$(this).val():" ");
}
});
Edit 4:
and css way, you can fixed it by add padding style to empty span like this:
.datePicker > div > span:empty{
padding:5px;
}
.datePicker > div {
display:inline;
position:relative;
min-width: 18px;
min-height:28px;
padding:0 5px 0 5px;
}
Just change display:inline-block to display:inline
The part about it appearing high I could fix with giving .datePicker select a 5px margin.
i am using toggle buttons in my application, i would like to set the backgound-color when the button is pressed.
how can i know what is the proper attribute?
and in general is there any place that i can know which CSS attribute has which effect on the HTML element?
If you are using GWT ToggleButton, then you may
import com.google.gwt.user.client.ui.ToggleButton;
final ToggleButton tb = new ToggleButton( "my button text" );
if (tb.isDown()) {
tb.addStyleName("pressed"); // or tb.setStyleName("pressed");
}
and in your css file:
.pressed { background-color: blue; } /* any color you want */
Another way - to change just background of this given button:
tb.getElement().getStyle().setProperty("background", "green");
I know GWT is similar to jQuery, but I've never used it... with jQuery I'd do this (I wasn't sure what kind of button tag you were using, so I included both):
CSS
input, button {
background-color: #555;
color: #ddd;
}
.clicked {
background-color: #f80;
}
HTML
<button type="button">Click Me</button>
<input type="button" value="Click Me" />
Script
$(document).ready(function(){
$('button, :button')
.mousedown(function(){ $(this).addClass('clicked') })
.mouseup(function(){ $(this).removeClass('clicked') })
.mouseout(function(){ $(this).removeClass('clicked') });
})
and in general is there any place that i can know which css atribute has which effect on the HTML element?
Yes, http://www.w3schools.com/css/ has most of what you will probably need. Check the left column for the CSS-property you're looking for.
Regarding your first question, I you can just use the btn:active, btn:hover, btn:visited properties. (i.e. your button has the class/id 'btn'.)
Good luck