Your sidebar is not hidden because your .page-content doesn't have a background. Put a background and add this CSS: .page-content{ background: #fff; height: 100%; width: 100%; } This way, you'll be able to slide it to then side afterward....
If you need an specific path I recommend to use Inkscape or Expression Design and try to make by yourself I have made in this case and from copying from Inkscape to Expression Design I have: <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Layer_1" Width="8" Height="9" Canvas.Left="0" Canvas.Top="0"> <Path Width="7.85446" Height="8.57578" Canvas.Left="-0.0522281" Canvas.Top="-0.100391" Stretch="Fill"...
use display: inline-block; for .block table.table-1 { width: 100%; } .block{ display: inline-block; } <table class="table-1"> <tr> <td align="center"> <div class="block" id="block-1" style="background: black"> <a style="color: #fff" href="myFunc()">text text text</a> </div> </td> </tr> </table> ...
Yes offcourse you can set, imageView.setBackgroundResource(R.drawable.style); Where R.drawable.style is you predefined style xml file in your resources....
php,css,wordpress,header,styling
In your stylesheet, you have: @media screen and (min-width: 59.6875em) body:before { ... } This body:before pseudo-element is what is creating that "div" on the left hand side of the screen. Note The psuedo element properties begin on line 3893 of style.css?ver=4.1.1....
Wrap your input in a div, add your unit as a sub element to that div and position it above the textbox. JSBIN: http://jsbin.com/mayurexoyi/1/edit?html,css,output HTML <div class="input_wrapper"> <input type="text" value="20" /> <div class="unit">KG</div> </div> CSS input { font-size:14px; padding:10px 25px 10px 10px; border:1px solid #CCC; } .input_wrapper { float:left; position:relative;...
turns out there's a BringToFront(); I was looking for bringToFront();...
I find that styling is about sherlocking your way through the framework. The what (almost always) comes from the widget's implementation. The where, I find is all over the place. I will try my best to explain the process through your particular use-case - AlertDialog's button(s). Starting off: You already...
Do you need keyframes? You could achieve the same result using transitions, like in this fiddle. #menubar { /* Menu bar styling */ width: 75px; transition: width 2s; } #menubar:hover { width: 100%; } Basically, you tell that the menubar should be at 100% when hovered, at 75px when idle,...
android,css,styling,look-and-feel
Android has own styles system thought properties. It's a little similar with css. <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#00FF00" android:typeface="monospace" android:text="@string/hello" /> You can read more in official documentation ...
Well, you can have, as Gene said, a label that's normally empty near the text field, but you can have it coloured like the background colour. This will make the user not able to see it, and when you detect something wrong, you can change the colour and add the...
I found a solution, although it's not perfect. A better answer would still be accepted. I used Snoopto determine that the element I'm concerned with is already a ContentPresenter. It contains a TextBlock, but for some reason that can't be styled (and it's shown in parentheses in Snoop's hierarchy). Here's...
In your ListView definition, set the HorizontalContentAlignment property to Stretch. <ListView Name="Worklist" Margin="5 2 5 5" BorderBrush="Transparent" Width="275" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch" Background="{StaticResource AppBackground}" SelectedIndex="{Binding WorklistIndex}"> ... </ListView> ...
You can use flexbox. support HTML <div id="container"> <div class="status"></div> <div class="status"></div> </div> CSS #container { width: 800px; height: 600px; margin: 0 auto; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; } .status { height: 100px; width: 100px; background: #efefef; margin-left: 2px; border: 1px solid #ccc; } http://jsfiddle.net/b9n3h1en/...
wpf,combobox,styling,controltemplate
If you are asking whether you can reference the original inner controls from the default ComboBox ControlTemplate in XAML, then unfortunately the answer is No, you can't... think about them being the private members of a class. If you don't mind using code, then you can use the FindName method...
c#,wpf,radio-button,styling,listviewitem
Ok, I have no idea what I've done, but I found the answer my tweaking the XAML in this blog post: I've ended up with this Style, I have no idea what it does, but it does what I want it to do. The full XAML for my ListView now...
javascript,jquery,radio-button,label,styling
$('input:radio').change(function() { // remove color properly on other radio buttons $(this).parents('tr').find('td label i').removeClass("on"); // add class for current label if ($('input:radio').is(":checked")) { $(this).parent().find('label i').addClass("on"); } }); Demo: http://jsfiddle.net/cos33qvk/2/...
var applyStyling = function (element, object) { return _.each(object, function (value, key) { // determine whether the key should be treated as an attribute or style if(element.hasAttribute(key)) element.setAttribute(key, value) else if (element.style.hasOwnProperty(key)) element.style[key] = value }) } Edit: modified answer based on OP comment var applyStyling = function (element, object)...
The simple answer, given the limitations you've provided (no SASS or other creepy stuff), is no, it's not possible with CSS.
close the achor tag HTML <a href="www.google.com">Google</a> <a href="www.google.com">Google</a> <a href="www.google.com">Google</a> http://jsfiddle.net/vasanthanvas/z569bm6w/...
Yes. Add padding and then fiddle around with the border radius until it meets your expectations: #navLink:focus{ padding: 10px /*here*/ border-radius: 30px; } ...
You can solve this by using the extend function in LESS. button, .button { // styles } input { &[type="submit"], &[type="reset"], &[type="button"] { // All styles from .button will also be available here. &:extend(.button); } } ...
class,styling,highlighting,onmouseover
1. You can try this: var links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; ++i) { links[i].onmouseenter = function() {links[i].style.color = '#e3FF85';}; links[i].onmouseout= function() {links[i]..style.color = '#0000ff';}; } You get the list of all links using getElementsByTagName('a') ('a' is tag name for links), and you can do...
use :before or :after Example 1: h2{ padding: 0 20px; text-align: center; } h2:before, h2:after{ content: ''; width: 150px; height: 1px; margin: 0 10px; background: #ccc; display: inline-block; vertical-align: middle; } <h2>title</h2> <h2>title title title</h2> Example 2 div{ text-align: center; } h2 { padding: 0 20px; position: relative; text-align: center;...
The gray rectangle is the so called row Header. By default the DataGrid turns on row and column header. You turn it off the row header by setting HeadersVisibility=Column So, you don't need a template to get that done....
DEMO You cannot choose selectors that are above the selection where you apply :not() An alternative is to first mention parent selection where your page id is applied then target the inner div's - Check the demo. CSS: section:not(.page-id-174) .et_section_regular, section:not(.page-id-174) #main-content{ background-color: #F5EFE5 !important } Note i am using...
One option (toggles the styles in the google example you reference when the features are clicked): changed this function: // When the user clicks, set 'isColorful', changing the color of the letters. map.data.addListener('click', function(event) { event.feature.setProperty('isColorful', true); }); to: // When the user clicks, set 'isColorful', changing the color of...
javascript,html,button,styling
Setting border: 0 removes any shadowy effect on chrome at least
It turns out that using word-wrap: break-word as a stand alone in a css file to get text to wrap in a tag will not work. The correct solution is to use a combination of max-width: XXpx stacked with word-wrap: break-word. This solution covers every browser I've tested it in....
jquery,parent,styling,fullpage.js
To quickly answer your question I will first provide solution. Although this is not best practice, and not helping you learn the right approach to design html structure and traverse the DOM in efficient and quick way, it will solve this specific problem. If it was all designed better, this...
The simplest way to do it is to just apply the styles to the map: var myOptions = { zoom: 3, minZoom: 3, center: map_center, styles: style_map, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions); proof of concept fiddle (unless you really want to have another map type) code snippet:...
Here is the view for your requirement <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/android" android:text="Android" android:padding="20dp" android:gravity="center" android:layout_gravity="center" android:drawablePadding="15dp"/> I have tried this with 75 * 75 dp drawable. It is aligning to the center. You can also set background to the button for glassy look. To do it so use this tool...
Try to add active state's style also this also: .search-button:active {...} @Solution Updates: Adding :default state fix issue....
html,css,wordpress,woocommerce,styling
Without more references/fiddles provided you shouldn't expect this to work site-wide, but I think adding the following to your stylesheet should solve the issue: body.single-product div.panel.entry-content p { color: #000 } ...
json,coldfusion,styling,zingchart
You can use CSS descendant selectors to do this. Use your chart div's id and the tspan element selector to apply font-family, font-weight, font-size, etc..., to all of the text elements in a chart. Example for a chart render at div id="zc": <style> #zc tspan { font-family: Comic Sans, Comic...
Your CSS is overriding the form script running when users select the color. I'm guessing it was added when the code validator generated CSS based on the page code you submitted. Just remove the background-color property from the body tag in the CSS file (line 13 in the HTML) and...
javascript,css,captcha,recaptcha,styling
Overview: Sorry to be the answerer of bad news, but after research and debugging, it's pretty clear that there is no way to customize the styling of the new reCAPTCHA controls. The controls are wrapped in an iframe, which prevents the use of CSS to style them, and Same-Origin Policy...
There are a few specific cases where you can change the styling of 1 element based on the state of another. Case 1: <h1> is a descendant of #menu #menu:hover h1 { color:#f00; } <div id="menu"> <h1>Headline</h1> <p>Just a paragraph to prove a point</p> <div> <h1>Another Headline that behaves exactly...
What you are trying to do won't work because the width of the expander's header also includes the button used to expand and collapse the control. Think of it this way: the header area of the control contains two elements side-by-side, the expand/collapse button and the header "content". You are...
wordpress,navigation,styling,nav
It sounds like you want different active states for each individual link. .current-menu-item captures the active link, but doesn't offer customization for each individual link. I think you can use a combination of nth-child and .current-menu-item. Do you know where .current-menu-item gets applied? If it's on the <li>, this should...
by default, most HTML elements have some margin applied. you can remove these from all elements in your CSS with the following line, best placed at the very top. *{margin:0;} just be aware this will apply to any paragraphs (or anything else) you add later, it might be better to...
It appears that actionButtonStyle and actionMenuTextAppearance should be used without android: namespace. As it can be seen in values-v21/values.xml of support library, Lollipop uses attribute from system theme (note the android: prefix), that's why my attempts worked with it: <style name="Base.V21.Theme.AppCompat.Light" parent="Base.V7.Theme.AppCompat.Light"> ... <item name="actionButtonStyle">?android:attr/actionButtonStyle</item> ... </style> ...
html,css,internet-explorer,styling
You can use it by make it as a class .btn { background:url('../images/btn_login.png')repeat-x; color:white; font-size:15px; border-radius:5px; } and then call it you html code <input type='submit' value='Masuk' class='btn'> ...
css,twitter-bootstrap,webforms,styling
you can use the code the for you desired result <form> <fieldset> <legend>Legend</legend> <div class="container"> <div> <label for="first-name">First Name</label> <input id="first-name" type="text"> </div> <div> <label for="last-name">Last Name</label> <input id="last-name" type="text"> </div> <div> <label for="email">E-Mail</label> <input id="email" type="email" required> </div> <div> <label...
javascript,jquery,html,styling
You could use .filter and .children to select all .elementWrap objects which have a direct .form_required child - then find the labels within that subset: $(".elementWrap").filter(function() { return $(this).children(".form_required").length; }).find("label").css({'width':'auto','margin':'0px'}); jsFiddle There is almost always a way to avoid having to use .each and a lot of if statements....
This will style only the a elements with class close (that are a descendant of #dialog), which is what you want: unique control over your close text, not all your link text #dialog a.close { /*insert css here*/ } #dialog a.close:hover { /*insert cool hover css here*/ } ...
You can set an id to the element you want to change then you can also give it a "onmouseover()"-method which can change the color or other values as follows: var test = document.getElementById("YOUR_ID"); test.setAttribute("style", "fill:#EBC20E;"); ...
angularjs,sorting,styling,angular-ui-grid
You can use the 'headerCellClass' option in your 'columnDefs'. Documentation is here : http://ui-grid.info/docs/#/tutorial/115_headerCellClass In your case it would be like : $scope.gridOptions = { enableSorting: true, columnDefs: [ { field: 'company', headerCellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) { if (col.sort.direction) { return 'red'; } } } ], onRegisterApi: function(...
android,android-layout,textview,spinner,styling
//example main public class MyActivity extends Activity { private Spinner spinner; private TextView text; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); spinner = (Spinner) findViewById(R.id.spinner); text = (TextView) findViewById(R.id.text); List<String> list = new ArrayList<String>(); list.add("A"); list.add("B"); list.add("C"); ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.custom_spinner_item, list);...
Website for this kind of information on css in jfx: CSS Reference Guide Here is how you can manipulate the nodes inside of a coice box: .choice-box > .open-button > .arrow{ /* Example: -fx-opacity: 0; */ } You basically just need to step through all nodes that are inside...
Sorry, this post is a bit too length for the comment box. \n is the universal newline character. But perhaps you should look at this alternative: var stateData = { MA: { fullName: 'Massachusetts', motto: 'A catchy expression here', information: 'More data here', population: 1000 }, } To me it...
jsBin demo Here's a new sample of the needed HTML markup inside your LI element: <p> <img src="//placehold.it/100x100&text=LOGO" width="100" height="100"/> AAA<br/> 93939393<br/> 10 sample road, city </p> <p> We are the best, contact us for more information. We are always here to help.</br> Link1 </p> CSS: *{ margin:0; padding:0; }...
If I understand it rightly, you want to have slightly darker background for some paragraphs. You can include opacity into the background using rgba function: body{ background:#00FFFF; font-family:arial; } p{ background:rgba(0,0,0,0.2); color:white} <p> my text </p> ...
Instead of <input type="submit">, try using a <button> element. You'll find that it's easier to apply CSS styles to. If you apply boz-sizing: border-box CSS rules to the form elements, then you can simply give them a width of 100% and they will fill the available space perfectly: td.wide {...
Option 1: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <Spinner android:id="@+id/spinner1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginLeft="48dp" android:layout_marginRight="48dp" /> </RelativeLayout> Option 2: <LinearLayout...
html,css,css3,stylesheet,styling
Use CSS with 2 borders like so: hr { border-top: 1px solid gray; border-bottom: 1px solid white; } Example in JSFiddle. And to mimic what you have in your picture with text floating on top of the HR, you can do something like this JSFiddle....
css,drupal,views,slideshow,styling
This is a old link, but I'm sure that it's useful for you: http://www.group42.ca/theming_views_2_the_basics Basically you have to create new files and put it in your theme. The name of your files depends on the view. And the module recomends names. On the other hand, you can add the border...
c#,wpf,xaml,storyboard,styling
Finally worked it out. The code I was looking for was as simple as VisualStateManager.GoToState(HelloWorldButton, "MouseOver", true); ...
By doing your $t = "SELECT trackname FROM tracks WHERE albumID = #"; and if($row['albumID']==#) you are essentially still hardcoding similar to your friend. Just do 1 query, where you join all the tracks. Then when looping, group by the albumname - <?php require('mysqli_connect.php'); // SQL query $q = "SELECT...
If i understand your question well i suggest you to change padding:10px; to padding-top:10px; and increase width of <div class='login'> element EDIT Your image change almost everything , please check this fiddle : SOLUTION Only thing i change is remove margin-top:15%; and replace it with padding-top:15%; so i can add...
ic_action_remove.png used to clear text in EditText and ic_action_discard.png used to remove some / all item from our Collection...
I would suggest you google for Font determiner. It gives you results where you can upload the picture to find the font (or closest to) like on this page: https://www.myfonts.com/WhatTheFont/...