Submenu Dynamic Width - javascript

i'm trying to create a Dynamic Sub-menu to use it in Wordpress, Something like this: http://picbox.im/image/2b5fb80c74-preview.jpg but there is a Width Problem, the width is 'auto' but it is not floating the sub-menu, it is a list, I want they with float:left , but it is not happening, what should a do?
Here is this: http://jsfiddle.net/hD7Ay/1/
There is another problem: The List-style isn't working right.
Thanks a lot in Advance.

Ok lemme know if this is what you were trying to achieve, your question kinda lacked of design meaning.
http://jsfiddle.net/3tsnN/

To Make them all in one line, Use that rule in the SubMenu Ul : white-space: nowrap;
Example Here: http://jsfiddle.net/hD7Ay/3/
Thanks for the help!

Related

Semantic-UI Sidebar transition issue

Am a newbie in webdev. Am trying to use semantic-ui to build a simple web portal.
I have an issue in using the sidebar component. I want the sidebar behaviour to be like this page https://adminlte.io/themes/AdminLTE/index2.html where the body content shrinks / expands when the sidebar is shown/collapsed.
But whatever settings / transition method i choose on the sidebar (push/scale) in semantic-ui , some part of the body moves out of the screen. I just want the content to shrink and expand without exceeding the viewport width.
Here is the jsfiddle of my code showing the issue :
https://jsfiddle.net/vinu_tlg/L5eqt3f4/
Can anyone let me know how i can achieve this behaviour in semantic-ui.
There is a somewhat similar question asked earlier but i don’t see any answer on how to achieve it.
Appreciate any pointers. Thanks in advance.
Add this style
.sidebar.visible + .pusher {
width: calc(100% - 260px);
}
body.pushable {
background-color: white !important;
}
Updated
fiddle

Button is behind divs and co.. z-index pointless?

I want to have the "Kontakt" button in the right cornor at the front. So, this button is supposed to be above everything else. I already set the z-index to z-index: 99999999999 !important; but it doens't effect anything...
On desktop the button is above everything except the footer at the bottom. On mobile its a disaster... Its behind everything... Try yourself..
But why and how can I fix that? - Here the site: https://j-trier.de
Code:
<button onClick="location.href='#kontakt'" type="button" id="kontakt_button" class="cl-popup-trigger type_btn cl-btn">Kontakt</button>
Greetings
just put your button code direct inside of body tag.
You have used Z-index property in right way. But there is a problem in CSS file “us-base.min.css” . On class “l-canvas class” there is a property “overflow: hidden” which is making it invisible. So remove this property. If you want to use it so use it in such way ”overflow-x: hidden; overflow-y: visible;
Happy Coding!

HTML/CSS: the width of the parent is dependent on the child

Sorry, my english is not good :)
When resize the width of the window. How width of dm2 is dependent on the to-n sorted column?
dm1,dm2 is no fixed width in css.
I tried to use text-align for dm1. display: inline for dm2. It works fine, but I found it at fault. I do not know no other way handle it?
Demo Here: https://jsfiddle.net/bindo1995/m4vajbqw/2/
Default
Use text-align for dm1, display:inline; for dm2
How ?
Thanks for helping me !
The problem is that using float or display: inline-block; to-n blocks will always try to fit horizontally on one row when there is enough space for each block and when there is no space for a block it will be on the second row and there will be gap in dm2. If you want them to be 3 on first row and 2 on the second and to fit 100% in dm2 you have to make 2 rows of to-n blocks.

How to display <h1> element vertically (every character on a new line)

I have a h1 element that looks something like this:
But I want the output to look something like this:
Is there a way that we can achieve it in HTML5? CSS3? JavaScript? JQuery?
Please let me know. Thank you.
As requested by #Ethyl I'm posting this as an answer
You can use word-wrap CSS property. You set a small width and break-word for the word-wrap property. Check this fiddle http://jsfiddle.net/1eje4uu4/.
HTML
<h1>Hello</h1>
CSS
h1 {
width: 5px;
word-wrap: break-word;
}
I can't tell you how reliable is this option, but it's one way to go.
You can use <BR> inside an <H1>.
<H1>H<BR>e<BR>l<BR>l<BR>o</H1>
<h1>H<br>E<br>L<br>L<br>O</h1>
And the output
HELLO
Use this jQuery:
$('h1').html($('h1').html().split('').join('<br>'))
Working example
** this will work on dynamic text.Check this with dynamic data

ng-grid row border becomes invisible after using cellClass

When I use cellClass and color entire column, the row border becomes invisible. Here is the plunker. http://plnkr.co/edit/4IeQQBTIe8sgHVEBUTAp?p=preview .Can someone help me.
Simply add something like:
.ngCellText{
border: 1px solid rgb(212,212,212);
}
to your last loaded stylesheet.
style.css in this forked Plunker
again, I'll have to start with saying, that I'm no CSS pro here, but I think the 'issue' is caused by the included angular-ui stylesheet.
They probably have their reasons for it but here is what's causing the missing border:
class .ngCellText adds a padding of 5px pushing the bottom border out of sight.
Attached a screenshot for better understanding:
I would suggest to look into the angular-ui documentation and see how they recommend using it for similar usecases, but as a quickfix try decreasing the padding:
There is probably also a lesson about border-collapse to be learned here.... but as said I'm no css pro and I'm too lazy to look it up :P
Hope this helps, a bit

Categories

Resources