I have a dropdownlist which is given in the image. I want a cool circle button to open the dropdown & secondly i need the dropdown that gets open after we click the button to be a little bit smaller in Width or maybe i want to redesign it. Is it possible by CSS. Every kind of suggestions are welcome.
Using CSS, put the width of dropdown box as imageWidth - 2*(imageBorderRadius).
You can calculate this width easily as you will be knowing the width and border radius given to the image.
Related
CSS Custom Scrollbar style
I've been having a hard time customizing the scrollbar the way I intend and maybe it's not even possible.
I want to add a custom image to the scrollbar-thumb background with rectangles on both ends of it. The conceptual idea is to be able to keep top and bottom of the scrollbar-thumb with a custom icon image, but I represented it as a rectangle in the example.
Since the size of the scrollbar is not always the same I'm looking for a way to achieve what I described before.
I've failed to do it using ::-webkit-scrollbar.
Visual example:
I don't know if this is possible, or if it is, then I'm very dumb.
So I'm using bootstrap 4 to make my wordpress theme. I would like to make the menu to never expand so it always showing the hamburger icon. Now, when the user click it, I'd like it to filled the entire screen like in this website www.tomango.co.uk.
I tried setting the width to 100%, nothing happens. Changing it to a set px also change the toggle button icon.
If you know how to do this, please help me.
This is what you need, please follow this...Just click on slide down, same as your requirement
https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
Imagine this is my header http://freedesignfile.com/upload/2013/01/banner-2.jpg, and the button have to be clickable. I don't want to slice the images and put it into blocks. How can the button be clickable and achieved responsive in the same time??
I am not sure why you want to be so complacent as this can simply be done via Pure CSS only where you can put your image as a background an create this button via CSS and make it clickable.
But, like you have mentioned you do not want to go this way, the only way would be to create another image for a responsive layout and on that image, you need to show/hide based on your requirements and assign a class that changes the click position to match it as per your new image button using image map.
Hope this helps.
After setting up a scene2d window and setting a title, id like to be able to adjust the height of the title bar.
If thats not possible is there a way of finding the current height of the bar? as this would make placing tables and other actors within it a lot easier?
You can change the height of the back of the title bar by modifying the 9 patch graphic used for the background of the window. It's just the top of the window image.
The title available via window.getTitleLabel() is the text label placed on top of the top of the underlying window graphic.
You actor will always be added bellow the title bar, you can adjust using padTop().
To change the title bar size you can change the font of the title size.
I never found a better way to manage this.
you can get the title label through window.getTitleLabel(), then modify it.
I have a dropdown that I'm looking to enlarge without effecting the text and ensuring the right hand down arrow remains at the full hieght of the element.
I've tried adding padding but this effects the right side:
Dropdown with padding http://hoctordesign.com/dropdown2.png
I've tired adding height but I can't vertically align the text:
Dropdown with height http://hoctordesign.com/dropdown.png
Anyone solved this before?
Thanks,
Denis
This is browser-dependent behaviour. Each browser applies css to form controls differently.
The best breakdown of what you can do (that I've come across) is at http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/. And the most relevant section is http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
In your case it would be better to use a custom element that acts like a select box.
Here is a nice one using jQuery
Select Box replacement