html - Hiding text within a button depending on colliding elements -

-

I'm looking at creating a definitive navigation bar which is located within the view of my application. The bar will consist of 3 elements, a back button, a navigation dropdown, and an optional button section. These 3 elements have been aligned as the right of the left, center and navigation bar.

The idea is that the "back" button will actually be listed in that list, in the previous section, "summary" or "personal details". Then this text will expand on the basis of the previous section, the navigation button will also provide a list of the segment in which you are back, see the same button as a back button. But this post is not really focusing on navigation or optional button elements.

I have linked to a basic that gives you a general idea of ​​what I am doing. This idea occurs when the view port becomes small (below 215px width) and "back" and "navigation" elements collide, and the text located in the back button will hide to give you chevron. Currently you can see that it is working in CSS, but due to clicking on the button, Chevron has been pushed down. This idea will be the width of Chevron if there is no text at all. There is no specific breakpoint for this because the text will be different depending on each section of each application.

I was wondering if it would be possible to do it with CSS only? I know that would be possible with Javascript, but if there is a CSS solution available, then I would like to take this route. If there is no CSS solution then JS will have to make a forward path.

HTML 

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Link rel = "stylesheet" href = "style.css" & gt; & Lt; Script src = "script.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "back-container" & gt; & Lt; Button class = "back" & gt; & Lt; Span class = "chevron" & gt; & Lt; / Span & gt; & Lt; Span class = "text" & gt; Back & lt; / Span & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div class = "navigation-container" & gt; & Lt; Div class = "navigation-container-interior" & gt; & Lt; Button class = "navigation" & gt; Navigation & lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "plus-container" & gt; & Lt; Ul class = "plus" & gt; + & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;

CSS 

 . Container {Display: Flex; Flex-direction: line; Flex-wrap: Abrop; Appropriate Materials: Flex-Start; Alignment: Content: Stretch; Align- items: flex-start; }. Back-container {order: 0; Flex: 1 auto; Align - auto: auto; }. Navigation-container {command: 0; Flex: 1 auto; Align - auto: auto; Exhibit: Flex; Justification: center; Text align: center; } .plus-container {order: 0; Flex: 1 auto; Align - auto: auto; Text align: right; } Button.back {Height: 32px; } button. Back Chevron,. Chevron {float: left; Display: Inline-block; Height: 30px; Width: 18px; Background: URL (http://games.thediamondjubilee.org/game_images/timeline/black-chevron-left.png); Repeat Background: No Repetition; } Button.back .text {display: inline-block; Margin-left: 6px; } Ul.plus {display: inline-block; }  Edit:  In the context of people suggesting media queries, here is a planker with potential text that can be within elements now 335 pixels After changing the browser's size below the width, you can see the element and the navigation element hit back. When the text disappears, the back button still keeps the width based on the text located inside. I want to move the back button down from Chevron. Remember, the text of these elements is dynamic based on the location the user has traveled and currently in it. 
 
 
 
  Edit 2:  Solutions want to work in IE10 and 11, Chrome, FF and Safari. So do not worry about supporting fewer in IE terms.


Comments

Post a Comment

Popular posts from this blog

java - Can't add JTree to JPanel of a JInternalFrame -

-
Image
There are two panels in my JInternalframe. I want to add TopPanel to Jtree to nominate another. But I can not add Jaitari to the top of the panel. Please help me in this piece of code: DefaultMutableTreeNode root = new DefaultMutableTreeNode ("deck"); DefaultMutableTreeNode Item Clubs = New DefaultMutableTreeNode ("Club"); AddAllCard (itemClubs); Root.add (itemClubs); DefaultMutableTreeNode item = New DefaultMutableTreeNode ("Diamonds"); AddAllCard (itemDiamonds); Root.add (itemDiamonds); DefaultMutableTreeNode Itemspads = New DefaultMutableTreeNode ("Spades"); AddAllCard (itemSpades); Root.add (itemSpades); DefaultMutableTreeNode item increases = new DefaultMutableTreeNode ("heart"); AddAllCard (itemHearts); Root.add (itemHearts); Default Trimodel Tree Model = New DefaultTreeModel (Route); Tree = new jetty (tree modal); ScrollPane = new JScrollPane (tree); // scrollPane.setViewportView (tree); . ScrollPane.getViewport () add (tr
Read more

javascript - data.match(var) not working it seems -

-
OK, I have this small block code, which is to scanned a number on the website, but for some reason There is a hip that it is not scanning at all. var regenges = / \ & lt; Span class = "currency-robux" data-to-"item-private-value-price" & gt; ([\ D,]) \ & LT; \ / Span \ & gt; /; Var ValueCiling = Data. Match (reggae); Value-song = number (value slicing location (",", "")); Is there anything wrong with that? This is related to the if statement if (value sling and lieutenant; = price watching) { < P> A function calls to move from there, but for some reason it does not seem to run at all. So I think the Regex is wrong but I'm not sure how. (There is a variable in PriceWinking , this is a snippet from the code.) On the website, I'm trying to remove it. & lt; Span class = "robux" data-plus = "item-privatesale-price" & gt; 115 & lt; / Span & gt; Keep in mind
Read more

javascript - How can I pause a jQuery .each() loop, while waiting for user input? -

-
Before I continue to get a jQuery .each loop to wait for user input There is a problem in repeatedly repeating This is my code (I have commented on what I would like to do): & lt; Html xmlns = "http://www.w3.org/1999/xhtml" & gt; & Lt; Top & gt; & Lt; Link rel = "stylesheet" type = "text / css" href = "common_components.css" /> & Lt; Meta http-equiv = "content-type" content = "text / html; charset = UTF-8" /> & Lt; Link rel = "stylesheet" href = "slider.css" & gt; & Lt ;? Php include_once 'common_components.php'; $ Query = $ dbh- & gt; Queries ("SELECT movies_dir FROM settings"); $ Line = $ query- & gt; Obtain (PDO :: FETCH_ASSOC); Date_default_timezone_set ('UTC'); Echo "& lt; title & gt; movie scanner & lt; / title & gt;"; ? & Gt; & Lt; Script src = "jquery.min.js" & gt; &am
Read more